ARIA란?

hidden
notion image
 
HTML과 ARIAARIA란?기능과 외관을 바꾸나요?주요 기능은 뭔가요?ARIA 속성들HTML ↔ ARIA언제, 어떻게 쓰는 게 좋은 건가요?규칙1. ARIA를 쓰지 마라규칙2. 쓴다면 올바른 ARIA를 사용해라규칙3. 키보드 탐색은 항상 지원할 것규칙4. 포커스 가능한 요소는 숨기지 말 것규칙5. 상호작용 요소에는 접근성을 고려한 이름을 사용할 것
 

HTML과 ARIA

대부분의 개발자들은 현대 웹의 표준 마크업 언어인 하이퍼텍스트 마크업 언어(HTML)에는 익숙하다.
그러나 Accessible Rich Internet Applications(ARIA)는 잘 모른다.
 
HTML의 시멘틱 태그 뿐만 아니라, ARIA도 디지털 접근성을 높이는 데 중요한 역할을 한다.
특히 화면 낭독기(screen reader)와 같은 보조 기술(assistive technology, AT)이 페이지에 대해 이해하고 올바른 형태로 전달할 수 있게 도와준다.

ARIA란?

ARIA는 2008년에 W3C의 하위 그룹인 WAI 그룹에 의해 처음 개발됐다.
ARIA는 프로그래밍 언어가 아니라, HTML 요소의 디지털 접근성 관련된 속성(attribute)들의 집합이다.
WAI-ARIA는 장애인이 웹 콘텐츠와 웹 애플리케이션에 더 쉽게 액세스할 수 있는 방법을 정의한다.

기능과 외관을 바꾸나요?

ARIA는 요소의 기능이나 시각적 모양을 변경하지 않으며, 그저 추가정보를 제공하는 속성일 뿐이다.
따라서 ARIA 유무의 차이는 AT 사용자들만 체감할 수 있다.

주요 기능은 뭔가요?

ARIA의 세 가지 주요 기능은 역할, 속성, 상태 다.
  • 역할 : 요소의 정체나 기능을 정의한다.
      • 예) role
      <div role="button">Self-destruct</div>
  • 속성 : 객체의 특성 또는 요소간의 관계를 만든다.
      • 예) aria-describedby
      <div role="button" aria-describedby="more-info">Self-destruct</div>

<div id="more-info">This page will self-destruct in 10 seconds.</div>
  • 상태/값 : 드롭다운, 체크박스 등 동적인 인터페이스 요소에 대한 현재 상태값을 전달한다.
      • 예) aria-pressed
      <div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

<div id="more-info">
  This page will self-destruct in 10 seconds.
</div>

ARIA 속성들

위에서 언급한 세가지 외에도 AT를 지원하기 위한 다양한 속성들을 지원한다.
  • Role (역할):
    • 요소가 수행하는 기능이나 역할 정의.
    • 예: role="button", role="navigation", role="dialog" 등.
    • 스크린 리더 등에서 이 요소가 무엇인지를 이해하고 사용자가 상호작용할 수 있도록 안내하는 데 도움을 준다.
  • State (상태):
    • 요소의 상태를 나타내며, 동적인 인터페이스에서 상태 변화가 있을 때 이를 전달하는 데 사용된다.
    • 예: aria-checked, aria-expanded, aria-disabled 등.
    • 예를 들어, 체크박스가 체크되었는지, 메뉴가 펼쳐졌는지 등의 상태 정보를 AT에 전달한다.
  • Property (속성):
    • 요소의 속성을 나타내며, 역할을 좀 더 구체적으로 설명하는 데 사용된다.
    • 예: aria-label, aria-describedby, aria-labelledby 등.
    • 예를 들어, aria-label 속성은 직접적으로 화면 낭독기에게 요소에 대한 간략한 설명을 제공하고, aria-labelledby는 현재 요소를 설명하는 다른 요소와 연결지을 수 있도록 해준다.
  • Live Regions (라이브 리전):
    • 동적으로 업데이트되는 콘텐츠가 있을 때, 그 내용을 AT에 알리기 위해 사용된다.
    • 예를 들어, 실시간 알림이나 업데이트된 내용 등을 전달할 때 사용한다.
    • 예: aria-live, aria-relevant.
  • Keyboard Shortcuts (키보드 단축키):
    • 웹 페이지 내에서 특정 작업을 빠르게 수행할 수 있도록 하는 키보드 단축키를 정의한다.
    • 예: aria-keyshortcuts.
  • Alert and Notification (알림과 경고):
    • 중요한 알림이나 경고 메시지를 사용자에게 전달하는 역할을 한다.
    • 예: aria-alert, aria-atomic.
 

HTML ↔ ARIA

ARIA 속성들은 필수사항이 아니다.
목표로 하는 접근성 수준을 달성하기 위해 속성들을 추가해 나가면 된다.
ARIA를 코드베이스에 올바르게 통합하면 보조 기술(AT) 사용자가 웹사이트, 앱 또는 다른 디지털 제품을 성공적이고 공평하게 사용할 수 있도록 필요한 모든 정보를 제공할 수 있다.
 
그러던 와중 2014년, W3C가 HTML5 권장사항을 공식적으로 발표했다.
<main>, <header>, <footer>, <aside>, <nav>와 같은 랜드마크 요소 및 hidden, required와 같은 속성이 추가되는 등 큰 변화가 있었다.
이러한 시멘틱 요소들은 브라우저에서 접근성을 고려해 처리된다.
 
때문에 ARIA의 일부 기능이 덜 중요해지기도 했다. 해당 역할에 맞는 HTML 시멘틱 태그가 있을 경우 ARIA와 중복 기재하지 않고 HTML 시멘틱 태그를 사용하는 것이 권장된다.
하지만 ARIA는 여전히 HTML의 어떤 버전에도 없는 많은 역할, 상태 및 속성을 포함하고 있기 때문에, 이러한 속성들은 여전히 유용하다.
 

언제, 어떻게 쓰는 게 좋은 건가요?

WAI 그룹은 요소를 접근성 있게 만드는 방법과 관련된 ARIA의 다섯 가지 규칙을 개발했다.

규칙1. ARIA를 쓰지 마라

ARIA 속성을 추가하는 것 자체로 접근성이 좋아지진 않는다.
WebAIM Million의 연간 접근성 보고서: ARIA가 포함된 홈페이지가 평균적으로 70% 더 많은 오류가 감지되었다
이는 주로 잘못된 ARIA 속성을 사용했기 때문이다.
따라서 관련 시멘틱 HTML 태그가 있는 경우에는 ARIA 속성을 명시하지 마라.
물론 원하는 접근성을 지원하는 HTML 태그가 없을 때에는 ARIA를 사용해야 한다.
// bad (관련 시멘틱 태그가 있는데 사용하지 않고 ARIA를 명시한 경우)
<a role="button">Submit</a>

// good
<button>Submit</button>

규칙2. 쓴다면 올바른 ARIA를 사용해라

ARIA를 사용할 때는
  • 올바른 역할(role)을 부여하고,
  • 필요한 곳에만 정확하게 사용하는 것이 중요하다
// bad (헤딩 태그인데 역할은 tab이라고 명시하는 것은 괴리가 있다)
<h2 role="tab">Heading tab</h2>

// good (tab과 헤딩 부분을 명확히 나누고, role을 올바르게 지정한다)
<div role="tab">
	<h2>Heading tab</h2>
</div>

규칙3. 키보드 탐색은 항상 지원할 것

disabled 되지 않은 상호작용 요소에는 항상 키보드로 접근할 수 있어야 한다.
상호작용과 관련된 시멘틱 태그에는 기본적으로 키보드 접근성도 모두 고려되어 있다.
하지만 커스텀 정의한 요소 등 키보드 접근성이 내장되어 있지 않은 경우에는 직접 구현해야 한다.
키보드 포커스 에서 자세히 다뤘다.
 
tabindex=”0” 속성을 추가하면 기본적으로 키보드로 포커스가 되도록 만들 수 있다.
단 숫자를 “0” 이상의 값으로 넣지 않도록 주의하자. 접근 가능 요소에는 “0”을 지정하여 브라우저에 의해 자연스럽게 순서대로 처리될 수 있도록 하는 것이 바람직하다.
이후에는 fully accessible 하도록 엔터,스페이스바 등에 어떻게 처리할 건 지 등을 직접 구현해야 한다.
// bad (tabindex를 양수값을 사용하지 마라)
<span role="button" tabindex="1">Submit</span>

// good (접근성이 고려되지 않은 html 요소에 키보드 접근이 가능하도록 잘 추가함)
// 예시라서 이렇게 하였으나, 실제로는 role="button" 요소이므로 span이 아닌 button 시멘틱 태그로 전환하는 것이 더 적절함.
<span role="button" tabindex="0">Submit</span>

규칙4. 포커스 가능한 요소는 숨기지 말 것

인터랙티브 요소이거나 tabindex가 설정된 “포커스 될 필요가 있는 요소”에 role=”presentation” 또는 aria-hidden=”true” 속성을 추가하면 안된다.
이 속성이 추가되면 AT에겐 이 요소를 스킵해도 된다고 알리는 것과 같다.
사용자에게 혼란을 주거나 상호작용에 방해된다.
// bad (aria-hidden은 하위 요소들까지 다 숨겨버린다.
// 하위요소에 상호작용이 필요한 버튼이 있으므로 부적절하다.
<div aria-hidden="true">
  <button>Submit</button>
</div>

// good
<div>
  <button>Submit</button>
</div>

규칙5. 상호작용 요소에는 접근성을 고려한 이름을 사용할 것

상호작용 요소의 목적이 먼저 잘 전달되는 것이 중요하다.
어떻게 상호작용을 해야하는 지 알아야 하는 건 그 다음이다.
따라서 접근성을 고려한 이름을 갖도록 확실히 해야하고, 그래야 AT에 이 의도가 온전히 전달된다.
accessible name : AT, 특히 스크린 리더가 요소를 읽을 때 제공하는 이름.
 
  • 폼 요소: <label>을 활용
  • 버튼, 링크: 내부 텍스트 포함 또는 aria-label 사용
  • 아이콘 버튼: aria-label 필수
  • 이미지: alt 속성 제공
  • 제목이 필요한 요소: aria-labelledby 사용
 
  • label로 요소를 연결

// label을 사용하면 스크린 리더가 input 요소를 "사용자 이름, 입력 필드"로 읽음.
<label for="username">사용자 이름</label>
<input type="text" id="username">
  • aria-label 속성으로 이름을 직접 지정
// "닫기 버튼" 이라고 버튼에 이름이 부여됨.
<button aria-label="닫기">✖</button>
  • 내부 텍스트 활용
// 버튼의 텍스트 "제출하기" 자체가 접근 가능한 이름이 됨.
<button>제출하기</button>
  • aria-labeledby를 사용하여 다른 요소의 내용을 참조

// div가 "상품 정보"라는 접근 가능한 이름을 가짐.
<h2 id="section-title">상품 정보</h2>
<div aria-labelledby="section-title">
    이곳에는 상품 설명이 들어갑니다.
</div>
  • alt 속성을 사용한 이미지 설명
<img src="dog.jpg" alt="검은 털을 가진 강아지가 공원에서 뛰고 있음">
  • title 속성을 사용하여 대체 이름 제공
<abbr title="World Wide Web">WWW</abbr>
 
❌ 잘못된 예시 (Accessible Name 없음)
<button>🔍</button>
  • 스크린 리더는 "버튼"이라고만 읽으며, 어떤 기능인지 알 수 없음.
  • 해결 방법: <button aria-label="검색">🔍</button>