WAI-ARIA : role 과 aria-label(aria-labelledby) 사용법

WAI-ARIA

웹 접근성을 준수하기 위해 장착해야 할 도구.

Web Accessibility Initiative's Accessible Rich Internet Applicatioins

 

스크린리더가 브라우저를 읽을 때, 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술.

자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어준다.

 

스크린 리더란 브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면을 낭독해주는 소프트웨어.

 

aria-label

태그가 가지고 있는 의미를 적어주는 이름표 같은 역할

 

aria-label과 role을 쓰기 위한 규칙

첫 번째 규칙

만약 HTML에 개발자들이 쓰기 좋게 만들어져 있는 태그가 존재한다면 그 태그를 사용하는 것이 좋다.

예를 들면, 로 체크박스를 손쉽게 만들 수 있고, 체크박스를 위한 기능(체크하기, 체크 풀기, 체크박스가 focus 되어있을 때 키보드로 제어하기 등등….)들이 이미 만들어져 있을 때 우리는 이 태그를 사용하면 된다.
굳이

태그를 사용해 role을 checkbox로 지정해주고 체크박스가 가진 기능들을 직접 만들 필요가 없는 것이다.

두 번째 규칙

시멘틱 태그에 role을 될 수 있으면 쓰지 않는다. 시멘틱 태그 자체가 의미 있는 태그이기 때문에 role은 붙일 필요 없다. 만약 nav 태그에 button 역할을 추가하고 싶다면

<nav role="button"></nav>
//가 아닌

<nav><button></button></nav>
//이렇게 쓸 것을 권장한다.

버튼

코드 첫 줄의 경우 스크린 리더는 태그를 무시하고 role을 읽는다.

세 번째 규칙

aria로 사용된 모든 요소는 키보드로 제어할 수 있어야 한다. (제 기능을 해야 한다)
만약 role="button"이라면 tab으로 focus한 다음 enter 키나 return 키를 눌렀을 때 active 상태가 되어야 한다.

네 번째 규칙

시멘틱 태그가 의미하는 것을 aria-label로 다시 나타낼 필요는 없다.
아래 코드와 같이 이미 <button>으로 감싸진 태그 안에 또다시 app button이라는 텍스트를 넣을 필요가 없다.

 

 

aria-label과 aria-labelledby의 차이점

aria-label이 이름표를 붙여주는 것이라면, aria-labelledby는 쉽게 말해 그룹으로 묶어주는 속성이다.

 

출처 https://velog.io/@a_in/WAI-ARIA-role-aria-label#