[웹표준&웹접근성]태그만으로 설명 작성이 어려울 경우 WAI-ARIA

1. WAI-ARIA란?

 

Web Accessibility Initiative - Accessible Rich Internet Applications

 

웹접근성에 대한 표준 기술 규격을 의미

스크린 리더기 프로그램으로 들어보면 의미가 다르게 전달됨

 

HTML5 섹션 태그	LandMarkRole	설명
<nav>	role="naviation"
<main>	role="main"
<form>	role="form"
	role="banner"	<header>요소와 비슷한 의미
	role="search"	검색의 역할을 담당하는 서식 영역
	role="contentinfo"	<footer>요소와 비슷한 의미
	role="tab"

-> 버튼의 역할이 "탭"이라고 명시해주고, 선택된 요서 정보도 함께 전달해 줄 수 있다.

 

 

2. aria-required / aria-label / aria-live

1) aria-required : 

2) aria-label : 레이블 없이 이미지로 표현될 때 정보를 부여 설명

ex) aria-label="검색"

<!-- WAI-ARIA 적용 -->
<button class="btn_search" aria-label="검색"></button>

3) aria-live : 

 

4) aria-expanded

 

5) aria-selected

 

6) aria-invalid

 

 

 

 

 

ex)

<!-- WAI-ARIA 적용 -->
<ul class="btnList" role="tabList">
  <li>
    <a href="#" id="tab01" role="tab" aria-selected="true" aria-controls="tabpanel01">관람정보</a>
  </li>
  <li>
    <a href="#" id="tab02" role="tab" aria-selected="false" aria-controls="tabpanel02">관람순서</a>
  </li>
  <li>
    <a href="#" id="tab03" role="tab" aria-selected="false" aria-controls="tabpanel03">장애인 관람객 이용안내</a>
  </li>
</ul>