잘 구조화된 콘텐츠는 보다 효율적인 탐색과 처리를 가능하게 합니다.
웹 페이지와 애플리케이션에서 탐색 및 방향성을 개선하려면 HTML과 WAI-ARIA를 사용하세요.
- 페이지 영역 (Page Regions) : HTML5 및 WAI-ARIA 역할을 사용하여 웹 페이지에서 영역을 식별하고 마크업합니다.
- 영역 라벨링 (Labeling Regions) : 사용자가 영역을 구분하고 액세스할 수 있도록 영역에 레이블을 지정합니다.
- 제목 (Headings) : 제목을 추가하고 논리적으로 중첩하여 웹 페이지의 섹션에 관계와 중요도에 따라 레이블을 지정합니다.
- 콘텐츠 구조 (Content Structure) : 적절하고 의미 있는 요소를 사용하여 페이지의 콘텐츠를 마크업합니다.
왜 중요한가?
예를 들어, 잘 구성된 콘텐츠가 있는 페이지는 많은 웹 사용자에게 필수적입니다.
- 인지 및 학습 장애가 있는 사용자는 페이지에서 콘텐츠를 더 쉽게 찾고 우선 순위를 지정할 수 있습니다.
- 스크린 리더를 사용하는 사용자는 주요 콘텐츠로 바로 건너뛰고 자신에게 중요한 섹션으로 이동할 수 있습니다.
- 키보드 사용자는 페이지와 해당 섹션을 더 효율적으로 탐색할 수 있습니다. 그렇지 않으면 사용자가 각 섹션의 모든 링크를 탐색하기 위해 탭 키를 여러 번 눌러야 합니다.
- 인지 장애가 있는 사용자처럼 웹 페이지의 주요 콘텐츠만 표시하는 소프트웨어를 사용하는 사용자는 페이지 구조가 올바르게 마크업되어 있으면 더 나은 결과를 얻을 수 있습니다.
- 저시력 장애인을 비롯한 시각 장애인은 페이지와 콘텐츠에 방향을 알려주는 단서가 있습니다.
- 모바일 웹 사용자는 페이지가 올바르게 마크업된 경우에만 페이지의 주요 콘텐츠가 표시되는 소위 '리더' 또는 '읽기' 모드에 액세스할 수 있는 경우가 많습니다.
- 특정 브라우저 플러그인을 사용하는 사용자는 랜드마크 역할을 사용하여 페이지의 특정 섹션으로 이동할 수 있습니다.
- 접근성이 좋은 페이지 구조에는 장애인이 경험하는 것 외에도 추가적인 이점이 있습니다. 예를 들어, 검색 엔진은 데이터를 사용하여 페이지 콘텐츠의 색인을 더 잘 생성할 수 있습니다.
페이지 영역 (Page Regions)
웹 페이지와 애플리케이션의 다양한 영역을 마크업하여 웹 브라우저와 보조 기술에서 식별할 수 있도록 합니다.
페이지 헤더
대부분의 웹사이트에는 웹사이트 로고, 검색 기능, 탐색 옵션 등 사이트 전체 정보가 포함된 영역이 모든 페이지 상단에 있습니다. HTML5는 이러한 영역을 정의하는 데 사용할 수 있는 <header> 요소를 제공합니다.
참고
<header> 요소가 <article> 및 <section> 요소 안에 사용되는 경우 해당 요소와 연결되지 않습니다. 이 요소는 WAI-ARIA banner 역할(role)을 하지 않으며 보조 기술에서 특별한 동작을 하지 않습니다.
<header>
...
<img src="/img/logo.png" alt="SpaceBear Inc." />
...
</header>페이지 푸터
페이지 헤더와 마찬가지로 대부분의 웹사이트에는 저작권 정보, 개인정보처리방침 또는 고지 사항과 같은 사이트 전체 정보가 포함된 영역이 모든 페이지 하단에 있습니다. HTML5는 이러한 영역을 정의하는 데 사용할 수 있는 <footer> 요소를 제공합니다.
참고
<footer> 요소가 <article> 및 <section> 요소 안에 사용되는 경우 해당 요소와 연결되지 않습니다. 이 요소는 WAI-ARIA contentinfo 역할(role)을 가져오지 않으며 보조 기술에서 특별한 동작을 하지 않습니다.
<footer>
...
<p>© 2023 SpaceBear Inc.</p>
...
</footer>
네비게이션
<nav> 요소는 탐색 메뉴를 식별하는 데 사용할 수 있습니다. 웹 페이지에는 여러 개의 탐색 메뉴가 있을 수 있습니다. label을 사용하여 각 탐색 메뉴를 식별합니다.
<nav aria-label="Main">
...
</nav>
...
<nav aria-labelledby="regionheading">
<h2 id="regionheading">On this page</h2>
...
</nav>메뉴 튜토리얼에서 메뉴 생성에 대한 자세한 내용을 확인할 수 있습니다.
메인 콘텐츠
웹 페이지 또는 애플리케이션의 주요 콘텐츠 영역을 <main> 요소를 사용하여 식별합니다.
<main>
<h1>Stellar launch weekend for the SpaceBear 7!</h1>
...
</main>
보완 콘텐츠
주요 콘텐츠를 지원하지만 그 자체로 별개의 의미 있는 섹션인 영역을 <aside> 요소를 사용하여 식별합니다.
(예: 주요 콘텐츠를 설명하거나 주석을 다는 사이드 노트)
<aside>
<h3>Related Articles</h3>
...
</aside>
WAI-ARIA를 사용한 HTML5의 페이지 영역
현재 대부분의 웹 브라우저는 위의 HTML5 요소를 지원하며 접근성 API를 통해 보조 기술에 정보를 전달합니다. 그러나 WAI-ARIA를 지원하지만 아직 HTML5를 지원하지 않는 웹 브라우저 및 보조 기술과의 호환성을 극대화하려면 현재로서는 HTML5 요소와 해당 WAI-ARIA 역할을 모두 사용하는 것이 좋습니다.
<header role="banner">...</header>
<main role="main">...</main>
<nav role="navigation">...</nav>
<footer role="contentinfo">...</footer>
다른 WAI-ARIA 리소스를 살펴보세요.
영역 라벨링 (Labeling Regions)
같은 페이지에서 <nav> 요소를 사용하는 'main navigation' 및 'sub-navigation' 메뉴와 같이 동일한 유형의 두 페이지 영역을 구분하는 레이블을 제공합니다. 레이블은 페이지 영역의 기본 식별을 변경하는 데도 사용됩니다.
(예: <aside> 영역을 "광고"로 식별).
<main>과 같이 고유한 영역은 추가 레이블이 필요하지 않습니다.
접근 1) aria-labelledby 사용
aria-labelledby를 사용하여 (고유) id로 기존 요소를 가리킵니다. 영역의 레이블은 참조된 요소의 콘텐츠입니다. 모든 요소는 이런 식으로 레이블이 될 수 있습니다. 레이블은 짧고 설명적이어야 합니다. 영역에 제목이 있는 경우 제목을 레이블로 사용하는 것이 좋습니다.
<nav aria-labelledby="regionheading">
<h2 id="regionheadling">On this Page</h2>
...
</nav>참고
제목(headings)을 사용하는 이 접근 방식은 구형 웹 브라우저와도 호환되며 보조 기술은 HTML5 및 WAI-ARIA를 처리하지 않습니다.
접근 2) aria-label 사용
영역에 레이블을 지정하려면 WAI-ARIA aria-label 속성을 사용합니다. 레이블이 페이지에 시각적으로 표시되지 않아야 하는 경우 이 접근 방식을 고려하세요.
<nav aria-label="Main">
...
</nav>
제목 (Headings)
제목은 페이지에 있는 콘텐츠의 구성을 전달합니다.
웹 브라우저, 플러그인 및 보조 기술에서는 이를 사용하여 페이지 내 탐색 기능을 제공할 수 있습니다.
제목 순위
순위(또는 수준)에 따라 제목을 중첩합니다. 가장 중요한 제목은 순위가 1(<h1>)이고 가장 중요하지 않은 제목은 순위가 6(<h6>)입니다. 순위가 같거나 높은 제목은 새 섹션을 시작하고 순위가 낮은 제목은 더 높은 순위의 섹션에 속하는 새 하위 섹션을 시작합니다.
제목 순위를 건너뛰면 혼란스러울 수 있으므로 가능한 경우 피해야 합니다.
<h2> 바로 뒤에 <h4>가 오지 않도록 하세요. 예를 들어, 새 섹션을 시작하는 <h2>가 이전 섹션을 마무리 하는 <h4> 뒤에 올 수 있는 것처럼 하위 섹션을 닫을 때는 순위를 건너 뛰어도 괜찮습니다.
고정 페이지 섹션의 예외
사이드바와 같이 페이지의 고정된 섹션에서는 콘텐츠 영역의 순위에 따라 제목 순위가 변경되지 않아야 합니다. 이러한 경우 페이지 전체에서 일관성이 더 중요합니다.
텍스트 구절 구성
다음 예에서 제목은 주요 콘텐츠와 같이 페이지의 텍스트 구절을 구성하는 데 사용됩니다.
페이지 구성을 반영하는 제목
제목은 페이지 영역에 레이블을 지정하는 데 유용합니다.
이 튜토리얼의 페이지 영역 레이블 지정 섹션에 설명된 대로 aria-labelledby를 사용하여 제목을 페이지 영역과 연결합니다. 제목이 표시되면 모든 사용자가 영역을 쉽게 식별할 수 있습니다.
예 1) 네비게이션 이전의 기본 제목
이 첫 번째 예에서는 순위가 1인 제목이 문서에서 첫 번째 제목입니다. 페이지 구성을 위한 다른 모든 제목(네비게이션 메뉴, 사이드바, 푸터)은 한 등급 낮으며, 주요 콘텐츠의 제목도 마찬가지입니다.
예 2) 네비게이션 이후의 기본 제목
이 두 번째 예제에서 주 제목은 사이트 이름이 아니라 콘텐츠 제목이며, 이는 1순위입니다. 콘텐츠의 부제목은 다른 모든 구조적 제목과 마찬가지로 2순위입니다.
콘텐츠 구조 (Content Structure)
웹사이트 콘텐츠를 의미론적으로 마크업하여 웹사이트를 확장할 수 있도록 합니다.
유효한 의미론은 재사용이 가능하고 보조 기술에 더 의미 있는 콘텐츠를 만듭니다.
article
<article> 요소는 웹 페이지에서 전체 또는 독립된 구성을 나타냅니다. 쇼핑 사이트의 상품이나 뉴스 사이트의 뉴스 기사 등이 기사의 예입니다.
<article>
<h2>Space Bear Classic</h2>
...
</article>
<article>
<h2>Space Bear Extreme</h2>
...
</article>
section
<section> 요소는 웹 페이지 또는 기사의 일반적인 영역을 표시합니다. 콘텐츠의 주제별 그룹화에 사용됩니다.
<section>
<h2>Chapter 2</h2>
...
</section>
문단
문단 요소(<p>)를 사용하여 지금 이 문단과 같이 텍스트 단락을 표시할 수 있습니다. 단락의 일관된 스타일링은 텍스트 가독성을 향상시킵니다. 또한 사용자가 보기를 사용자 지정할 때 더 많은 제어 기능을 제공합니다.
목록
다양한 유형의 목록을 사용하여 정보의 성격에 따라 정보를 그룹화하여 사용자에게 방향을 제시하세요.
- 정렬되지 않은 목록(<ul>)은 항목의 순서가 관련이 없는 경우에 사용됩니다. 정렬되지 않은 목록의 목록 항목은 글머리 기호로 표시됩니다.
- 정렬된 목록(<ol>)은 순차적 정보에 사용되며 브라우저에서 자동으로 열거됩니다.
- 설명 목록(<dl>)은 프로그래밍 방식으로 연결된 관련 용어 및 설명의 그룹입니다.
개별 목록 항목에는 단락, 제목, 양식 요소, 기타(중첩된) 목록 등 다양한 HTML 요소가 포함될 수 있습니다.
정렬되지 않은 목록
정렬되지 않은 목록은 하나의 <ul> 요소와 여러 목록 항목(<li>) 요소로 구성됩니다.
<ul>
<li>Corn</li>
<li>Tomatoes</li>
<li>Beans</li>
<li>Onions</li>
<li>Garlic</li>
…
</ul>
정렬된 목록
정렬된 목록은 하나의 <ol> 요소와 여러 목록 항목(<li>) 요소로 구성됩니다.
<ol>
<li>Cook beans for 45 minutes.</li>
<li>Cut vegetables in small cubes.</li>
<li>Sauté onions and garlic.</li>
<li>Deglaze using the tomatoes.</li>
<li>Add corn and beans.</li>
…
</ol>
중첩된 목록
모든 목록은 다른 목록에 중첩될 수 있습니다. 다음 예에서는 순서는 중요하지 않지만 재료를 사용하기 전에 준비 자체를 완료해야 합니다. 정보는 여전히 이해하기 쉬우며 보조 기술을 통해 사용자에게 단계 수를 쉽게 알려줄 수 있습니다.
<ol>
<li>
Prepare ingredients
<ul>
<li>Cook beans for 45 minutes.</li>
<li>Cut vegetables in small cubes.</li>
</ul>
</li>
<li>Sauté onions and garlic.</li>
<li>Deglaze using the tomatoes.</li>
<li>Add corn and beans.</li>
…
</ol>
설명 목록
설명 목록은 하나 이상의 용어 및 설명 그룹으로 구성됩니다. 각 그룹은 하나 이상의 용어(<dt> 요소의 내용)를 하나 이상의 설명(<dd> 요소의 내용)과 연결합니다.
그룹화는 목록의 첫 번째 항목에서 시작되거나 <dt> 요소가 <dd> 요소 다음에 올 때마다 시작됩니다.
예 1) 하나의 용어, 여러 설명
다음 예에서는 John과 Luke를 작성자(Authors)로, Frank를 편집자(Editor)로 설명합니다.
<dl>
<dt>Authors</dt>
<dd>John</dd>
<dd>Luke</dd>
<dt>Editor</dt>
<dd>Frank</dd>
</dl>
예 2) 여러 용어, 하나의 설명
다음 예에서는 설명 목록을 사용하여 한 단어의 철자가 다른 두 가지를 정의합니다. 이러한 경우 정의된 용어를 마크업하려면 dfn 요소를 사용합니다.
<dl>
<dt lang="en-US"><dfn>color</dfn></dt>
<dt lang="en-GB"><dfn>colour</dfn></dt>
<dd>A sensation which (in humans) derives from the ability of the fine structure of the eye to distinguish three differently filtered analyses of a view.</dd>
</dl>
예 3) 여러 용어, 여러 설명
이 예에서 John과 Luke는 작성자(Authors)이면서 편집자(Editor)이기도 합니다.
<dl>
<dt>Authors</dt>
<dt>Editors</dt>
<dd>John</dd>
<dd>Luke</dd>
</dl>
인용문
인용문을 식별하면 콘텐츠의 출처가 다른 작성자임을 명확히 알 수 있습니다. 인용문은 인라인 또는 텍스트 블록으로 마크업할 수 있습니다. 보조 기술을 통해 인용문의 시작과 끝을 사용자에게 전달하여 오해를 피할 수 있습니다.
예 1) 인용문
더 길고 복잡한 따옴표는 <blockquote> 요소를 사용합니다. 단락, 제목 및 기타 텍스트 구조 요소를 포함할 수 있습니다. 이러한 요소는 인용된 문서의 구조를 반영해야 합니다. <cite> 요소는 인용문의 출처를 참조하는 데 사용됩니다.
<p>
The following is an excerpt from the <cite>The Story of my Life</cite>
by Helen Keller
</p>
<blockquote>
<p>
Even in the days before my teacher came,
I used to feel along the square stiff boxwood hedges,
and, guided by the sense of smell, would find the first violets and lilies.
There, too, after a fit of temper, I went to find comfort and to hide my hot
face in the cool leaves and grass.
</p>
</blockquote>
예 2) 인라인 인용문
일반적으로 다른 문장에 포함되는 짧은 인용문의 경우 <q> 요소를 사용합니다.
<p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it,
we can never do anything good in the world.</q></p>
figure
figure는 페이지의 주요 콘텐츠에서 추가 정보가 설정된 블록으로, 때로는 주요 텍스트에서 참조되기도 합니다. 일반적으로 목록, 이미지, 표를 포함하지만 다른 콘텐츠도 포함할 수 있습니다. 예를 들어 연례 보고서에서 제품의 판매량이 포함된 다이어그램을 참조할 수 있습니다.
각 그림은 <figure> 요소로 둘러싸여 있으며 중첩된 <figcaption> 요소를 사용하여 레이블이 지정됩니다.
<p>The sales volume of our SpaceBear product was steadily the first three
quarters but had a huge success in quarter four with the introduction of
SuperBear in time for the holiday season. See graphic G3 for details.</p>
<figure role="group" aria-labelledby="fig-t3-capt">
<figcaption id="fig-t3-capt">G3: SpaceBear sales volume</figcaption>
<img src="…"
alt="SpaceBear sales diagram, showing the huge success in Q4"
longdesc="…">
<a href="…">Long Description</a>
</figure>
참고
이 글을 작성하는 현재, 보조 기술에 일관된 방식으로 정보를 제공하기 위해 WAI-ARIA 속성 role="group" 및 aria-labelledby가 사용되고 있습니다.참고
다이어그램을 마크업하는 방법에 대한 자세한 내용은 복잡한 이미지를 참조하세요.
이미지 및 일러스트레이션
이미지와 일러스트레이션은 많은 사용자의 시각적 참여를 유도하는 데 유용합니다. 또한 읽기 장애가 있는 사람들을 위해 텍스트를 명확하게 설명할 수도 있습니다. 이미지 또는 일러스트레이션을 사용하는 경우에는 적절한 대체 텍스트를 추가해야 합니다. 대체 텍스트에 대한 지침은 이미지 튜토리얼을 참조하세요.
테이블
데이터 테이블은 모든 사람에게 테이블의 구조를 전달할 수 있도록 데이터를 표시하는 유용한 방법을 제공합니다. 적절한 테이블 레이아웃을 사용하면 사람들이 그리드를 보지 않고도 의미 있는 데이터 관계를 이해할 수 있습니다. 자세한 내용은 테이블 자습서를 참조하십시오.
묶음 글 목록
[A11Y] - 웹접근성 튜토리얼 - 2. 페이지 구조
이 글은 W3C의 웹접근성 튜토리얼을 번역한 글입니다.
'A11Y' 카테고리의 다른 글
| [번역] 웹접근성 튜토리얼 - 6. 폼 (0) | 2023.07.06 |
|---|---|
| [번역] 웹접근성 튜토리얼 - 5. 테이블(표) (0) | 2023.07.06 |
| [번역] 웹접근성 튜토리얼 - 4. 이미지 (0) | 2023.07.06 |
| [번역] 웹접근성 튜토리얼 - 3. 메뉴(네비게이션) (0) | 2023.07.06 |
| [번역] 웹접근성 튜토리얼 - 1. 개요 (0) | 2023.07.06 |
