정의 및 사용 방법

role 속성의 region 값은 웹 접근성 측면에서 해당 HTML 요소에 '특정 목적과 관련된 콘텐츠를 포함하며, 페이지 요약에 포함될 만큼 중요하고 사용자가 쉽게 탐색할 수 있어야 하는 영역(region)'이라는 랜드마크 역할(role)을 부여합니다.

Region Landmark(영역 랜드마크)

스크린 리더 및 기타 보조 기술을 사용하는 사용자에게는 웹 접근성 측면에서 웹 페이지의 콘텐츠 구조를 쉽게 탐색할 수 있는 것이 무엇보다 중요합니다.

웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소들을 "랜드마크(landmark)" 요소라고 하며, role 속성의 값으로도 랜드마크 역할(role)을 부여할 수 있습니다. 예를 들어, 글로벌 헤더, 메인, 글로벌 푸터 등은 웹 페이지 내 콘텐츠를 구성하는 다양한 콘텐츠들 중에서도 웹 접근성 측면에서 사용자가 빠르게 탐색할 수 있어야 하는 랜드마크 요소들입니다.

여기에 웹 페이지 콘텐츠 중 메인 콘텐츠, 부가 콘텐츠, 내비게이션 등 다른 랜드마크 역할로는 그 목적을 정확하게 나타내기 어려우면서, 특정 목적과 관련되어 있고 사용자가 빠르게 탐색할 필요가 있을 만큼 중요한 콘텐츠 영역이 있을 수 있습니다. 예를 들자면, '주요 공지사항', '설문 조사' 등과 같은 콘텐츠 영역일 수 있습니다.

이러한 콘텐츠 영역에 해당하는 요소에 role 속성의 region 값을 지정하면 웹 접근성 측면에서 랜드마크 역할(role)이 부여되며, 이를 Region Landmark(영역 랜드마크)라고 합니다. 스크린 리더 및 기타 보조 기술을 사용하는 사용자는 Region Landmark(영역 랜드마크)를 빠르게 탐색할 수 있습니다.

Region Landmark(영역 랜드마크) 역할(role)은 웹 접근성 측면에서 스크린 리더 및 기타 보조 기술을 사용하는 사용자가 해당 영역을 빠르게 탐색할 수 있도록 하는 것입니다. 그러면서도, 메인 콘텐츠, 부가 콘텐츠, 내비게이션 등 다른 랜드마크 역할처럼 해당 콘텐츠 영역이 어떤 목적과 관련된 콘텐츠를 포함하는지를 식별할 수 있도록 해야 합니다.

그렇다면 Region Landmark(영역 랜드마크) 역할(role)은 사용자가 해당 콘텐츠 영역의 목적을 어떻게 식별할 수 있도록 해야 할까요?

명세서에서는 다음과 같은 조건들을 제시합니다.

  • role="region"이 지정된 요소에는 해당 콘텐츠 영역의 목적을 설명하고 식별할 수 있는 간략한 레이블(이름)을 반드시 지정해야 합니다.
  • 콘텐츠 내에 적절한 레이블(예를 들면, <h1>~<h6> 제목 요소 또는 role="heading"이 지정된 요소)이 있다면 aria-labelledby를 사용하고, 그렇지 않다면 aria-label을 사용합니다.
  • Region Landmark(영역 랜드마크) 역할(role)은 main, complementary, navigation 등 다른 랜드마크 역할로는 더 적합한 역할(role)이 없을 때 지정해야 합니다.

기본 예제

다음은 자체적으로 특별한 의미가 전혀 없는 <div> 태그에 role 속성의 region 값을 지정해서 Region Landmark(영역 랜드마크) 역할(role)을 부여하는 예제입니다. role="region"이 지정된 요소에는 해당 콘텐츠 영역의 목적을 설명하고 식별할 수 있는 간략한 레이블(이름)을 반드시 지정해야 합니다.

HTML 
<div role="region" aria-labelledby="region-heading">
    <h2 id="region-heading">주요 공지사항</h2>
    <!-- ... region content area ... -->
</div>

여러 개의 role="region"을 사용

문서 내에서 여러 개의 role="region"이 사용되었을 경우에는 role="region"이 사용된 각각의 요소에 고유한 레이블(이름)을 지정해서 Region Landmark(영역 랜드마크)의 목적을 설명하고 식별할 수 있게 해야 합니다.

HTML 
<div role="region" aria-labelledby="region-heading-1">
    <h2 id="region-heading-1">주요 공지사항</h2>
    <!-- ... region content area 1 ... -->
</div>

...

<div role="region" aria-labelledby="region-heading-2">
    <h2 id="region-heading-2">설문 조사</h2>
    <!-- ... region content area 2 ... -->
</div>

고려할 점

기본적으로 HTML의 많은 요소들은 이미 고유한 역할의 의미(semantic meaning)를 가지고 있습니다.

<section> 태그는 논리적인 측면에서 주제별 콘텐츠 그룹을 나타내는 데 사용합니다. 이 태그에 aria-labelledby, aria-label 등과 같은 접근성 이름(accessible name)이 있으면, 암시적인(implicit) role 속성의 값은 region입니다.

다음은 '접근성 이름(accessible name)' 용어에 대한 간단한 부연설명입니다.
접근성 이름(accessible name)
웹 접근성 측면에서 요소의 시각적 속성(예: 버튼에 표시된 텍스트)이나 비시각적 속성(예: 그래픽 이미지나 아이콘의 대체 텍스트 )을 통해 스크린 리더 등과 같은 접근성 도구가 식별할 수 있는 해당 요소의 이름입니다.

<section> 태그에 접근성 이름(accessible name)이 있으면 자동으로 Region Landmark(영역 랜드마크) 역할(role)임을 알릴 수 있기 때문에, role 속성의 region 값으로 역할을 부여할 필요는 없으며, 스크린 리더 등과 같은 웹 접근성 도구뿐만 아니라 관련 기술에서의 처리, 코드를 직접 다루는 개발자 및 코드의 가독성 측면에서도 올바른 의미론적 HTML 요소인 <section> 태그를 사용하는 것이 좋습니다.

HTML 
<section aria-labelledby="region-heading">
    <h2 id="region-heading">주요 공지사항</h2>
    <!-- ... region content area ... -->
</section>

주의할 점

랜드마크 역할은 문서의 웹 페이지 구성과 구조를 식별하는 강력한 방법이지만, 랜드마크 역할을 너무 많이 사용하면 페이지 전체 레이아웃을 이해하기 어려워질 수 있으며, 중요한 영역으로 빠르게 이동하는 데 오히려 방해가 될 수 있기 때문입니다.

Region Landmark(영역 랜드마크)는 다른 관련 콘텐츠 구분 요소나 랜드마크 역할이 적용되지 않을 때만 사용하세요.
페이지에 여러 영역이 존재한다면, 페이지의 전체 구조를 다시 살펴보는 것이 좋습니다.

명세서

role 속성의 region 값에 대한 명세서 사양
명세서 사양
role="region" Accessible Rich Internet Applications (WAI-ARIA)
#region

참고문헌

같이 보기