WAI-ARIA 바르게 사용하기 4부 - 랜드마크 역할
Nts Nuli
2018-04-27 12:36:23
안녕하세요. 엔비전스입니다.
‘WAI-ARIA 바르게 사용하기 3부’에서는 alert, alertdialog 역할을 적용하는 방법에 대해 알아보았습니다. 이번 시간에는 WAI-ARIA 바르게 사용하기 4부로 랜드마크 역할에 대해 살펴보겠습니다.
랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있으며, 보조기술 사용자에게 랜드마크 역할을 통해 효과적인 키보드 탐색을 지원하여 웹 페이지의 탐색 경험을 향상시킬 수 있습니다. 스크린 리더는 랜드마크를 위한 키보드 탐색 명령을 제공하며, 키보드 사용자의 경우 브라우저 확장 기능을 통해 랜드마크를 활용할 수 있습니다. 키보드 사용자를 위한 랜드마크 브라우저 플러그인은 플러그인 홈페이지에서 다운로드 할 수 있습니다.
이번 아티클에서는 스크린 리더를 중심으로 랜드마크 역할을 바르게 사용하는 방법을 알아보겠습니다.
랜드마크를 적용하기 전 고려 사항
앞에서 언급하였듯 랜드마크 역할은 스크린 리더와 같은 보조기술 사용자에게 웹페이지의 구조를 명확히 식별하기 위해 사용될 수 있습니다. 랜드마크 역할을 잘못 적용하거나 과도하게 사용할 경우 보조 기술 사용자의 페이지 탐색을 방해할 수 있습니다. 그러므로, 페이지에 랜드마크를 적용하기 전 다음 사항을 고려해야 합니다.
- 페이지를 주메뉴, 본문, 검색 등과 같이 인식 가능한 영역으로 나눕니다.
- 페이지의 영역을 명확히 나누었다면, 영역에 맞는 랜드마크를 부여합니다(자세한 랜드마크 역할은 다음 섹션에서 설명합니다).
- 특정 랜드마크가 한 페이지 내 두 번 이상 사용된 경우, 적절한 레이블이 제공되어야 합니다.
- 랜드마크 영역이 헤딩(<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>
랜드마크 역할 예제는 랜드마크 역할 예제 페이지에서 확인하실 수 있습니다.
지금까지 랜드마크 역할에 대해 알아보았습니다. 저희는 다음에 더 좋은 내용으로 다시 찾아뵙겠습니다. 읽어주셔서 감사합니다.
조회수8066