[role이란?]
alt 속성처럼 시각장애인들이 이용하는 스크린 리더기나 검색엔진의 크롤링 및 색인과정을 도와주는 부수적인 역할을 수행하는 속성입니다.
[사용방법 및 주의사항]
- role 속성은 alt 태그와 사용법은 동일하지만
정해진 규격이 있다. - 시맨틱태그의 기본 의미를 중복해서 선언할 필요는 없다.
규격 모음
banner : 특정 문서가 아닌 전체 사이트 영역을 지정, 예를 들어 사이트의 헤더나 로고
application : 웹 애플리케이션에 사용되는 영역을 지정
complementary : 페이지의 메인 섹션을 보완하는 영역을 지정
contentinfo : 메인 콘텐츠의 정보를 지정. 예를 들어 페이지 하단의 저작권 정보 표시
form : form태그와 동일
main : main 태그와 동일
navigation : nav 태그와 동일
search : 검색을 수행하는 영역을 정의
tablist : 탭 메뉴 등의 리스트임을 전달함.
tab : 탭 버튼으로 인식
tabpanel : 탭 패널로 인식
ex)
<div role="banner"></div>참고 : https://inswave.com/confluence/pages/viewpage.action?pageId=19076563
프론트엔드 개발자