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