HTML role 속성 무엇인가?
HTML에서 role 속성은 웹 페이지 내의 특정 요소의 목적이나 타입을 명시적으로 선언하여 접근성을 향상시키는 데 중요한 역할을 한다. role 속성은 주로 스크린 리더와 같은 보조 기술이 웹 콘텐츠를 보다 정확하게 해석하고 사용자에게 전달할 수 있도록 돕는다.
role 속성은 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 의 일부로 웹 애플리케이션의 접근성을 높이기 위해 개발되었다.
WAI-ARIA?
웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위해 W3C에 의해 개발된 기술 표준이다.
WAI-ARIA의 목적은 주로 보조 기술을 사용하는 사람들이 더 풍부하고 상호 작용이 가능한 웹 경험을 할 수 있도록 지원하는 것입니다.
role 속성의 역할
role 속성은 웹 요소가 수행하는 역할을 명시하여 해당 요소가 사용자 인터페이스 내에서 어떻게 작동해야 하는지를 보조 기술에 알려준다.
예를 들어, role="button"은 HTML 요소를 버튼으로 사용하도록 지시한다.
<!-- 버튼 역할, role 적용 버튼 예시 -->
<div role="button" class="button">role 적용 버튼</div>
이는 해당 요소가 클릭 가능하며 버튼으로써의 행동을 해야 함을 나타낸다. role 속성을 사용함으로써 웹 개발자는 마크업 내에서 요소의 의도된 사용 방식을 명확하게 할 수 있고 사용자 경험의 일관성을 유지하고 접근성을 개선하는 데 기여한다.
role 속성의 종류
아래 속성표의 값들 외에도 많은 값이 존재하여 일부만 표기하였다.
총 개수는 약 70개의 role 속성 값이 있다.
| role="button" | 요소가 버튼으로 동작함을 명시한다. 클릭 가능하고, 대개 이벤트 리스너가 연결되어 있다. |
| role="navigation" | 요소가 네비게이션 링크들을 포함하는 컨테이너임을 나타낸다. 사이트의 메뉴나 탐색 섹션에 사용된다. |
| role="alert" | 중요한 정보를 신속하게 사용자에게 알려야 할 때 사용한다. 주로 오류 메시지 또는 경고에 사용된다. |
| role="banner | 페이지의 헤더를 정의하는 데 사용된다. 보통 로고나 주요 헤더 요소가 이 역할을 담당한다. |
| role="contentinfo" | 페이지 또는 섹션의 푸터에 대한 정보를 제공한다. 저작권 정보, 작성자 명세 등을 포함할 수 있다. |
| role="main" | 페이지의 주요 콘텐츠 영역을 명시한다. 한 문서에 하나의 main 역할만 존재한다. |
| role="complementary | 페이지의 주 콘텐츠를 보완하는 콘텐츠 영역이다. 사이드바나 관련 링크 모음에 사용된다. |
| role="form" | 사용자 입력을 받기 위한 폼을 나타낸다. 입력 필드와 관련 요소들을 그룹화하는 데 유용하다. |
| role="search" | 검색 기능을 제공하는 폼이나 섹션을 나타낸다. 검색 필드와 버튼을 포함할 수 있다. |
| role="region" | 페이지의 구획을 명시할 때 사용되며 특히 시각적으로는 구분되지만 그 외에 명확한 역할이 없는 영역에 사용된다. |
| role="img" | 이미지를 나타내며 일반적으로 그래픽 콘텐츠에 대한 의미를 제공한다. |
| role="article" | 문서, 페이지, 또는 사이트 내에서 독립적으로 배포하거나 재사용할 수 있는 구조적인 영역을 나타낸다. 뉴스 기사나 블로그 포스트에 주로 사용다. |
요약
역할 명시: role 속성을 통해 요소의 기능이 명확히 정의된다. 보조 기술이 해당 요소를 적절하게 해석할 수 있게 도와준다.
접근성 향상: 웹 접근성을 높이는 주요 도구로 사용되며 시각 장애가 있는 사용자나 다른 보조 기술을 필요로 하는 사용자들이 웹 콘텐츠를 더 쉽게 이해하고 사용할 수 있도록 돕는다.
다양한 역할: role 속성은 버튼, 링크, 탭, 대화 상자 등과 같이 다양한 인터페이스 구성 요소에 적용되어 각 요소의 구체적인 목적을 설명한다.
사용자 인터페이스 향상: 웹 개발자는 role 속성을 사용하여 웹사이트의 사용자 인터페이스를 보다 직관적이고 사용하기 쉽게 만들 수 있다.