ARIA 접근성 가이드

역할 · 문서 구조

role="none"

요소가 가진 원래 의미(역할)를 지웁니다. 내용은 그대로 읽힙니다. presentation과 같은 뜻입니다.

중급

한눈에 보기

분류
문서 구조
대응 HTML
<img alt=""> (빈 alt 이미지가 같은 효과)
이름 정하는 방법
작성자 (author)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

role="none"은 요소의 암묵적 역할(표, 목록, 제목 등)을 접근성 트리에 노출하지 않게 합니다. 요소 안의 텍스트와 자식 요소는 그대로 노출되므로, 의미만 벗겨 내고 내용은 남기는 것입니다. ARIA 1.1에서 presentation의 동의어로 추가되었는데, “presentation”이라는 이름 때문에 aria-hidden="true"처럼 내용까지 숨긴다고 오해하는 경우가 많았기 때문입니다.

언제 쓰나

  • 레이아웃용 표: 배치를 위해 쓴 <table>이 “표 3행 2열”로 읽히지 않게 합니다.
  • 위젯 구조 안의 불필요한 의미: 탭 목록을 <ul>로 만들었을 때 <li role="none">으로 목록 의미를 지워 tablist → tab 관계가 바로 이어지게 합니다.
  • 장식 이미지: <img alt="">와 같은 효과(이 경우 빈 alt가 더 간단합니다).

필수 자식에게 상속

표의 <tr>/<td>, 목록의 <li>처럼 그 역할에 꼭 딸린 자식(필수 소유 요소)도 함께 의미를 잃습니다. 하지만 그 안의 다른 요소(링크, 제목 등)는 영향을 받지 않습니다.

무시되는 경우 (충돌 해결)

다음 경우 브라우저는 none을 무시하고 원래 역할을 유지합니다. 접근성을 해치지 않기 위한 안전장치입니다.

  • 요소가 포커스를 받을 수 있을 때(<button>, <a href>, tabindex 지정 요소 등)
  • 요소에 전역 ARIA 속성(aria-label, aria-describedby 등)이 있을 때

그래서 <button role="none">은 여전히 버튼으로 읽힙니다. 보조기술에서 아예 숨기려면 aria-hidden="true"를 씁니다.

테스터 관점

데이터 표나 실제 목록에 role="none"/"presentation"이 붙어 구조가 사라지지 않았는지, 반대로 레이아웃 표가 데이터 표로 읽히지 않는지 확인합니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

탭 목록에서 li 의미 제거

권장HTML
<ul role="tablist" aria-label="도서 정보">
  <li role="none"><button role="tab" aria-selected="true">소개</button></li>
  <li role="none"><button role="tab" aria-selected="false">목차</button></li>
</ul>

레이아웃 표

HTML
<table role="none">
  <tr><td><img src="cover.jpg" alt="작은 아씨들 표지"></td><td>작은 아씨들 / 루이자 메이 올컷</td></tr>
</table>

포커스 요소에 none (효과 없음, 비권장)

비권장HTML
<button role="none">닫기</button>
<a href="/" role="none">홈</a>

포커스 가능 요소라 none이 무시됩니다. 숨기려는 의도라면 접근성 오류입니다.

직접 해 보기

role="none"을 켜고 끄며 목록과 그 항목의 의미가 함께 사라지는 모습을 확인해 보세요.

  • 작은 아씨들
  • 어린 왕자

예상 안내:

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
role="none"인 표 읽기작은 아씨들 표지, 그래픽, 작은 아씨들 / 루이자 메이 올컷 (표 안내 없음)

사용 지침

이렇게 쓰세요

  • 레이아웃 표나 위젯 구조에서 불필요한 의미를 지울 때 씁니다.
  • 오래된 환경을 고려하면 role="none presentation"처럼 대체 값을 함께 적을 수 있습니다.

이렇게 쓰지 마세요

  • 내용을 숨기려는 목적으로 쓰지 않습니다(aria-hidden 사용).
  • 포커스 가능한 요소나 전역 ARIA 속성이 있는 요소에 쓰지 않습니다.
  • 데이터 표·실제 목록의 의미를 지우지 않습니다.
presentationgenericimgtablelist

이 역할을 쓰는 패턴

탭

참고 자료