Web Accessibility
Role & Attribute
Screen Reader 지원
| Role & Attribute | Sense Reader | NVDA |
|---|---|---|
| aria-label | O | O |
| aria-current | X | O |
view
html
기본
현재 페이지를 나타내는 요소가 링크가 아닌 경우 aria-current는 선택 사항
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav class="c-breadcrumb" aria-label="breadcrumb">
<ol class="c-breadcrumb__list">
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#">Home</a>
</li>
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#">Depth1</a>
</li>
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#">Depth2</a>
</li>
<!-- 링크인 경우 -->
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#" aria-current="page">Depth3</a>
</li>
<!-- 링크가 아닌 경우 -->
<li class="c-breadcrumb__item">
<span class="c-breadcrumb__anchor" aria-current="page">Depth3</span>
</li>
</ol>
</nav>
Screen Reader 음성 출력
- Sense Reader
breadcrumb navigation 시작 (2-1 / 1)
목록 시작 개수 5 (1 / 1)
Home 링크
Depth1 링크
Depth2 링크
Depth3 링크
Depth3
목록 끝
navigation 끝 - NVDA
breadcrumb 내비게이션 랜드마크 목록 항목 수 5개 링크 Home
링크 Depth1
링크 Depth2
링크 현재 페이지 Depth3
현재 페이지 Depth3
목록 끝
기본 & Sense Reader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav class="c-breadcrumb" aria-label="breadcrumb">
<ol class="c-breadcrumb__list">
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#">Home</a>
</li>
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#">Depth1</a>
</li>
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#">Depth2</a>
</li>
<!-- 링크인 경우 -->
<li class="c-breadcrumb__item">
<a class="c-breadcrumb__anchor" href="#"><span class="sr-only">현재 페이지 </span>Depth3</a>
</li>
<!-- 링크가 아닌 경우 -->
<li class="c-breadcrumb__item">
<span class="c-breadcrumb__anchor"><span class="sr-only">현재 페이지 </span>Depth3</span>
</li>
</ol>
</nav>
Screen Reader 음성 출력
- Sense Reader
breadcrumb navigation 시작 (2-1 / 1)
목록 시작 개수 5 (1 / 1)
Home 링크
Depth1 링크
Depth2 링크
현재 페이지 Depth3 링크
현재 페이지 Depth3
목록 끝
navigation 끝 - NVDA
breadcrumb 내비게이션 랜드마크 목록 항목 수 5개 링크 Home
링크 Depth1
링크 Depth2
링크 현재 페이지 Depth3
현재 페이지 Depth3
목록 끝