[HTML] WAI-ARIA

 

 

- 옮기기전에 있던 블로그에서 가져오고 싶은 글들을 조금씩 옮겨야겠다.

- 배울 때 새롭게 배우면서 웹접근성에 대해 확 이해할 수 있었던 부분!

 

 

wai-aria (Web Accessibility Initiative Accessible Rich Internet Applications)

w3c가 출판한 기술로, 인터넷을 사용하는 사람들이 쉽게 접근할 수 있게 도와주는 장치로 스크린리더를 사용하는 유저들의 접근성을 높인다.

예를들어

<div class="breadcrumb">
        <a href="https://github.com/rohjs" aria-label="Go to rohjs profile page">
                rohjs</a>
        <a href="https://github.com/rohjs/bugless-101" aria-label="Go to bugless-101
              page">bugless-101</a>
    </div>

    <div class="pagination">
        <a href="#" aria-label="Go to previous page" class="disabled">previous</a>
        <ol>
            <li class="current-page"><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="#" aria-label="Go to page 4">4</a</li>
            <li><a href="#" aria-label="Go to page 5">5</a</li>
            <li><button type="button" disabled>...</button></li>
            <li><a href="#" aria-label="Go to page 6">6</a</li>
            <li><a href="#" aria-label="Go to page 7">7</a</li>
            <li><a href="#" aria-label="Go to page 8">8</a</li>
            <li><a href="#" aria-label="Go to page 9">9</a</li>
        </ol>
        <a href="#" aria-label="Go to next page">next</a>
    </div>

• 무작정 이전,다음 이라는 단어와 숫자만 마크업했을때 스크린리더를 사용하는 유저들을 위해 aria-label을 사용해서 지금 어느 페이지인지 어떤페이지로 갈 수 있는지 알 수 있다.
• aria- hidden ="true" 일 경우 스크린리더에 읽힐 만큼 중요하지 않아서 그러지 않길 원하면 span 같은 태그에 넣어주면 된다.

 

내가 수업들으면서 이렇게 aria-label을 사용해야하는거구나 하고 이해할 수 있었던것!

<dl> 

   <dt>coke-Light - 0.3<span aria-label="litter">L</span></dt> 

   <dd>&dollar;1.50</dd> 

</dl>

 

 

참고📌

김버그의 HTML은 재밌다