📌 WAI-ARIA란?
👉 복잡하고 동적으로 변화하는 웹 환경에서 신체적, 환경적 조건에 차별 없이 동등하게 이용할 수 있도록 도와주는 기술.
👉 Web Accessibility Initiative - Accessible Rich Internet Applications의 약자로, W3C에서 장애인을 위한 웹 콘텐츠 및 응용 프로그램의 접근성을 향상시키기 위해 개발했다.
👉 WAI-ARIA의 목표는 기존 웹 애플리케이션과 동적 콘텐츠 및 AJAX와 같은 최신 웹 기술 간의 접근성 격차를 해소하는 것
📌 WAI-ARIA를 사용하는 이유는 뭔가요?
👉 RIA의 동적 웹 애플리케이션 접근성 보장 지침이 부족
👉 Ajax, 통한 실시간 변경 콘텐츠, SPA 방식의 콘텐츠 변경
👉 화면 확대사용자의 경우, 가시 범위 밖 콘텐츠의 변경 내용 인지 불가능
📌 WAI-ARIA를 사용할때 주의할 점이 있나요?
👉 사용자의 브라우저와 보조기기가 WAI-ARIA를 지원하는지 확인이 필요합니다.
👉 의미를 가진 HTML 요소를 함부로 바꾸면 안됩니다.
👉 HTML5 Section 요소와 중복되어 사용하면 안됩니다.
👉 HTML5의 시멘틱 태그를 먼저 사용하고 부가적인 의미 설명이 필요할 때 WAI-ARIA의 role을 추가해줍니다.
👉 키보드를 사용하여 접근할 수 있도록 구성해주어야 합니다.
만약 ＜button>, ＜input> 요소들처럼 키보드 지원이 되는 요소를 ＜div>와 WAI-ARIA로 작업해야 한다면, 동일하게 작동되도록 작업해주세요.
<!-- html5 -->
<button>버튼<button>
</select>
<!-- div + WAI-ARIA -->
<div role="button" tabindex="0">버튼</div>📌 WAI-ARIA 구조
👉 역할(Role) : 컴포넌트, 요소 내 역할을 정의합니다.
<ul class="btnList" role="tabList">
<li>
<a href="#" id="tab01" class="on" 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>
<div class="wrap-tab-contents">
<div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab01" tabindex="0">
<p>관람정보 콘텐츠</p>
</div>
<div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab02" tabindex="0" hidden="true">
<p>관람순서 콘텐츠</p>
</div>
<div id="tabpanel01" class="tab-contents" role="tabpanel" aria-labelledby="tab03" tabindex="0" hidden="true">
<p>장애인 관람객 이용안내 콘텐츠</p>
</div>
</div>👉 속성(Property) : 컴포넌트의 특징이나 상황을 정의
아래는 검색이라는 안내 텍스트 없이 아이콘으로만 버튼을 나타낼 때 aria-label을 이용하여 버튼요소에 검색이라는 설명을 추가한 예시입니다.
<button class="btn_search" aria-label="검색"></button>👉 상태(State) : 컴포넌트 상태 정보를 정의합니다.
아코디언 컨텐츠 같은 경우 확장된 상태와 축소된 상태에 대한 정보를 표시할 수 있습니다.
<ul class="btnList">
<li>
<button id="accordion-head01" aria-controls="accordion-region01" aria-expanded="true" >[XD그룹] UI 기획 디자이너 (경력)</button>
<div id="accordion-region01" role="region" aria-labelledby="accordion-head01">[XD그룹] UI 기획 디자이너 (경력) 콘텐츠</div>
</li>
<li>
<button id="accordion-head02" aria-controls="accordion-region02">[XE그룹] UX Engineer(신입/경력)</button>
<div id="accordion-region02" role="region" aria-labelledby="accordion-head02">[XE그룹] UX Engineer(신입/경력) 콘텐츠</div>
</li>
<li>
<button id="accordion-head03" aria-controls="accordion-region03">인턴 디자이너</button>
<div id="accordion-region03" role="region" aria-labelledby="accordion-head03">인턴 디자이너 콘텐츠</div>
</li>
</ul>➕ Role에 지정할수있는것들
| HTML5 Section tag | Landmark Role | 설명 |
|---|---|---|
<nav> | role=”navigation” | 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역 (메인 메뉴 혹은 서브 메뉴로 사용) |
<main> | role=”main” | 본문의 주요 콘텐츠 영역. 한 페이지 내에 1개만 사용이 가능하며, <article>,<aside>,<footer>요소의 하위 요소로 사용할 수 없다. |
<aside> | role=”complementary” | 주요 컨텐츠와 연관이 적은 컨텐츠 영역( 예: 날씨, 주식 ) |
<form> | role=”form” | 폼 요소로 서버에 전송될 수 있는 컨텐츠 |
| . | role=”application” | <div>요소와 같이 그룹 역할을 하는 요소로 대체 |
| . | role=”banner” | <header>요소와 비슷한 의미.<header role=”banner”>로 사용시에는 페이지 별 한번만 사용 |
| . | role=”search” | 검색의 역할을 담당하는 서식 영역. <div> 또는 <form>요소를 사용 권장한다. |
| . | role=”contentinfo” | <footer> 요소와 비슷한 의미.<footer role=”contentinfo”>로 사용시에는 페이지 별 한번만 사용 |
