역할 · 문서 구조
role="presentation"
요소의 원래 의미(역할)를 지웁니다. 내용은 그대로 읽힙니다. none과 같은 뜻이며 지원 범위가 더 넓습니다.
중급
한눈에 보기
- 분류
- 문서 구조
- 대응 HTML
<img alt="">(빈 alt 이미지의 암묵적 역할)- 이름 정하는 방법
- 금지 (prohibited)
- 이름 필수
- 아니요
- 필수 상위 요소
- 없음
- 필수 하위 요소
- 없음
설명
presentation은 요소가 화면 모양을 위해서만 쓰였을 때 그 요소의 암묵적 의미를 접근성 트리에서 제거합니다. none과 완전히 같은 동작이며, 명세는 none을 지원하지 않는 오래된 환경을 위해 role="presentation"을 단독으로 쓰거나 role="none presentation"처럼 대체 값으로 함께 쓰라고 안내합니다. 현재 주요 브라우저는 두 값을 모두 지원합니다.
presentation ≠ aria-hidden
| 구분 | role="presentation" | aria-hidden="true" |
|---|---|---|
| 요소의 역할 | 제거 | 제거 |
| 안의 텍스트·자식 | 그대로 노출 | 모두 숨김 |
| 포커스 가능 요소에 | 무시됨(원래 역할 유지) | 쓰면 안 됨(오류) |
대표 용도
- 장식 이미지:
<img alt="">는 자동으로 presentation이 됩니다. - 레이아웃용
<table>: 표 안내 없이 내용만 읽히게 합니다. 안의<tr>,<td>도 함께 의미를 잃습니다. role="img"안에서 이미 이름을 받은 하위 이미지- CSS용 추가 마크업
무시되는 경우
포커스를 받을 수 있는 요소, 그리고 aria-describedby 같은 전역 ARIA 속성이 있는 요소에서는 브라우저가 presentation을 무시합니다. 이름 속성(aria-label, aria-labelledby)은 presentation에 금지되어 있습니다.
테스터 관점
role="presentation"을 내용을 숨기는 용도로 오해해 쓴 코드가 흔합니다. 숨겨야 할 내용이 그대로 읽히는지, 또는 의미가 필요한 데이터 표·목록에 붙어 있는지 확인합니다.
함께 쓰는 속성
전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.
사용 예
레이아웃 표
<table role="presentation">
<tr>
<td><img src="cover.jpg" alt="어린 왕자 표지"></td>
<td>어린 왕자 / 생텍쥐페리</td>
</tr>
</table>구형 환경 대비 대체 값
<li role="none presentation">…</li>내용 숨기기 용도 (비권장)
<div role="presentation">화면낭독기에서 숨기고 싶은 안내</div>텍스트는 그대로 읽힙니다. 숨기려면 aria-hidden="true"를 씁니다.
직접 해 보기
레이아웃 표에 role="presentation"을 켜고 끄며 예상 안내를 비교해 보세요.
| 표지 없음 | 어린 왕자 / 생텍쥐페리 |
예상 안내:
실시간 코드 — 조작하면 속성 값이 바뀌는 모습을 볼 수 있습니다
화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| presentation 표 읽기 | 어린 왕자 표지, 그래픽, 어린 왕자 / 생텍쥐페리 |
사용 지침
이렇게 쓰세요
- 레이아웃 표, 장식 요소의 의미를 지울 때 씁니다.
- 이미지 장식은
alt=""로 처리합니다.
이렇게 쓰지 마세요
- 내용을 숨기려고 쓰지 않습니다.
- 포커스 가능한 요소에 쓰지 않습니다.
aria-label과 함께 쓰지 않습니다.
관련 역할·패턴
이 역할을 쓰는 패턴