role 속성은 어떻게 사용해야할까?

role, 어디서 많이 본 것 같은데?

이게 뭔데 Attribute 값으로 많이 들어가 있는거야?

 

role 속성은 alt 태그와 같이, 심각한 문제를 가지고 있는 페이지로 분류를 할 정도의 힘을 가지고 있지는 않습니다만, 이 또한 시각장애인들이 이용하는 스크린 리더기나 검색엔진의 크롤링 및 색인 과정을 도와주는 부수적인 역할을 수행하는 속성입니다.

쉽게 말해 role은 태그의 역할을 알려주는 속성이다.

role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다.

• tab
• tablist
• banner
• button
• group

등등 참 많다.

 

참고: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

Using ARIA: Roles, states, and properties - Accessibility | MDN

 

 

role 속성은 alt 태그와 사용법은 동일하나 사진마다 고유의 설명을 입력해야 하는 alt 속성과는 달리 해당 부분의 역할을 설명하는 속성 이기에 입력하는 role 이 정해져 있습니다.

아래는 직접 작성했던 코드의 잘못된 예 입니다.

 

Vue.js 로 avatar라는 컴포넌트를 만들고 있었다.

해당 컴포넌트는 avatar라는 컴포넌트니까 role에 avatar를 넣어줘볼까? 라고 생각했지만

avatar는 role에서 정해진 값으로 없었기에 부적절해 보인다는 것을 알게 되었다.

 

 

 

 

 

 

우리가 흔히 알고있는 aria-label 하고 좀 비슷해보이는데?

aria-label은 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다.

role과는 다른 기능이 있는데, 크게 두 가지로 나눌 수 있다.

1. aria-label은 role의 banner 나 tab 처럼 값이 정해져 있는 게 아닌, 브라우저가 스크린리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다.

예) aria-label=”메뉴 탭”, aria-label=”펼치기 버튼”, aria-label=”이벤트 배너”

1. aria-label 과 같이 써도 되는 태그가 있고 그렇지 않은 태그가 있다. 시멘틱 태그이거나, role 속성 값이 상호작용을 하는 값일 때 aria-label을 붙일 수 있다.

• a
• button
• header
• footer
• nav
• main
• form
• iframe
• img
• role="navigation"
• role="button"...

시멘틱 태그가 아닌 의미 없는 태그에는 role이 붙어있지 않은 이상 aria-label을 마음대로 붙이면 안 된다.

• div
• span
• p
• li…

<div role="button" aria-label="펼치기">
    <i class="ico ico-arrow"></i>
</div>

이렇게 role와 aria-label을 함께 쓰면 스크린 리더에는 ‘버튼 펼치기’라고 읽을 것이다.

 

참고: 구글링