웹접근성 기술 WAI-ARIA

Posted on | In |

WAI-ARIA의 목적

마크업에 역할, 속성, 상태 정보를 추가하여 스크린기기 및 보조 기기에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험을 제공하기 위함이다.

ARIA의 기능 - 역할(Role)

  • 특정 요소(Element)에 역할을 정의하는것

역할(Role) 작성 규칙

HTML5 섹션 관련 요소와 ARIA Role

HTML5섹션을 div로 마크업할 때, div 요소에 역할(role)을 정의해준다.

Landmark Role HTML5 섹션 관련 요소
div role=”banner” header
div role=”navigation” nav
div role=”main” main
div role=”complementary” aside
role=”form” form
role=”contentinfo” footer
div role=”alertdialog” 대화상자, 팝업
role=”button” 버튼

ARIA의 기능 - 속성(Properties), 상태(States)

  • 요소(Element)가 기본적으로 갖고 있는 특징이나 상황
  • ‘aria - *’ 접두어를 가진다.

속성(Properties) 작성 규칙

속성(Properties) 의미
input aria-required=”true” 필수 항목 속성
input aria-label=”그룹제목” 그룹 제목 속성(그룹에 대한 제목정의)
input aria-labeledby=”참조그룹ID” label for과 비슷한 역할의 속성
input aria-describedby=”reference” 추가 설명 속성(경고텍스트)
aria-hidden=”true” 읽지않음

상태(State) 작성 규칙

상태(State) 의미
aria-expanded=”true” 확장되어 있는 상태의 탭패널
aria-invalid=”true” 오류가 발생한 상태의 입력상자

ARIA 사용시 주의할점

  1. ARIA Role과 HTML5를 중복해서 사용하지 않는다.
  2. HTML Element의 기능 변경이 제한된다.
    ex) h1 role=”button” - 원래의 의도를 바꿔쓴 잘못된 예
  3. 키보드 접근이 보장되어야 한다.
    ex) div role=”button” tabindex=”0”
  4. div 태그로만 구성된 코드를 개선하기 위해 사용한다.

웹접근성 미준수 개선방법

1.로그인 화면에서 경고텍스트를 읽지 않는 경우

1
2
3
<label for="user-id">아이디</label>
<input id="user-id" aria-describedby="msg">
<span id="msg">이미 존재하는 아이디 입니다.</span>

2. CSS IR기법을 이용한 태그 또는 빈 태그일 경우

1
<a href="#"><span role="img" aria-label="대체텍스트-Connect via Facebook"></span></a>