WAI-ARIA 요소 - 랜드마크 역할

랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며, 보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상시킬 수 있습니다.

스크린 리더는 랜드마크를 위한 키보드 탐색 명령을 제공하며, 키보드 사용자의 경우 브라우저 확장 기능을 통해 랜드마크를 활용할 수 있습니다.

키보드 사용자를 위한 랜드마크 브라우저 플러그인은 플러그인 홈페이지에서 다운로드 할 수 있습니다.

랜드마크 브라우저 플러그인 : https://github.com/matatk/landmarks

 

 

랜드마크를 적용하기 전 고려 사항

앞에서 언급하였듯 랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있습니다. 랜드마크 역할을 잘못 적용하거나 과도하게 사용할 경우 보조 기술 사용자의 페이지 탐색을 방해할 수 있습니다. 그러므로, 페이지에 랜드마크를 적용하기 전 다음 사항을 고려해야 합니다.

• 페이지를 주메뉴, 본문, 검색 등과 같이 인식 가능한 영역으로 나눕니다.
• 페이지의 영역을 명확히 나누었다면, 영역에 맞는 랜드마크를 부여합니다.
  (자세한 랜드마크 역할은 다음 섹션에서 설명합니다.)
• 특정 랜드마크가 한 페이지 내 두 번 이상 사용된 경우, 적절한 레이블이 제공되어야 합니다.
• 랜드마크 영역이 헤딩(<h1>~<h6>)으로 시작하는 경우 aria-labelledby 또는 aria-label 속성으로 레이블을 지정할 수 있습니다.
• 랜드마크 역할을 레이블의 일부로 사용할 경우 스크린 리더 사용자가 중복된 정보를 듣게 되어 랜드마크를 식별함에 있어 불편이 있으므로, <사이트 navigation> 레이블이 있는 navigation 랜드마크는 <사이트 navigation>으로 레이블을 지정하기 보다는 <사이트>로 레이블을 지정하는 것이 좋습니다.

 

랜드마크의 유형

랜드마크의 역할은 main, navigation, banner 등과 같은 여러 가지 유형이 있습니다. 이번 섹션에서는 각각의 랜드마크의 유형을 살펴보겠습니다.

• banner
  banner 영역에는 웹페이지의 상단에 표시되는 로고, 홈으로 이동 등과 같은 기본적인 탐색에 사용되는 것들을 포함할 수 있습니다.
  body 요소 중 가장 가까운 <header> 요소의 경우 브라우저는 banner 랜드마크로 처리합니다. banner 랜드마크에는 navigation, search와 같은 랜드마크를 포함할 수 있습니다.
• complementary
  complementary 영역에는 주요 콘텐츠의 보조적인 정보를 포함할 수 있습니다.
  블로그의 한 글이 있다고 가정했을 때, 블로그 글과 관련된 관련 글 섹션이 있을 수 있습니다. complementary 영역에는 이러한 보조적인 정보가 포함될 수 있습니다.
• contentinfo
  contentinfo 영역에는 사이트 하단에 제공되는 저작권 정보, 개인 정보 보호 정책 등이 포함될 수 있습니다. body 요소 내 가장 가까운 <footer> 요소의 경우 브라우저는 contentinfo 랜드마크로 처리합니다.
• form
  form 영역에는 회원가입, 로그인, 연락처 입력, 뉴스레터 수신과 같은 서식을 포함할 수 있습니다.
  페이지에 여러 form 랜드마크가 있을 경우 form 영역에는 aria-labelledby나 aria-label 속성을 사용하여 적절한 레이블을 지정해야 합니다.
  주의할 점은, 검색 서식의 경우 search 랜드마크를 사용해야 합니다.
• search
  search 영역에는 검색과 관련된 서식, 링크 등이 포함될 수 있습니다. 검색을 위한 검색어 입력, 검색 버튼, 고급 검색 링크가 대표적입니다.
• main
  main 영역에는 본문 영역과 같은 사이트의 주요 콘텐츠를 포함할 수 있습니다.
  한 페이지 내 여러 main 영역이 존재할 경우 사용자가 사이트의 주요 콘텐츠를 찾는 데 있어 혼란이 있으므로, 하나의 main 영역만 사용해야 합니다.
  body 요소 내 <main>요소가 있을 경우 브라우저는 main 랜드마크로 처리합니다.
• navigation
  navigation 영역에는 주 메뉴, 유틸 메뉴와 같은 탐색할 수 있는 그룹을 포함할 수 있습니다. 한 페이지 내 여러 navigation 영역이 있을 경우 aria-labelledby나 aria-label 속성으로 <주 메뉴>, <primary>와 같은 적절한 레이블을 지정해야 합니다.
  body 요소 내 <nav> 요소가 있을 경우 브라우저는 navigation 랜드마크로 처리합니다.
• region
  region 영역은 웹사이트 제작자가 중요하다고 판단되는 콘텐츠에 region 랜드마크를 설정할 수 있습니다.
  region 랜드마크에는 해당 영역이 어떤 영역인지 스크린 리더 사용자에게 명확히 알릴 수 있도록 aria-labelledby나 aria-label 속성으로 적절한 레이블을 지정해야 합니다.

 

 

주의

한 페이지 내 동일한 유형의 랜드마크가 사용될 경우 스크린 리더와 같은 보조 기술 사용자가 페이지의 고유한 영역을 인지하기 어려울 수 있습니다. 스크린 리더 사용자의 경우 단순 랜드마크 역할만 적용할 경우 <banner>, <main>, <navigation>와 같은 랜드마크 역할만 듣게 됩니다. 다음과 같이 동일한 유형의 랜드마크가 사용될 경우 반드시 적절한 레이블이 제공되어야 합니다.

• <nav aria-label="primary">...</nav>

랜드마크 역할 예제는 랜드마크 역할 예제 페이지에서 확인할 수 있습니다.

랜드마크 역할 예제 페이지 : https://scottaohara.github.io/landmarks_demo/

 

 

 

 

 

 

참고:)

https://nuli.navercorp.com/community/article/1132906

WAI-ARIA 바르게 사용하기 4부 - 랜드마크 역할