기본 ! : mdn html elements 공식 문서 참고할것
img
- alt 속성은 default로 작성해야한다.필수는 아니지만 접근성에 매우 유용하다. 뭐라고 작성해야할지 모를 때, 이미지가 콘텐츠의 중요한 요소가 아닐 때는 빈칸으로 작성하면 된다.
1 2 3 4 5
<pre> 이렇게 작성하면 이미지가 화면에 뜨지 않을 때 이미지를 엑스박스로 노출하는게 아니라 이미지가 화면에 보이지 않는다. </pre> <img src="hello.png" alt="" />
aria-label
- img alt를 작성한 것과 같이 사용자의 접근성을 위해 필요한 속성
- 대상에 접근가능한 정확한 설명이 없을 떄,DOM에 접근가능한 정보가 없을 때 사용된다.
- 과도하게 사용하지 말것. aria-labelledby 도 같은 역할을 하는데 aria-labelledby 와 aria-label이 둘다 적용되어있다면 aria-labelledby이 우선시된다.
- 시각적으로 화면을 확인할 수 없는 사용자가 screen reader를 사용할 때 필요한 정보를 제공한다. 시각적인 정보를 대신해 해당 콘텐츠에 관한 설명을 읽어준다.
- screen reader 사용자들만을 위해 (aria-label을 사용해) 설명을 하기보다는 모든 사용자를 위해 설명을 작성하고 가능하다면(따로 설명이 필요하지 않게) UI를 더 직관적이게 개발하라.
- 예시 : pagination에 적용한 aria-label, 각 anchor에 관한 정보를 제공한다.
1 2 3 4 5 6 7 8 9 10 11
<div class="pagination"> <a href="#" aria-label="Go to previous page" class="disabled">Previous</a> <ol> <li><a href="#" aria-label="Current page.Go to page 1">1</a></li> <li><a href="#" aria-label="Go to page 2">2</a></li> <li><a href="#" aria-label="Go to page 3">3</a></li> <li><a href="#">...</a></li> <li><a href="#" aria-label="Go to page 7">7</a></li> </ol> <a href="#" aria-label="Go to Next page">Next</a> </div>
- aria-hidden =”true” : 아이콘이나 이미지와 같이 완전 장식적인 요소라서 설명이 불필요한 경우, 반복된 콘텐츠
1 2 3 4 5 6 7 8
<strong aria-label="평점 9.4" class="product-card-review"> <span aria-hidden="true"> <i class="fas fa-star"></i><i class="fas fa-star"></i ><i class="fas fa-star"></i><i class="fas fa-star"></i> <i class="fas fa-star-half"></i> </span> 9.4 </strong>
Comments powered by Disqus.