aria-label과 role 속성 - 웹 접근성을 위한 필수 개념

웹 접근성(Web Accessibility)은 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 만드는 중요한 요소입니다.

특히 시각장애인 등 보조기술을 사용하는 사용자에게는 **스크린 리더(Screen Reader)**의 도움으로 콘텐츠를 이해하게 되는데, 이때 꼭 필요한 속성이 바로 aria-label과 role입니다.

스크린 리더는 시각장애인 등 화면을 보기 어려운 사용자가 웹 콘텐츠를 소리로 듣거나 점자로 읽을 수 있도록 도와주는 보조 기술

---

aria-label이란?

aria-label은 요소에 **스크린 리더용 이름(label)**을 부여하는 속성입니다. 사용자가 콘텐츠를 직접 볼 수 없더라도, 스크린 리더는 이 텍스트를 읽어줍니다.

사용 예시

<button aria-label="검색 열기">
  🔍
</button>

설명: 버튼 안에 아이콘만 있는 경우, aria-label을 사용해서 의미를 전달할 수 있어요. 이 버튼은 스크린 리더에게 "검색 열기"라고 읽히게 됩니다.

---

role이란?

role 속성은 요소의 **역할(role)**을 명시적으로 지정해주는 속성입니다. 예를 들어, 어떤 <div>가 실제로는 버튼 역할을 한다면 role="button"을 지정해줘야 스크린 리더가 올바르게 인식합니다.

사용 예시

<div role="button" tabindex="0" onclick="doSomething()">
  더 보기
</div>

설명: 시맨틱 태그가 아닌 일반 요소를 쓸 경우, role을 통해 사용자에게 정확한 의미를 전달할 수 있습니다.

시맨틱 태그는 HTML에서 의미를 가지는 태그 단순히 모양이 아니라, 어떤 역할을 하는지를 명확하게 알려주는 태그\
ex : header, footer, nav, button

---

잘못된 사용 예시

<a href="/home" role="listitem">홈</a> <!-- ❌ 부적절한 role -->

<a> 태그는 기본적으로 링크 역할이 있기 때문에 role="listitem"을 부여하면 호환되지 않는 ARIA 역할 경고가 발생할 수 있습니다.
listitem은 <li> 요소에 자연스럽게 부여되는 역할이므로, 아래처럼 작성하는 것이 올바릅니다:

<ul>
  <li>
    <a href="/home">홈</a>
  </li>
</ul>