정의 및 사용 방법
role 속성의 banner 값은 웹 접근성 측면에서 해당 HTML 요소에 사이트 전체에 적용되는 글로벌 헤더 콘텐츠 역할(role)이라는 의미(semantic meaning)를 부여합니다.
글로벌 헤더(Global Header)란 대개 웹 페이지 상단에 있는 전체적인 헤더를 말하며, 사이트 전체에서 반복적으로 나타나는 콘텐츠입니다. 일반적으로 사이트 운영 주체의 로고, 주요 내비게이션 메뉴, 사이트 내 검색 등이 포함되는 경우가 많습니다.
기본 예제
사용법 참고 사항
role 속성의 banner 값을 가지는 요소는 글로벌 헤더 영역을 나타내는 랜드마크 요소로서의 역할(role)이라는 의미(semantic meaning)가 부여됩니다.
HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다.
이러한 랜드마크 요소들은 웹 페이지 내 특정 영역(예: 글로벌 헤더, 메인, 사이드바, 글로벌 푸터 등)을 정의하는 특별한 시멘틱 역할을 가지며, 웹 페이지를 이해하고 탐색하기 쉽게 만들고, 스크린 리더 및 기타 보조 기술을 사용하는 사용자에게 페이지의 레이아웃과 구조를 전달하는 데 중요한 역할을 합니다.
좀 더 자세한 내용은 ARIA Landmarks Example을 참조하시기 바랍니다.
기본적으로 HTML의 많은 요소들은 이미 고유한 역할의 의미(semantic meaning)를 가지고 있습니다.
role 속성의 banner 값으로 부여할 수 있는 글로벌 헤더 콘텐츠 역할(role)을 이미 가지고 있는 요소도 있습니다.
웹 접근성 측면에서 페이지의 <header> 태그(단, <article>,
<aside>,
<main>,
<nav>
또는
<section>
요소의 하위 요소가 아니고
article,
complementary,
main,
navigation
또는
region
역할을 가진 요소의 하위 요소가 아닌 경우)는 고유한 의미(semantic meaning)에 해당하는 역할(role)인 role 속성의 값이 banner입니다. 즉, role 속성의 값을 별도로 지정하지 않으면, 암시적인(implicit) role 속성의 값은 banner입니다.
글로벌 헤더 영역을 나타내는 랜드마크 요소이므로, 중첩된 문서 내의 문서나 애플리케이션이 아니라면 일반적으로 한 페이지당 role 속성의 banner 값을 가진 요소도 하나를 초과하지 않는 것이 좋습니다.
활용 예제
명세서
| 명세서 사양 | |
|---|---|
role="banner"
|
Accessible Rich Internet Applications (WAI-ARIA) #banner |