Post

ARIA

Posted
By
5 min read
ARIA

물론입니다! ARIA(Accessible Rich Internet Applications)는 웹 접근성을 높이기 위해 W3C에서 개발한 기술 사양으로, HTML이 기본적으로 제공하지 못하는 접근성 정보를 보조 기술(예: 스크린 리더)에 전달하는 데 사용됩니다. 특히 동적 콘텐츠나 복잡한 인터페이스에서 유용합니다. 아래에서 ARIA의 주요 개념과 사용법을 설명하겠습니다.

ARIA의 기본 개념

ARIA는 세 가지 주요 속성으로 구성됩니다:

  1. 역할(Role): 요소가 어떤 기능을 하는지 정의합니다(예: 버튼, 내비게이션).
  2. 속성(Properties): 요소의 특성을 설명합니다(예: 이름, 설명).
  3. 상태(States): 요소의 현재 상태를 나타냅니다(예: 체크됨, 확장됨).

ARIA는 HTML 시멘틱 태그를 보완하며, 시멘틱 태그가 충분히 의미를 전달할 때는 사용할 필요가 없습니다. 예를 들어, <button> 태그는 이미 “버튼” 역할을 내포하므로 추가 ARIA가 필요 없지만, 커스텀 버튼(예: <div>로 만든 버튼)에는 ARIA가 필요합니다.

주요 ARIA 속성 및 사용법

  1. role
    • 요소의 역할을 정의합니다.
    • 예시:
      1

      <div role="button" tabindex="0">클릭하세요</div>
      • <div>에 버튼 역할을 부여. tabindex는 키보드 포커스를 가능하게 함.
  2. aria-label
    • 요소에 접근 가능한 이름을 제공합니다(화면에 보이지 않는 텍스트).
    • 예시:
      1

      <button aria-label="메뉴 닫기">X</button>
      • “X”만 보이지만 스크린 리더는 “메뉴 닫기”를 읽음.
  3. aria-labelledby
    • 다른 요소의 ID를 참조해 이름을 지정합니다.
    • 예시:
      1
2

      <h2 id="title">제목</h2>
<div role="region" aria-labelledby="title">내용</div>
      • <div>의 이름이 “제목”으로 연결됨.
  4. aria-describedby
    • 요소에 대한 추가 설명을 제공합니다.
    • 예시:
      1
2

      <input type="text" aria-describedby="hint">
<p id="hint">이름을 입력하세요.</p>
      • 입력 필드에 “이름을 입력하세요”라는 설명 연결.
  5. aria-hidden
    • 요소를 보조 기술에서 숨깁니다(시각적으로는 보임).
    • 예시:
      1

      <span aria-hidden="true">장식용 텍스트</span>
      • 스크린 리더가 읽지 않음.
  6. aria-expanded
    • 확장 가능한 요소의 열림/닫힘 상태를 나타냅니다.
    • 예시:
      1
2

      <button aria-expanded="false" aria-controls="menu">메뉴 열기</button>
<div id="menu" style="display: none;">메뉴 내용</div>
      • 버튼 클릭 시 aria-expanded="true"로 변경.
  7. aria-live
    • 동적으로 업데이트되는 콘텐츠를 보조 기술에 알립니다.
    • 값: polite(중요하지 않음), assertive(즉시 알림).
    • 예시:
      1

      <div aria-live="polite">업데이트된 메시지</div>
      • 콘텐츠 변경 시 스크린 리더가 읽음.

ARIA 사용 시 주의점

  • 불필요한 사용 피하기: 시멘틱 HTML(예: <button>, <nav>)이 충분하면 ARIA를 추가하지 마세요. 중복은 혼란을 줄 수 있습니다.
  • 키보드 접근성 보장: role="button" 등을 사용할 경우 tabindex와 이벤트 핸들러를 추가해 키보드로 조작 가능하게 해야 합니다.
  • 테스트: 스크린 리더(NVDA, VoiceOver 등)로 실제 동작을 확인하세요.
  • 유효성 검사: ARIA 속성이 올바른지 W3C Validator나 접근성 도구(Lighthouse 등)를 활용하세요.

실제 예시

다음은 햄버거 메뉴 버튼에 ARIA를 적용한 예입니다:

1
2
3
4
5
6
7
8
9

<button aria-label="메인 메뉴" aria-expanded="false" aria-controls="nav">
  <span>☰</span>
</button>
<nav id="nav" hidden>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
  </ul>
</nav>
  • 버튼 클릭 시 aria-expanded="true"로 변경되고, <nav>의 hidden 속성이 제거되며 메뉴가 열립니다.

ARIA는 웹 접근성을 크게 개선할 수 있는 강력한 도구입니다. 추가 질문이나 특정 사례에 대해 더 알고 싶으면 말씀해 주세요!

ARIA 웹접근성
This post is licensed under CC BY 4.0 by the author.