HTML role 속성 정리, 사용방법은?

WAI-ARIA Roles

role은 쉽게 말하면 alt속성과 유사하다고 볼 수 있다.

img태그를 사용할 때 이미지가 뜨지 않거나 스크린리더를 위해서 alt에  이미지 이름을 넣는다.

대체문자를 넣는것과 비슷하다.

 

role은 태그별로 넣을 수 있는 역할들이 분류되어 있다.

꼭 넣어야하는 것은 아니지만 alt를 신경쓰는만큼이라도 role은 신경써야하는 부분인거 같다.

 

WAI-ARIA Roles - Accessibility | MDN

 

MDN에서 정확한 사용방법과 정의들은 알 수 있었다. 내가 이해한게 맞겠지?

 

role 사용방법

role = "alert"

- 일반적으로 중요한 정보를 가지고 있는 곳 또는 변경되는 곳

 

role = "article"

- 문서 또는 웹사이트에 페이지 섹션

- 일반적으로 댓글, 게시물, 신문 기사 또는 한 페이지에 함께 그룹화 된 기타 항목과 같은 콘텐츠 항목

 

role = "alertdialog"

- 중요한 메시지, 경고 대화 상자

 

role = "banner"

- 배너, 일반적으로 로고, 회사이름, 검색 기능 및 가능한 경우 슬로건을 포함하는 글로벌 사이트 헤더를 정의

 

role = "heading"

- 페이지의 헤더가 있는 위치

 

이 외에도 img, input, mark, main, ... 등등 정말 많은 입력값들이 있다.

mdn에서 확인해보며 사용해보면 좋을 것 같다!