Home [HTML] HTML 101 img, aria-label
Post
Cancel

[HTML] HTML 101 img, aria-label

기본 ! : mdn html elements 공식 문서 참고할것

  1. img

    • alt 속성은 default로 작성해야한다.필수는 아니지만 접근성에 매우 유용하다. 뭐라고 작성해야할지 모를 때, 이미지가 콘텐츠의 중요한 요소가 아닐 때는 빈칸으로 작성하면 된다.
    1
    2
    3
    4
    5
    
    <pre>
     이렇게 작성하면 이미지가 화면에 뜨지 않을 때 이미지를 엑스박스로 노출하는게
    아니라 이미지가 화면에 보이지 않는다. 
    </pre>
    <img src="hello.png" alt="" />
    
  2. aria-label

    • img alt를 작성한 것과 같이 사용자의 접근성을 위해 필요한 속성
    • 대상에 접근가능한 정확한 설명이 없을 떄,DOM에 접근가능한 정보가 없을 때 사용된다.
    • 과도하게 사용하지 말것. aria-labelledby 도 같은 역할을 하는데 aria-labelledby 와 aria-label이 둘다 적용되어있다면 aria-labelledby이 우선시된다.
    • 시각적으로 화면을 확인할 수 없는 사용자가 screen reader를 사용할 때 필요한 정보를 제공한다. 시각적인 정보를 대신해 해당 콘텐츠에 관한 설명을 읽어준다.
    • screen reader 사용자들만을 위해 (aria-label을 사용해) 설명을 하기보다는 모든 사용자를 위해 설명을 작성하고 가능하다면(따로 설명이 필요하지 않게) UI를 더 직관적이게 개발하라.
    • aria-label 관련 MDN 공식문서

    • 예시 : 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>
    
This post is licensed under CC BY 4.0 by the author.

[HTML] HTML 101 DOCTYPE, title, link, meta

[리팩터링] chapter 10 조건부 로직 간소화

Comments powered by Disqus.