HTML 요소와 ARIA 매핑

암묵적 역할이란

암묵적 역할(implicit role)은 role 속성을 쓰지 않아도 HTML 요소가 기본으로 가지는 역할입니다. 예를 들어 <button>은 처음부터 button 역할을 가지고, <nav>는 navigation 랜드마크입니다. 이 대응 관계는 HTML-AAM이 브라우저 기준으로, ARIA in HTML이 작성자 기준으로 정합니다.

<nav role="navigation">
  <ul role="list">
    <li role="listitem"><a href="/" role="link">홈</a></li>
  </ul>
</nav>

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

일부 요소는 문맥에 따라 역할이 달라집니다. <header>와 <footer>는 페이지 전체에 속할 때만 banner, contentinfo 랜드마크가 되고, <article>이나 <section> 안에 있으면 generic이 됩니다. <section>은 이름(aria-label, aria-labelledby)이 있을 때만 region 랜드마크가 됩니다.

주요 요소의 암묵적 역할 표

아래 표는 ARIA in HTML 명세를 요약한 것입니다. “모든 역할”은 어떤 역할이든 지정할 수 있다는 뜻이고, “역할 지정 불가”는 role 속성을 쓰면 안 된다는 뜻입니다. “없음”은 대응하는 ARIA 역할이 없다는 뜻으로, 브라우저가 플랫폼 고유 역할로 노출하거나 노출하지 않습니다.

허용되는 역할과 금지되는 역할

ARIA in HTML은 요소마다 지정할 수 있는 역할을 제한합니다. 원래 의미와 동작이 너무 다른 역할로 바꾸면 사용자 기대와 실제 동작이 어긋나기 때문입니다.

<button role="heading">공지사항</button>
<input type="checkbox" role="button">
<main role="navigation">…</main>
<label role="button">파일 선택</label>

<button role="tab" aria-selected="true">공지사항</button>
<input type="checkbox" role="switch">
<nav aria-label="주 메뉴">…</nav>
<button type="button">파일 선택</button>

• <main>, <label>, <input type="number">, <textarea>, <select multiple>, <progress>처럼 역할을 지정할 수 없는 요소가 있습니다.
• <input type="checkbox">에는 switch, menuitemcheckbox, option처럼 의미가 가까운 역할만 허용됩니다.
• <img alt="">는 장식 이미지로 간주되어 none / presentation 외의 역할을 쓸 수 없습니다.

중복 지정 금지

ARIA in HTML은 작성자가 암묵적 의미와 같은 role이나 aria-* 값을 다시 지정하지 말라고 권고합니다. 명세 예시는 <button role="button">을 “피해야 할 코드”로 듭니다. 중복 지정은 동작상 큰 문제는 없지만 코드를 읽기 어렵게 하고, 요소를 바꿀 때 잘못된 역할이 남는 원인이 됩니다.

<button role="button">저장</button>
<h2 role="heading" aria-level="2">공지</h2>
<input type="text" aria-required="true" required>
<main role="main">…</main>

<button>저장</button>
<h2>공지</h2>
<input type="text" required>
<main>…</main>

네이티브 속성과 ARIA 속성의 충돌

HTML에 이미 같은 기능의 속성이 있으면 네이티브 속성을 씁니다. 두 가지를 함께 쓰면서 값이 다르면 보조기술이 엇갈린 정보를 받습니다. ARIA in HTML은 <input type="checkbox">에 aria-checked를 쓰는 것을 금지합니다.

<input type="checkbox" checked aria-checked="false">
<button disabled aria-disabled="false">전송</button>
<input type="text" required aria-required="false">

<input type="checkbox" checked>
<button disabled>전송</button>
<input type="text" required>

이름을 붙일 수 없는 요소

generic 역할로 노출되는 <div>, <span>처럼 이름이 금지된(naming prohibited) 요소에는 aria-label과 aria-labelledby를 쓰면 안 됩니다. 브라우저·화면낭독기에 따라 무시되거나 일관되지 않게 읽힙니다. paragraph, code, strong, emphasis, presentation, none 등도 이름이 금지된 역할입니다.

<div aria-label="공지 영역">…</div>
<span aria-label="필수">*</span>

<section aria-label="공지">…</section>
<span aria-hidden="true">*</span><span class="sr-only">필수</span>

매핑 확인 방법

• 브라우저 개발자 도구 접근성 패널에서 계산된 역할을 확인합니다(접근성 트리 보기).
• Nu HTML Checker는 ARIA in HTML 규칙 위반(허용되지 않는 역할, 중복 역할)을 경고합니다.
• axe 같은 자동 검사 도구로 aria-allowed-role, aria-prohibited-attr 규칙 위반을 찾을 수 있습니다(검사 도구).