<footer> 요소 role 속성 설명 | ChatGPT

<footer> 요소 role 속성

role 속성이란 WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 사양의 일부입니다.

웹 페이지나 애플리케이션의 요소들이 어떻게 보조기기(스크린 리더 등)에 의해 해석되고 상호작용할지를 명시합니다.

---

role 속성 값

1. none / presentation

요소를 접근성 트리에서 무시합니다. 즉, <footer>는 시각적으로는 표시되지만 스크린 리더와 같은 보조기기에서는 무시됩니다.

사용 예: 시각적으로는 푸터로 표시되지만, 구조적으로나 의미적으로는 페이지의 푸터가 아닌 경우

2. navigation

요소가 탐색 링크 모음임을 명시. <footer> 내에 탐색 링크(예: 사이트 맵, 정책 링크 등)가 있을 때 사용합니다.

사용 예: 푸터에 탐색 메뉴나 사이트 링크가 포함된 경우

3. complementary

주요 콘텐츠 외의 추가적인 콘텐츠 섹션임을 나타냅니다.

푸터가 페이지의 주요 콘텐츠와는 독립적이거나 보충적인 내용을 포함할 때 사용합니다.

사용 예: 페이지의 주요 내용과는 별개의 정보(연락처 정보, 라이센스, 법적 정보 등)를 제공할 때

4. contentinfo

웹 페이지나 섹션의 하단에 위치하는 푸터 콘텐츠임을 명시합니다.

페이지나 섹션의 하단을 나타내는 정보로 해석합니다.

<footer> 태그는 암묵적으로 role="contentinfo"로 동작합니다.

출처 | ChatGPT