ARIA: landmark 역할

설명

landmark는 사용자가 쉽게 탐색하고자 하며 페이지의 동적으로 생성된 요약에 포함되기를 원할 만큼 중요한 콘텐츠 구획을 위한 추상 역할입니다. 랜드마크를 사용하면 ë³´ì¡° 기술이 콘텐츠를 빠르게 탐색하고 찾을 수 있습니다.

랜드마크 역할을 만들려면 <section>, <nav>, <main>ê³¼ 같은 의미론적 요소를 사용하거나 role="banner", role="complementary", role="region"ê³¼ 같은 landmark 역할의 하위 클래스인 ARIA 역할을 추가하여 콘텐츠의 목적을 정의하세요. role="landmark"는 사용하지 마세요.

가시적인 레이블을 제공하고 aria-labelledby로 참조해야 합니다. 필요한 경우 aria-label을 사용하여 간단하고 설명적인 레이블을 제공할 수 있습니다.

스크린 리더 사용자의 경우, 랜드마크 역할을 추가하면 효과적으로 '건너뛰기 링크'가 생성되지만 페이지 내 탐색을 대체하지는 않습니다. 랜드마크 역할은 다른 방식으로 표면화되지 않기 때문입니다.

모범 사례

role="landmark"를 사용하지 마세요. HTMLê³¼ 하위 클래스 랜드마크 역할을 사용하세요.

랜드마크는 콘텐츠가 탐색 가능한 영역에 있도록 보장합니다. role="main"에는 <main>, role="banner"에는 <header>, role="navigation"에는 <nav>, role="contentinfo"에는 <footer>를 사용하세요. 관련된 의미론적 요소와 함께 역할을 중복해서 포함하는 것도 좋은 방법입니다. <div>와 같은 비의미론적 요소에 랜드마크 역할로 의미를 추가하는 것은 그만큼 좋은 방법은 아닙니다. 하지만 둘 중 하나 또는 둘 다를 포함하세요. 그렇지 않으면 스크린 리더 사용자가 콘텐츠를 탐색하기 어려워집니다.

명세서

같이 보기

• ARIA: section 역할
• ARIA: banner 역할
• ARIA: complementary 역할
• ARIA: contentinfo 역할
• ARIA: form 역할
• ARIA: main 역할
• ARIA: navigation 역할
• ARIA: region 역할
• ARIA: search 역할
• 접근성 향상을 위한 HTML 랜드마크 역할 사용하기 (MDN 블로그, 2023)