[HTML] WAI-ARIA | 스크린리더 | aria-label

𝙿𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚒𝚗𝚐 𝙻𝚊𝚗𝚐𝚞𝚊𝚐𝚎/𝙷𝚃𝙼𝙻

[HTML] WAI-ARIA | 스크린리더 | aria-label | aria-hidden

해버니 2023. 12. 29. 09:24

WAI-ARIA란?

Web Accessibility Initiative’s Accessible Rich Internet Applications

스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지, 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술이다.

버튼, 링크, 드롭다운 메뉴 등의 요소에 WAI-ARIA 속성을 추가하여, 스크린리더가 해당 요소를 정확하게 인식하고, 사용자에게 적절한 정보를 제공할 수 있다.

스크린 리더란 : 브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면을 낭독해주는 소프트웨어이다.

aria-label

태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다.

현재 요소의 기능 및 목적을 적어놓는 것이다.

<strong aria-label="오늘의 책 선정">오늘의 책</strong>

이렇게 aria-label을 작성해줌으로써 내용을 명확하게 알려줄 수 있다.

aria-hidden="true"

<strong aira-label="평점 9.4">
	<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>

스크린 리더로 읽을 때, 별표를 하나 하나 다 읽어주는 것이 아니라, 평점 9.4만 읽어주기를 원할 때 사용하는 것이 aria-hidden이다.

필요한 정보만 읽어줄 수 있다.

예제 : 영수증

<body>

    <h1>Bill sharing request <span>from Kimbug</span></h1>

    <div class="receipt">

        <h2>McDonald's</h2>
        <strong class="barcode">
            <img src="./assets/barcode.svg" alt="Barcode">
        </strong>


        <span aria-label="Issue on June 24th, 20xx">24.06.20xx</span>

        <div>
            <dl>
                <div>
                    <dt>Coke light - 0.3<span aria-label="litter">L</span></dt>
                    <dd>&dollar;1.50</dd>
                </div>

                <div>
                    <dt>Heineken Beer - 0.5<span aria-label="litter">L</span></dt>
                    <dd>&dollar;3.25</dd>
                </div>

                <div>
                    <dt>Chicken McNuggets</dt>
                    <dd>&dollar;21.00</dd>
                </div>
            </dl>

            <dl>
                <dt>In total</dt>
                <dd><strong>&dollar;25.75</strong></dd>

            </dl>
        </div>
    </div>

</body>

aria-label을 보자.

L을 보면 무슨 의미인지 모르니까 aria-label에 litter라고 명시해줬다.

그리고 영주증 발행 날짜에도 Issue on June 24th, 20xx 라고 적어줬다.

(Issue on : 영수증을 발행하다라는 뜻)

class="sr-only"

<table>
        <thead class="sr-only">
            <tr>
                <th scope="col">Actions</th>
                <th scope="col">Sender</th>
                <th scope="col">Title</th>
                <th scope="col">Time</th>
            </tr>
        </thead>
</table>

screen reader only를 줄여서 sr-only로 널리 쓰이고 있다.

class="sr-only"는 스크린 리더에서만 보이고, 일반 사용자에게는 보이지 않는 요소를 만들기 위해 자주 사용된다.

이를 통해, 스크린 리더 사용자들이 웹 페이지의 정보를 더욱 쉽게 이해하고, 접근할 수 있다.

css 속성으로는 visibility : hidden;을 준다.