aria-label

웹 접근성을 향상시키기 위해 HTML 요소에 레이블을 제공하는 속성으로 시각적으로는 텍스트가 없거나 적절한 설명이 부족한 요소에 사용하면 유용하다.

주로 button 태그, 버튼 역할을 하는 span 태그 등

<button aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

스크린 리더는 버튼이 "Close" 기능을 한다고 읽어준다.

aria-hidden

aria-hidden 속성의 목적은 HTML 요소를 스크린 리더와 같은 보조 기술에서 숨겨 시각 장애인 사용자에게 불필요하거나 중복된 정보를 제공하지 않도록 하는 것이 목표이다.

<span aria-hidden="true">🌟</span>

위의 예제에서는 별 아이콘이 시각적으로는 표시되지만, 스크린 리더에서는 무시된다.

내가 작성한 코드

<button class="fab" data-note-create-btn aria-label="add note">
   <span class="material-symbols-outlined" aria-hidden="true"> add </span>

   <span class="text text-label-large">New note</span>

   <div class="state-layer"></div>
</button>

span 태그에서 aria-hidden="true" 를 한 이유는 button 태그에서 이미 aria-label 을 적용시켰기 때문에 스크린 리더는 aria-label 의 "add note" 를 읽어준다.