aria-hidden

aria-hidden 은 화면에 보이는 요소를 화면 읽어 주는 프로그램에게서 감춥니다. 눈으로 보는 사람에게는 아무것도 달라지지 않습니다. 글자 옆에 붙은 꾸밈 아이콘처럼 귀로 들으면 군더더기가 되는 것에 씁니다.

상세

먼저 화면을 못 보는 사용자에게 페이지가 어떻게 전해지는지 봅니다. 이어서 저장 버튼의 아이콘에서 시작해 알림 상자와 링크로 넓혀 가며 aria-hidden 이 무엇을 빼는지 따라갑니다. 다른 숨기는 방법과 견준 뒤에는 대화상자 뒤를 감추는 쓰임을 봅니다. 끝으로 쓰는 때와 확인하는 법을 모읍니다.

화면과 따로 가는 목록

보조 기술은 장애가 있는 사용자가 컴퓨터를 쓰도록 돕는 소프트웨어와 기기입니다. 그중 스크린 리더는 화면의 글과 요소를 소리나 점자로 읽어 줍니다. 사용자는 키보드로 요소 사이를 옮겨 다닙니다. 요소마다 「저장, 버튼」 같은 안내를 듣습니다.

스크린 리더는 화면에 그려진 그림을 보지 않습니다. 브라우저가 웹 문서를 읽어 따로 세운 요소 목록을 읽습니다. 이 목록이 접근성 트리입니다. 화면을 못 보는 사용자에게는 이 목록에 오른 것만 전해집니다.

브라우저는 웹 문서를 먼저 DOM(Document Object Model)이라는 트리 구조로 읽습니다. 태그 하나가 트리의 노드 하나가 됩니다. 접근성 트리는 이 DOM 에서 사용자에게 전할 노드만 골라 세웁니다. 그래서 목록이라 불렀지만 접근성 트리도 DOM 처럼 트리 구조입니다.

aria-hidden 은 이 고르는 단계에 끼어듭니다. 화면에 그리는 일은 건드리지 않습니다. 접근성 트리에 올릴지만 바꿉니다. 그래서 눈에 보이는 것과 귀에 들리는 것이 갈립니다.

ARIA 의 상태 하나

aria-hidden 은 ARIA(Accessible Rich Internet Applications)가 정한 속성입니다. ARIA 는 웹 페이지의 태그에 속성을 덧붙여 접근성 트리의 내용을 바꾸는 표준입니다. 웹 페이지를 쓰는 언어인 HTML(HyperText Markup Language) 태그 위에 얹습니다.

aria-hidden 은 값이 페이지 따라 바뀌는 상태 속성입니다. 메뉴를 열고 닫을 때처럼 페이지가 바뀌면 값도 따라 바꿉니다.

값은 셋입니다.

false 와 적지 않은 것은 결과가 같습니다. 쓸 일이 있는 값은 true 하나입니다. 그래서 실무에서는 aria-hidden="true" 를 줄여 「aria-hidden 을 붙인다」라고 말합니다.

꾸밈 아이콘 감추기

아이콘과 글자가 함께 든 저장 버튼부터 봅니다. <svg> 는 아이콘 그림을 그리는 태그입니다. 아무것도 안 붙이면 브라우저와 스크린 리더에 따라 아이콘이 「그림」 같은 군말로 따로 읽힐 수 있습니다.

아이콘에 aria-hidden 을 붙인 버튼입니다. 오른쪽 주석은 스크린 리더가 이 버튼을 읽는 말입니다.

<button>
  <svg aria-hidden="true">…</svg>
  저장                <!-- 저장, 버튼 -->
</button>

아이콘이 접근성 트리에서 빠져 글자만 남습니다. 스크린 리더가 요소를 부르는 말을 그 요소의 이름이라고 합니다. 이 버튼의 이름은 안에 든 글자 「저장」에서 옵니다.

글자로 그린 꾸밈도 같습니다. 「더 보기 →」의 화살표는 스크린 리더가 「오른쪽 화살표」처럼 읽곤 합니다. <span aria-hidden="true">→</span> 으로 감싸면 「더 보기」만 들립니다.

글자 없이 아이콘만 든 버튼은 다릅니다. 아이콘을 감추면 버튼의 이름이 사라집니다. 이때는 버튼에 aria-label 로 귀에 들리는 이름을 붙입니다. 아이콘은 그대로 감춥니다.

자식까지 함께 빠진다

aria-hidden 을 붙인 태그는 안에 든 태그까지 모두 접근성 트리에서 빠집니다. 상자 하나에 붙이면 그 안의 글과 버튼이 한꺼번에 사라집니다.

flowchart TD
    subgraph DOM
        A["div · aria-hidden=true · 빠짐"] --> B["p · 알림 3개 · 빠짐"]
        A --> C["button · 닫기 · 빠짐"]
        D["h2 · 받은 편지"]
    end
    subgraph 접근성트리["접근성 트리"]
        E["제목 · 받은 편지"]
    end
    D --> E

그림 위쪽이 DOM 이고 아래쪽이 접근성 트리입니다. aria-hidden 이 붙은 상자와 그 안의 글, 버튼은 아래로 내려오지 못합니다. 상자 밖의 제목만 트리에 오릅니다.

빠진 상자 안에서 자식에게 aria-hidden="false" 를 적어도 다시 드러나지 않습니다. 오른쪽 주석은 각 줄이 접근성 트리에서 어떻게 되는지입니다.

<div aria-hidden="true">
  <p>알림 3개</p>       <!-- 빠짐 -->
  <p aria-hidden="false">
    새 글                 <!-- 빠짐 -->
  </p>
</div>

부모가 감추면 자식은 되살릴 수 없습니다. 일부만 들리게 하고 싶으면 감출 태그에만 하나씩 붙여야 합니다.

포커스를 받는 요소에 붙였을 때

키보드 입력을 받을 차례가 된 요소를 포커스를 받았다고 합니다. 사용자는 Tab 키로 버튼이나 링크에 포커스를 옮깁니다. 스크린 리더는 포커스가 온 요소를 읽습니다.

aria-hidden 은 접근성 트리에서만 빼고 포커스는 막지 않습니다. 그래서 링크에 붙이면 Tab 키로는 그 링크에 닿습니다. 그런데 스크린 리더는 읽을 것이 없습니다.

<div aria-hidden="true">
  <a href="/help">도움말</a> <!-- 침묵 -->
</div>

사용자는 어딘가에 포커스가 왔다는 것만 알고 그게 무엇인지 모릅니다. Enter 키를 누르면 모르는 곳으로 넘어갑니다. 그래서 포커스를 받는 요소와 그 요소를 품은 상자에는 aria-hidden 을 붙이지 않습니다.

어쩔 수 없이 감춰야 하면 포커스도 함께 막습니다. tabindex 속성을 -1 로 적으면 Tab 키가 그 요소를 건너뜁니다. 다만 안에 든 요소마다 따로 적어야 해서 빠뜨리기 쉽습니다.

다른 숨기는 방법과 견주기

화면에서 무언가를 감추는 방법은 여럿입니다. 화면에 보이는지와 접근성 트리에 남는지와 포커스를 받는지가 방법마다 다릅니다.

표에 나오는 inert 는 HTML 의 속성입니다. 붙인 태그와 그 안을 접근성 트리에서 뺍니다. 포커스와 클릭도 막습니다.

앞의 셋은 CSS(Cascading Style Sheets)나 HTML 로 화면과 트리에서 함께 지웁니다. 아무에게도 안 보여야 할 때 씁니다.

화면에는 남기고 트리에서만 빼는 방법은 aria-hidden 과 inert 둘입니다. 둘을 가르는 것은 포커스입니다. inert 는 aria-hidden 에 앞 소절의 tabindex 처리를 더한 것과 같은 결과를 속성 하나로 냅니다.

마지막 줄은 반대 방향입니다. 눈에는 안 보이되 스크린 리더에는 전할 안내 글에 씁니다. aria-hidden 과 짝을 이뤄 쓰는 일이 많습니다. 별 넷은 그림으로 보이되 aria-hidden 으로 감춥니다. 「별 다섯 개 중 넷」은 화면 밖 글자로 둡니다.

대화상자 뒤를 감출 때

모달 대화상자는 페이지 위에 떠서 닫기 전까지 뒤를 못 쓰게 하는 창입니다. 화면으로는 뒤가 어둡게 가려져 대화상자만 보입니다. 그런데 접근성 트리에는 뒤의 요소가 그대로 남아 스크린 리더가 그쪽으로 빠져나갈 수 있습니다.

그래서 대화상자가 열리는 동안 뒤의 내용을 감춥니다. 예전에는 뒤를 감싼 상자에 aria-hidden 을 붙였습니다. 포커스는 코드로 따로 가뒀습니다. 포커스를 대화상자 안에서만 돌게 묶는 이 처리를 포커스 트랩이라고 합니다.

지금은 뒤에 inert 를 붙이면 둘이 한 번에 됩니다. HTML 의 <dialog> 태그를 모달로 열면 브라우저가 뒤를 inert 처럼 다룹니다. 직접 만든 대화상자에서만 aria-hidden 으로 감추는 처리가 남습니다.

쓰는 때와 안 쓰는 때

앞의 내용을 상황별로 모으면 아래와 같습니다. 표 마지막 줄에 나오는 대체 텍스트는 그림이 전하는 뜻을 글로 적어 스크린 리더가 읽게 하는 것입니다. <img> 태그라면 alt 속성에 적습니다.

마지막 줄이 가장 흔한 실수입니다. 차트나 상태 아이콘처럼 그것을 빼면 뜻이 사라지는 그림을 감추면, 귀로 듣는 사용자는 그 정보를 영영 못 얻습니다. 감추기 전에 「이걸 빼도 같은 정보가 남나」를 묻습니다.

감춰졌는지 확인하기

aria-hidden 은 화면을 안 바꾸니 눈으로 확인할 수 없습니다. 브라우저 개발자 도구의 접근성 패널을 열면 그 요소가 접근성 트리에서 빠졌는지 보입니다.

포커스 사고는 키보드로만 페이지를 다녀 보면 잡힙니다. Tab 키를 누를 때마다 스크린 리더가 무언가를 읽는지 들어 봅니다. 포커스가 왔는데 아무 말이 없으면 그 요소가 aria-hidden 안에 들어 있는 것입니다.

관련 항목

aria-hidden 이 속하는 상위 분류와 표준

ARIA · 접근성 · 웹 접근성 · WCAG · W3C · HTML

aria-hidden 이 바꾸는 접근성 트리의 정보

접근성 트리 · DOM · 접근 가능한 이름 · ARIA 역할 · 이름 계산

aria-hidden 과 나란히 쓰는 ARIA 속성

aria-label · aria-labelledby · aria-describedby · aria-live · aria-expanded · role

aria-hidden 대신 쓸 수 있는 숨기기 수단

inert · hidden 속성 · display 속성 · visibility 속성 · 시각적 숨김

aria-hidden 을 붙이는 요소

장식 이미지 · 아이콘 버튼 · SVG · 아이콘 폰트 · 모달 대화상자 · dialog 요소

aria-hidden 과 함께 따지는 키보드 포커스 수단

포커스 · tabindex · 포커스 트랩 · 키보드 접근성

aria-hidden 이 감춘 것을 건너뛰는 보조 기술

보조 기술 · 스크린 리더 · 점자 디스플레이 · 음성 제어

aria-hidden 이 붙었는지 살피는 도구

개발자 도구 · Playwright · Testing Library · 자동 검사