Web Accessibility
Role & Attribute
Screen Reader 지원
| Role & Attribute | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| aria-labelledby | O | O | O | O |
view
html
- 상품의 경우 구조상 하나의 a tag를 사용하지 못할 경우, 2개로 분리하여 사용
- 첫번째 a tag는 키보드 접근을 막기 위해
aria-hidden및tabindex="-1"처리 및 내용을 읽어주기 위해id값 부여 - 두번째 a tag는
aria-labelledby를 사용하여 첫번째, 두번째 a tag안의 내용을 읽어주도록 처리 - TalkBack에서 초점 분리 현상을 막기 위해 div에
aria-hidden처리 및 내용을 읽어주기 위해id값 부여
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="c-product-card">
<div class="c-product-card__head">
<a href="#" class="c-product-card__anchor" aria-hidden="true" tabindex="-1" id="★id-product-head">
<div class="c-product-emblem"><img src="../image/emblem.jpg" alt="emblem"></div>
<div class="c-product-image"><img src="../image/image.jpg" alt=""></div>
</a>
</div>
<div class="c-product-card__body">
<a href="#" class="c-product-card__anchor" aria-labelledby="★id-product-head ★id-product-body">
<div class="c-product-card__inside" aria-hidden="true" id="★id-product-body">
<div class="c-product-title">
<strong class="c-product-title__brand">브랜드</strong>상품명
</div>
<div class="c-product-price">
<span class="c-product-price__discount"><span class="sr-only">할인율</span><span class="c-product-price__number">10</span>%</span>
<strong class="c-product-price__final"><span class="sr-only">판매가</span><span class="c-product-price__number">1,000,000</span>원</strong>
</div>
</div>
</a>
</div>
</div>