I HATE FLYING BUGS logoFE Chapter

랜드마크 Region

웹페이지 구조를 식별하는 ARIA landmark role 사용 가이드

소개

ARIA landmark role들은 웹페이지의 구성과 구조를 식별하는데 강력한 방법을 제공합니다. 페이지의 섹션을 분류하고 라벨링해서 레이아웃을 통해 시각적으로 전달되는 구조적인 정보를 프로그래밍적으로 표현하게 됩니다. 스크린 리더들은 landmark role을 활용하여 페이지의 중요한 섹션으로 이동하는 키보드 네비게이션을 제공합니다. 또한 landmark region들은 "링크 건너뛰기"의 대상으로 활용하거나 브라우저 확장 프로그램을 사용하여 키보드 네비게이션을 강화할 수 있습니다.

이 장에서는 보조 기술 사용자가 페이지 레이아웃의 의미를 이해하기 쉽게 HTML 섹션 요소들과 Aria landmark role들을 어떻게 사용하는지 설명합니다.

HTML 섹션 요소들

몇 가지 HTML 섹션 요소들은 자동적으로 ARIA landmark region들을 생성하게 되어 있습니다. 그래서 보조 기술 사용자들에게 페이지의 논리적 보기 제공하기 위해서는 HTML 섹션 요소들의 영향을 이해하는것이 중요합니다. html-aria에 요소별 역할 매핑에 대해서 더 많은 정보를 볼 수 있습니다.

HTML 섹션 요소의 기본 랜드마크 역할

HTML 요소기본 랜드마크 역할
aside보완
footer본문 요소의 컨텍스트에서는 콘텐츠 정보
formaria-labelledby, aria-label 또는 title 어트리뷰트를 사용하여 접근 가능한 이름을 가지는 경우 form
header본문 요소의 컨텍스트에서는 배너
main메인
nav네비게이션
sectionaria-labelledby 또는 aria-label을 사용하여 접근 가능한 이름이 있을 때 지역

랜드마크 설계를 위한 일반적인 원칙

각 랜드마크 영역에 페이지의 인식 가능한 모든 컨텐츠들을 포함하고 의미론적으로 의미 있는 역할을 부여하는 것은 보조 기술 사용자가 자신의 요구와 관련된 정보를 놓치지 않도록 하는 가장 효과적인 방법 중 하나입니다.

1단계: 논리적인 구조를 파악하기

  • 일반적으로 디자이너들이 정렬이나 간격으로 시각적인 구별을 하는 컨텐츠의 인식 가능한 영역으로 페이지를 나눕니다.
  • 필요에 따라 영역들은 논리적 하위영역으로 더 정의될 수 있습니다.
  • 하나의 하위 영역의 예시는 포털 애플리케이션의 포틀릿(날씨 정보, 뉴스 업데이트, 개인 메일함같은거)을 들 수 있습니다.

2단계: 각 영역에 랜드마크 역할을 부여한다.

  • 영역의 컨텐츠 타입에 따라 랜드마드 역할들을 부여합니다.
  • 배너, 메인, 보안, 컨텐츠 정보 랜드마드들은 최상위 레벨에 위치해야 합니다.
  • 랜드마크 역할을 중첩하여 표시되는 정보의 부모/자식 관계를 식별할 수 있습니다.
  • 랜드마크 영역에서 모달 대화 상자의 콘텐츠를 감쌀 필요는 없습니다. 모달 콘텐츠를 감싸는 랜드마크는 모달이 열려 있지 않으면 인식할 수 없으므로 사용자에게 아무런 이점을 제공할 수 없습니다. 또한 모달이 열려 있는 경우 모달 자체가 이름과 경계를 모두 제공하는 컨테이너이므로 해당 콘텐츠를 포함하는 랜드마크는 불필요합니다.

3단계: 영역 라벨

  • 특정 랜드마크 역할이 한 페이지에서 두 번 이상 사용되는 경우 해당 랜드마크의 각 인스턴스에 고유한 레이블을 제공하세요.
  • 각 인스턴스의 콘텐츠와 목적이 동일한 경우 랜드마크의 여러 인스턴스에 동일한 레이블을 제공하는 것이 좋습니다. 예를 들어, 큰 검색 결과 테이블에는 동일한 페이지네이션 컨트롤이 두 세트(테이블 위와 아래에 하나씩)가 있으며, 각 세트는 검색 결과라는 레이블이 붙은 탐색 영역에 있습니다. 이 경우 두 인스턴스를 구분하는 레이블에 추가 정보를 추가하는 것은 도움이 되기보다는 오히려 방해가 될 수 있습니다.
  • 만약에 랜드마크가 페이지에 유일하다면 라벨은 필요하지 않을 수 있습니다. (아래에서 더 설명)
  • 영역이 제목 요소(h1-h6)로 시작한다면 aria-labelledby 속성으로 라벨로 사용할 수 있습니다.
  • 영역에 라벨이 필요하지만 제목 요소가 없는 경우 aria-label 속성을 사용하여 레이블을 제공하세요.
  • 랜드마크 역할을 라벨의 일부로 사용하지 마세요. 예를 들어 "사이트 탐색"이라는 라벨이 있는 탐색 랜드마크는 스크린 리더에서 "사이트 탐색 탐색"으로 표시됩니다. 라벨은 단순히 "사이트"여야 합니다.

랜드마크 역할들

배너

배너 랜드마크는 웹사이트 안에서 각 페이지의 시작부분에 있는 사이트 중심(site-oriented) 컨텐츠를 식별합니다. 일반적으로 사이트 중심 컨텐츠는 로고나 사이트 스폰서의 로고나 아이덴티티 사이브별 검색 등이 포함됩니다. 배너는 보통 페이지 최상단에 위치해 있으며 전체 너비를 차지하는 경항이 있습니다.

  • 각 페이지마다 배너 랜드마크 하나를 가지고 있습니다.
  • 배너 랜드마크는 최상위 레벨 랜드마크이어야 합니다.
  • 페이지가 중첩된 document 또는 application 역할(iframe)들을 가지고 있다면 document 또는 application 역할에는 하나의 배너 랜드마크가 있을 수 있습니다.
  • 페이지가 하나 이상 배너 랜드마크를 가지고 있는 경우 각자 고유한 라벨을 가지고 있어야 한다.

HTML 기법

  • HTML header 요소는 body 요소안에 있으면 배너 랜드마크를 정의한다.
  • HTML header 요소는 다음 요소안에 있으면 배너 랜드마크로 간주되지 않는다. (참조)
    • article
    • aside
    • main
    • nav
    • section
<header>
  <h1>website information<h1>
  .... banner content....
</header>

ARIA 기법

role="banner" 속성을 배너 랜드마크에 지정하여 정의한다.

<div role="banner">
  <h1>page title identifying website<h1>
  .... banner content....
</div>

예시

https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/banner.html

보완(Complementary)

보완 랜드마크는 문서의 보조 섹션으로, DOM 계층 구조에서 비슷한 수준에서 주 콘텐츠를 보완하도록 설계되었지만 주 콘텐츠와 분리되어도 여전히 의미가 있습니다.

  • 보완 랜드마크는 최상위 레벨 랜드마크이어야 한다.
  • 보완 컨텐츠가 메인 컨텐츠와 관련이 없다면 더 일반적인 역할을 부여해아 한다. (e.g. region).
  • 페이지가 한가지 이상 보완 랜드마크를 가지고 있는 경우 각자는 고유한 라벨을 가지고 있어야 한다.

HTML 기법

aside 요소를 사용하여 보완 랜드마크를 정의합니다.

HTML 예시: 페이지에 하나의 보완 랜드마크 하나의 보완 랜드마크만 있다면 라벨은 선택적입니다.

<aside>

  <h2>Title for complementary area<h2>

  .... complementary content area ....

</aside>

HTML 예시: 여러 보완 랜드마크 하나 이상인 경우 고유한 라벨을 가지고 있어야 한다.

<aside aria-labelledby="comp1">
  <h2 id="comp1">Title for complementary area 1</h2>

  ... complementary content area 1 ...
</aside>

<aside aria-labelledby="comp2">
  <h2 id="comp2">Title for complementary area 2</h2>

  ... complementary content area 2 ...
</aside>

ARIA 기법

role="complementary" 속성 사용

<!-- 한가지 보완 랜드마크 -->
<div role="complementary">

  <h2>Title for complementary area<h2>

  .... complementary content area ....

</div>


<!-- 두가지 이상 보완 랜드마크 -->
<div role="complementary" aria-labelledby="comp1">

  <h2 id="comp1">Title for complementary area 1</h2>

  ... complementary content area 1 ...

</div>

<div role="complementary" aria-labelledby="comp2">

  <h2 id="comp2">Title for complementary area 2</h2>

  ... complementary content area 2 ...

</div>

컨텐츠 정보(Contentinfo)

contentinfo 랜드마크는 저작권 및 개인 정보 보호와 접근성 성명서에 대한 링크 같은 정보를 포함하는 일반적으로 페이지의 "footer"라고 불리는 웹 사이트 내에서 각 페이지의 하단에 있는 일반적인 정보를 식별하는 방법입니다.

  • 각 페이지는 하나의 contentinfo 랜드마크를 가질 수 있습니다.
  • contentinfo 랜드마크는 최상위 랜드마크여야 합니다.
  • 페이지가 중첩된 document와/또는 application 역할(role)을 포함하는 경우 (예를 들어, 일반적으로 iframe과 frame 엘리먼트의 사용을 통해), 각 document나 application 역할(role)은 하나의 contentinfo 랜드마크를 가질 수 있습니다.
  • 페이지가 두 개 이상의 contentinfo 랜드마크를 포함한다면, 각각은 고유한 레이블을 가져야 합니다.

HTML 기법

  • HTML footer 엘리먼트의 컨텍스트가 body 엘리먼트인 경우 contentinfo 랜드마크를 정의합니다.
  • HTML footer 엘리먼트가 다음 엘리먼트들 중 하나의 후손일 경우 contentinfo 랜드마크로 간주되지 않습니다:
    • article
    • aside
    • main
    • nav
    • section
<footer>

  <h2>연락처, 정책, 법률<h2>

  .... contentinfo 영역 콘텐트 ....

</footer>

ARIA 기법

<div role="contentinfo">

  <h2>연락처, 정책, 법률<h2>

  .... contentinfo 영역 콘텐트 ....

</div>

Form

form 랜드마크는 다른 기명 랜드마크(예를 들어, main 또는 search)가 적절하지 않은 경우 Form을 만들도록 결합되는 항목과 객체들의 모음을 포함하는 영역 전체로 식별합니다.

  • 양식이 검색 기능으로 사용되는 경우 form 랜드마크 대신 search 랜드마크를 사용하세요.
  • form 랜드마크는 사용자들이 양식의 목적 이해를 돕기 위한 라벨을 가져야 합니다.
  • form 랜드마크에 대한 라벨은 보이는 aria-labelledby를 사용하여 제목 엘리먼트로 (예를 들어, h1-h6 엘리먼트) 식별되어야 합니다.
  • 페이지가 둘 이상의 form 랜드마크를 포함하는 경우, 각각은 고유한 라벨을 가져야 합니다.
  • 가능한 항상 HTML 문서의 form 랜드마크에 포함된 컨트롤들은 네이티브 호스트 의미론을 사용해야 합니다:
    • button
    • input
    • select
    • textarea

HTML 기법

form 엘리먼트가 접근 가능한 이름을 가진다면 form 랜드마크로 간주됩니다.

HTML Form 랜드마크 예 다음 두 form이 (예를 들어, 주소록 추가와 조직 추가) 동일한 웹 페이지에서 독립적으로 제출될 수 있다고 가정해보세요.

<form aria-labelledby="contact">
  <fieldset>
    <legend id="contact">연락처 추가</legend>

    ... 연락처 추가 폼 컨트롤 ...
  </fieldset>
</form>

...............

<form aria-labelledby="organization">
  <fieldset>
    <legend id="organization">조직 추가</legend>

    ... 조직 추가 폼 컨트롤 ...
  </fieldset>
</form>

ARIA 기법

<div role="form" aria-labelledby="contact">
  <fieldset>
    <legend id="contact">주소록 추가</legend>

    ... 주소록 추가 폼 컨트롤 ...
  </fieldset>
</div>

...............

<div role="form" aria-labelledby="organization">
  <fieldset>
    <legend id="organization">조직 추가</legend>

    ... 조직 추가 폼 컨트롤 ...
  </fieldset>
</div>

Main

main 랜드마크는 페이지의 주요(primary) 콘텐트를 식별합니다.

  • 각 페이지는 하나의 main 랜드마크를 가져야 합니다.
  • main 랜드마크는 최상위 랜드마크여야 합니다.
  • 페이지가 중첩된 document와/또는 application 역할(roles)을 포함하는 경우 (예를 들어 일반적으로 iframe과 frame 엘리먼트의 사용을 통해), 각 document나 application 역할(role)은 하나의 main 랜드마크를 가질 수 있습니다.
  • 페이지가 둘 이상의 main 랜드마크를 포함하는 경우, 각각은 고유한 레이블을 가져야 합니다.

HTML 기법

main 랜드마크를 지정하도록 HTML main 엘리먼트를 사용하세요.

<main>

  <h1>주요 콘텐트에 대한 제목<h1>

  .... 주요 콘텐트 영역 ....

</main>


페이지에 둘 이상의 main 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.

...............

<main aria-labelledby="title1">

  <h1 id="title1">주요 콘텐트 영역 1에 대한 제목<h1>

  .... 주요 콘텐트 영역 1 ....

</main>

....

<main aria-labelledby="title2">

  <h1 id="title2">주요 콘텐트 영역 2에 대한 제목<h1>

  .... 주요 콘텐트 영역 2 ....

</main>

ARIA 기법

<div role="main">

  <h1>주요 콘텐트에 대한 제목<h1>

  .... 주요 콘텐트 영역 ....

</div>

페이지에 둘 이상의 main 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.

<div role="main" aria-labelledby="title1">

  <h1 id="title1">주요 콘텐트 영역 1에 대한 제목<h1>

  .... 주요 콘텐트 영역 1 ....

</div>

....

<div role="main" aria-labelledby="title2">

  <h1 id="title2">주요 콘텐트 영역 2에 대한 제목<h1>

  .... 주요 콘텐트 영역 2 ....

</div>

Navigation 랜드마크는 웹 사이트나 페이지 콘텐트를 탐색하는데 사용 되도록 의도된 링크의 그룹(예를 들어 목록)을 식별하는 방법을 제공합니다.

  • 페이지가 둘 이상의 navigation 랜드마크를 포함하는 경우, 각각은 고유의 레이블을 가져야 합니다.
  • navigation 랜드마크가 페이지의 다른 navigation 랜드마크와 동일한 링크 세트를 가지는 경우, 각 navigation 랜드마크에 대해 동일한 레이블을 사용하세요.

HTML 기법

navigation 랜드마크를 지정하도록 HTML nav 엘리먼트를 사용하세요.

<nav>

  <h2>navigation 영역에 대한 제목<h2>

  <ul>
    <li><a href="page1.html">Link 1</a></li>
    <li><a href="page2.html">Link 2</a></li>
    <li><a href="page3.html">Link 3</a></li>
    <li><a href="page4.html">Link 4</a></li>
    .....
  </ul>
</nav>

페이지에 둘 이상의 navigation 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.

<nav aria-labelledby="nav1">

  <h2 id="nav1">navigation 1에 대한 제목<h2>

  <ul>
    <li><a href="page11.html">Link 1</a></li>
    <li><a href="page12.html">Link 2</a></li>
    <li><a href="page13.html">Link 3</a></li>
    <li><a href="page14.html">Link 4</a></li>
    .....
  </ul>
</nav>

....

<nav aria-labelledby="nav2">

  <h2 id="nav2">navigation 2에 대한 제목<h2>

  <ul>
    <li><a href="page21.html">Link 5</a></li>
    <li><a href="page22.html">Link 6</a></li>
    <li><a href="page23.html">Link 7</a></li>
    <li><a href="page24.html">Link 8</a></li>
    .....
  </ul>
</nav>

Region

region 랜드마크는 저자 지정 목적과 사용자가 쉽게 섹션을 탐색하고 페이지 요약에 나열되기를 원할 수 있을 만큼 충분한 것과 관련된 콘텐트를 포함하는 인식 가능한 섹션입니다.

  • region 랜드마크는 레이블을 가져야(must) 합니다.
  • 페이지가 둘 이상의 region 랜드마크를 포함한다면, 각각은 고유한 레이블을 가져야 합니다.
  • region 랜드마크는 기명 랜드마크로는 적절하게 설명할 수 없는 콘텐트를 식별하는데 사용될 수 있습니다.

HTML 기법

region 랜드마크를 지정하도록 HTML section 엘리먼트를 사용하세요.

HTML 예: section[aria-labelledby] 어트리뷰트 사용 페이지에 존재하는 콘텐트를 사용하여 각 영역에 대해 레이블을 지정하세요.

<main>

  <h1>메인 콘텐트 영역에 대한 제목<h1>

  <section aria-labelledby="region1">

    <h2 id="region1">영역 1에 대한 제목</h2>

    ... 영역 1에 대한 콘텐트 ...

  </section>

  <section aria-labelledby="region2">

    <h2 id="region2">영역 2에 대한 제목</h2>

    ... 영역 2에 대한 콘텐트 ...

  </section>

</main>

HTML 예: section[aria-label] 어트리뷰트 사용 보조 기술에만 보이는 어트리뷰트 값을 사용하여 각 영역에 대한 레이블을 지정하세요.

<main>

  <h1>주요 콘텐츠에 대한 제목<h1>

  <section aria-label="영역 1에 대한 제목">

    <h2>영역 1에 대한 제목</h2>

    ... 영역 1에 대한 콘텐트 ...

  </section>

  <section aria-label="영역 2에 대한 제목">

    <h2>영역 2에 대한 제목</h2>

    ... 영역 2에 대한 콘텐트 ...

  </section>

</main>

HTML 예: section[title] 어트리뷰트 사용 일부 브라우저에서 툴팁으로 사용할 수 있는 어트리뷰트 값을 사용하여 각 영역에 대한 레이블을 지정하세요.

<main>

  <h1>주요 콘텐트에 대한 제목<h1>

  <section title="영역 1에 대한 제목">

    <h2>영역 1에 대한 제목</h2>

    ...영역 1에 대한 콘텐트...

  </section>

  <section title="영역 2에 대한 제목">

    <h2>영역 2에 대한 제목</h2>

    ...영역 2에 대한 콘텐트...

  </section>

</main>

ARIA 기법

role="region" 어트리뷰트가 region 랜드마크를 지정하는데 사용됩니다.

ARIA 예: role="region" 어트리뷰트 사용

<div role="main">

  <h1>주요 콘텐트 영역에 대한 제목<h1>

  <div role="region" aria-labelledby="region1">
    <h2 id="region1">영역 1에 대한 제목</h2>

    ... 영역 1에 대한 콘텐트 ...

  </div>

  <div role="region" aria-labelledby="region2">

    <h2 id="region2">영역 2에 대한 제목</h2>

    ... 영역 2에 대한 콘텐트 ...

  </div>

</div>

참고 자료