부끄럽지만, 이제껏 나는 aria-label에 지정해 준 내용과 텍스트 콘텐츠를 함께 읽어내는 것으로 생각했었다. 어떤 경우에는 텍스트 콘텐츠가 생략되기도 한다는 사실을 이번에 알게 되었는데 그 내용을 정리해보려고 한다.

aria-label이란?

aria-label 속성은 현재 요소에 대한 문자열 값을 지정한다. 이 속성은 요소의 접근성을 높이기 위해 사용되며, 주로 시각적 텍스트 레이블이 없는 요소에 대해 스크린 리더 사용자에게 해당 요소의 목적이나 기능을 설명하는 데 유용하다.

1.aria-label이 텍스트를 대체하는 요소들

다음 요소들에 aria-label을 적용하면, 스크린 리더는 원래의 텍스트 콘텐츠를 무시하고 aria-label의 내용만 읽는다.

1.1 사용자와 상호작용하는 요소들

이 요소들을 사용자의 입력을 받거나 사용자가 클릭, 선택할 수 있는 요소들이다.

• <a> : 링크

• <button> : 버튼

• <input> : 입력 필드

• <select> : 선택 메뉴

• <textarea> : 여러 줄 입력 영역

1.2 페이지 구조를 나타내는 요소들

이 요소들은 웹 페이지의 주요 영역을 표시하는 데 사용된다.

• <header> : 페이지 또는 섹션의 헤더

• <nav> : 네비게이션 메뉴

• <main> : 페이지의 주요 내용

• <footer> : 페이지 또는 섹션의 푸터

• <aside> : 부가 정보 영역

• <section> : 페이지의 일반적인 섹션

1.3 특수 목적을 가진 요소들

이 요소들은 특정한 기능이나 정보를 제공한다.

• <form> : 양식 - 사용자로부터 데이터를 수집하기 위한 대화형 컨트롤를 포함하는 문서 섹션

• <fieldset> : 관련 입력 필드 그룹 - 웹 양식의 여러 컨트롤과 레이블을 그룹화

• <legend> : fieldset의 제목 - fieldset 요소의 내용에 대한 설명을 제공

• <iframe> : 내장 프레임 - 현재 HTML 문서 안에 다른 문서를 삽입

• <img> : 이미지

<button aria-label="이 리뷰 삭제하기">삭제하기</button>

이 경우, 스크린 리더는 “이 리뷰 삭제하기”만 읽고 “삭제하기”는 읽지 않는다.

2. aria-label과 텍스트 콘텐츠를 모두 읽는 요소들

반면, 콘텐츠를 담는 비대화형 요소들의 경우에는 aria-label이 있어도 텍스트 콘텐츠와 함께 읽힌다.

2.1 제목 태그들

• <h1> ~ <h6>

2.2 텍스트 관련 요소들

• <p> : 문단

• <span> (role이 없을 때)

• <div> (role이 없을 때)

2.3 리스트 관련

• <li> : 목록의 항목

• <dt> : 설명 목록에서 용어를 나타냄

• <dd> : 설명 목록에서 용어에 대한 설명을 나타냄

<h2 aria-label="중요 공지:">새로운 기능 안내</h2>

이 경우, 스크린 리더는 “중요 공지: 새로운 기능 안내”라고 읽는다.

3.주의해야 할 점

3.1 상호작용 요소와 비상호작용 요소

• 상호작용 요소(<button>, <a>, <input> 등)에서는 aria-label이 텍스트 콘텐츠를 대체한다.

• 비상호작용 요소(<h1>~<h6>, <p> 등)에서는 aria-label과 텍스트 콘텐츠가 함께 읽힌다. 따라서 용도에 맞게 적절히 선택해야 한다:

  • 텍스트를 완전히 대체하고 싶다면 상호작용 요소를 사용
  • 추가 설명이 필요하다면 비상호작용 요소를 사용

3.2 aria-label이 지원되지 않는 역할

• 다음 역할을 가진 요소들은 aria-label을 지원하지 않는다.
  (code, caption, deletion, emphasis, generic, insertion, mark, paragraph, presentation/none, strong, subscript, superscript, suggestion, term, time)

3.3 aria-labelledby와의 관계

• aria-labelledby가 함께 사용된 경우, aria-labelledby가 aria-label보다 우선순위가 높다.

3.4 특정 요소의 주의사항

• <div>와 <span>은 기본적으로 aria-label을 지원하지 않지만, 특정 role이 부여되면 동작이 달라질 수 있다.

• <a>태그는 일부 브라우저에서 href속성이 없으면 aria-label을 인식하지 않을 수 있다.

• <img>태그는 alt 속성이 없을 때만 aria-label이 적용된다.

3.5 기타 주의사항

• aria-label은 항상 간결하고 명확해야 한다.
  긴 설명이 필요한 경우에는 aria-describedby를 사용하는 것이 좋다.

• 번역이 필요한 다국어 지원 웹사이트의 경우, aria-label값도 번역 대상에 포함시켜야 한다.

• 브라우저와 스크린 리더의 구현에 따라 동작이 약간 다를 수 있기 때문에 가능하다면 실제 스크린 리더로 테스트해보는 것이 중요하다.

관련 내용을 찾아가면서 정리하는게 쉽지 않았다.

그렇지만, aria-label을 올바르게 사용하지 않으면 오히려 사용자 경험을 해칠 수 있기 때문에 어렵더라도 꾸준히 공부하면서 신중하게 작업해야겠다는 생각이 들었다.

접근성에 대한 숙련도를 높여 누구나 편리하게 이용할 수 있는 웹 사이트를 만들 수 있도록 계속해서 노력해야겠다.