웹 접근성을 위한 role과 aria-label의 차이점과 활용법

최근에 진행 중인 신규 프로젝트에서 웹 접근성을 고려하여 개발을 진행하였다. 하지만 웹 접근성 가운데 고려할 수 있는 스크린 리더를 위한 처리는 자세히 알지 못하였기에 스크린 리더를 고려할 수 있는 role과 aira-label 속성에 대해서 고민하게 되었고 role과 aria-label에 차이점과 활용법을 알아보려고 한다. 

 

role , aria-label?

속성	역할	주요 용도
role	요소의 역할(목적)을 지정	스크린리더가 요소를 어떻게 해석할 지 결정
aira-label	사용자에게 제공할 설명을 추가	의미 없는 아이콘이나 비표시 텍스트에 설명 부여

 

핵심 차이점

• role은 요소의 기능을 정의한다.
• aria-label은 사용자가 들을 수 있는 설명을 추가한다

role 속성의 활용법

role 속성은 특정 HTML요소가 어떤 역할을 하는지 정의하는 데 사용된다.

스크린리더는 role 값을 참고해서 사용자가 요소를 이해할 수 있도록 도와준다.

 

role 사용 예제

<!-- div 요소를 버튼처럼 사용할 때 -->
<div role="button" tabindex="0">클릭하세요</div>

<!-- 사용자에게 경고 메시지를 알릴 때 -->
<div role="alert">이메일 형식이 올바르지 않습니다.</div>

<!-- 네비게이션 메뉴 -->
<nav role="menu">
  <ul>
    <li role="menuitem">홈</li>
    <li role="menuitem">서비스</li>
    <li role="menuitem">연락처</li>
  </ul>
</nav>

 

HTML 자체적으로 의미를 가진 요소에는 role을 추가하지 않아도 된다.

버튼을 의미하는 <button>에는 기본적으로 역할이 있으므로 role="button"을 추가하지 않아도 된다.

aira-label 속성의 활용법

aria-label은 화면에 보이지 않는 설명을 추가할 때 사용한다.

텍스트가 없는 버튼, 아이콘, 링크 등에 사용할 수 있다.

 

aria-label 사용 예제

<!-- 아이콘 버튼에 설명 추가 -->
<button aria-label="메뉴 열기">
  <svg width="24" height="24">...</svg>
</button>

<!-- 링크의 목적을 설명 -->
<a href="#" aria-label="홈 페이지 이동">
  <img src="home-icon.png" alt="">
</a>

 

중요한 점은 aria-label은 요소의 의미를 사용자에게 전달하지만 화면에는 표시가 되지 않는다는 점이다.

기존의 alt 속성과 중복되지 않도록 주의해야 한다.

 

텍스트가 있는 경우 aria-labelledby 대신 사용

<h2 id="modal-title">회원 가입</h2>
<div role="dialog" aria-labelledby="modal-title">
  <p>이름과 이메일을 입력하세요.</p>
</div>

 

aria-labelledby="modal-title"의 의미는 이미 존재하는 h2의 내용을 참조하라는 의미이다.

 

role, arai-label!

요약

속성	설명	사용 예제
role	HTML 요소의 역할을 정의	<div role = "button">
aria-label	스크린리더 전용 라벨 추가	<button aria-label="닫기">
aria-labelledby	특정 ID를 참조하여 설명 추가	<div aria-labelledby="modal-title">

 

사용법

• HTML 태그가 자체적 역할을 제공하는 경우에는 role을 추가하지 않는다.
• 아이콘 버튼처럼 텍스트가 없는 요소에는 aria-label을 사용한다.
• 이미 있는 텍스트를 참조할 수 있다면 aria-labelledby를 사용이 권장된다.

그 외 aria 속성을 요약하자면 아래와 같다.

유형	속성 예시	설명
상태	aria-expanded, aria-checked, aria-disabled	요소의 현재 상태 지정
속성	aria-label, aria-labelledby, aria-describedby	요소의 설명 제공
관계	aria-controls, aria-owns, aria-flowto	요소 간의 관계 정의
라이브 영역	aria-live, aria-relevant, aria-atomic	실시간 업데이트 지원

 

사용 용도

 

• 폼 요소 라벨 지정 → aria-label, aria-labelledby
• 버튼, 드롭다운 상태 반영 → aria-expanded, aria-pressed
• 실시간 업데이트 반영 → aria-live
• 관련 요소 연결 → aria-controls, aria-describedby

웹 접근성을 개선할 수 있는 방법에 대해서 알아보았는데 이 방법 말고도 다양한 방법이 많다고 분석을 진행하면서 알게 되었다. 나중에 기회가 된다면 웹 접근성 개선에 대해서 추가로 알아보면 좋을 것 같다.