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
<nav class="c-step" aria-label="회원 가입">
<ol class="c-step__list">
<li class="c-step__item">
<a class="c-step__anchor" href="#">약관 동의</a>
</li>
<li class="c-step__item">
<a class="c-step__anchor" href="#">정보 입력</a>
</li>
<li class="c-step__item">
<span class="c-step__anchor" aria-current="step">가입 완료</span>
</li>
</ol>
</nav>
Screen Reader 음성 출력
- Sense Reader
회원 가입 navigation 시작 (2-1 / 1)
목록 시작 개수 3 (1 / 1)
약관 동의 링크
정보 입력 링크
가입 완료
목록 끝
navigation 끝 - NVDA
회원 가입 내비게이션 랜드마크 목록 항목 수 3개 링크 약관 동의
링크 정보 입력
현재 단계 가입 완료
목록 끝
기본 & Sense Reader
1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="c-step" aria-label="회원 가입">
<ol class="c-step__list">
<li class="c-step__item">
<a class="c-step__anchor" href="#">약관 동의</a>
</li>
<li class="c-step__item">
<a class="c-step__anchor" href="#">정보 입력</a>
</li>
<li class="c-step__item">
<span class="c-step__anchor"><span class="sr-only">현재 단계 </span>가입 완료</span>
</li>
</ol>
</nav>
Screen Reader 음성 출력
- Sense Reader
회원 가입 navigation 시작 (2-1 / 1)
목록 시작 개수 3 (1 / 1)
약관 동의 링크
정보 입력 링크
현재 단계 가입 완료
목록 끝
navigation 끝 - NVDA
회원 가입 내비게이션 랜드마크 목록 항목 수 3개 링크 약관 동의
링크 정보 입력
현재 단계 가입 완료
목록 끝