Web Accessibility
Role & Attribute
Sense Reader
| Role & Attribute | Sense Reader |
|---|---|
| aria-label | O |
| aria-current | X |
view
html
기본
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<nav class="c-pagination" aria-label="페이지 선택">
<ul class="c-pagination__list">
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--first"><span class="sr-only">처음 페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--prev"><span class="sr-only">이전 페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">1<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<span class="c-pagination__anchor c-pagination__anchor--current" aria-current="page">2<span class="sr-only">페이지</span></span>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">3<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">4<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">5<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">6<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">7<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">8<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">9<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">10<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--next"><span class="sr-only">다음 페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--last"><span class="sr-only">마지막 페이지</span></a>
</li>
</ul>
</nav>
Screen Reader 음성 출력
- Sense Reader
페이지 선택 navigation 시작 (2-1 / 1)
목록 시작 개수 14 (1 / 1)
처음 페이지 링크
이전 페이지 링크
1 페이지 링크
2 페이지
3 페이지 링크
…
10 페이지 링크
다음 페이지 링크
마지막 페이지 링크
목록 끝
navigation 끝 - NVDA
페이지 선택 내비게이션 랜드마크 목록 항목 수 14개 방문함 링크 처음 페이지
방문함 링크 이전 페이지
방문함 링크 1 페이지
현재 페이지 2 페이지
방문함 링크 3 페이지
..
기본 & Sense Reader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<nav class="c-pagination" aria-label="페이지 선택">
<ul class="c-pagination__list">
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--first"><span class="sr-only">처음 페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--prev"><span class="sr-only">이전 페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">1<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<span class="c-pagination__anchor c-pagination__anchor--current"><span class="sr-only">현재 </span>2<span class="sr-only">페이지</span></span>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">3<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">4<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">5<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">6<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">7<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">8<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">9<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor">10<span class="sr-only">페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--next"><span class="sr-only">다음 페이지</span></a>
</li>
<li class="c-pagination__item">
<a href="#" class="c-pagination__anchor c-pagination__anchor--last"><span class="sr-only">마지막 페이지</span></a>
</li>
</ul>
</nav>
Screen Reader 음성 출력
- Sense Reader
페이지 선택 navigation 시작 (2-1 / 1)
목록 시작 개수 14 (1 / 1)
처음 페이지 링크
이전 페이지 링크
1 페이지 링크
현재 2 페이지
3 페이지 링크
…
10 페이지 링크
다음 페이지 링크
마지막 페이지 링크
목록 끝
navigation 끝 - NVDA
페이지 선택 내비게이션 랜드마크 목록 항목 수 14개 방문함 링크 처음 페이지
방문함 링크 이전 페이지
방문함 링크 1 페이지
현재 2 페이지
방문함 링크 3 페이지
..
기타
1
2
3
<h2>공지사항 <span class="sr-only">2페이지</span></h2>
<p class="sr-only">총 20페이지 중 2페이지</p>
- 페이지를 선택하면 포커스를 헤딩 태그 또는 리스트로 보내는 것이 좋음
- 포커스를 보낼때는 tabindex=”-1” 처리하여 일시적으로 포커스 처리
- 현재 페이지와 총 페이지 갯수를 알려주는 것이 좋음