aria-label

네모에 x 표시가 있는 박스 모양의 버튼이 있고 난 이걸 누르면 창을 닫는것으로 코드를 짜놨다고 가정해보면
스크린 리더에서

x버튼

이라고 읽어준다

근데 x가 그림으로 되어있다면?

버튼

이라고만 읽어준다
그럼 시각장애인 분들은 이게 무슨 버튼이지..? 하고 생각하고
스크리 리더에 의존해야 하는 분들이기 때문에 혼란에 빠진다

그럴때 aria-label로 이게 어떤 버튼인지 알려줘야한다 예를 들면

<button class="close" aria-label="닫기"></button>

이렇게 코드를 짜면

닫기 버튼

이라고 스크린 리더에서 읽어준다
이미지가 있던 문자가 있던 아리아 레이블이 다 읽어준다

좀 더 실용적인 예제는

<a href="/" target="blank" title="새창열기">링크</a>

보다

<a href="/" target="blank" aria-hidden="새창열기">링크</a>

이렇게 하는게 더 접근성에 도움이 된다는것이다

aria-labelledby

input을 사용할때 label과 for을 연결해 주는것과 같은 원리이다

<section class="notice" aria-labelledby="title">
	<h2 class="notice__title" id="title">공지사항</h2>
</section>

내가 알려주고 싶은 대상에 id값과 전체 섹션을 연결해주면 스크린 리더에선

헤딩레벨 2 공지사항

이렇게 읽어준다 즉 시각 장애인은 본인이 공지사항 섹션에 들어왔구나를 정확히 알수있게 되는것이다