화면 낭독기와 ARIA 첫 규칙

ARIA의 첫 규칙은 될 수 있으면 쓰지 말라는 것입니다. button처럼 이미 그 일을 하는 HTML 요소가 있으면 div에 역할을 붙이지 말고 그 요소를 씁니다.

화면 낭독기가 읽는 것

화면 낭독기는 화면의 픽셀을 읽지 않습니다. 그 대신 브라우저가 HTML을 바탕으로 접근성 트리라는 것을 만듭니다. 접근성 트리는 페이지를 단순하게 옮긴 사본인데, 의미 있는 요소마다 역할(버튼, 링크, 제목, 체크 상자), 이름(그 요소를 알아보게 하는 글), 그리고 때로 상태(선택됨, 펼쳐짐, 비활성)가 붙어 있습니다. 화면 낭독기는 바로 이 트리를 소리 내어 읽거나, 그 내용을 점자 단말기로 보냅니다. WCAG 2.2 성공 기준 4.1.2 「이름, 역할, 값」(A 수준)은 페이지에 있는 모든 컨트롤이 이 세 가지를 빠짐없이 드러내야 한다고 요구합니다.

화면 낭독기 사용자는 페이지를 맨 위에서 맨 아래까지 다 듣는 일이 드뭅니다. 주요 운영체제에 처음부터 들어 있는 화면 낭독기와 따로 설치하는 무료 화면 낭독기는 제목, 링크, 랜드마크 목록을 불러오거나, 다음 입력 칸으로 건너뛰거나, 한 줄씩 읽어 나가는 기능을 줍니다. 앞 단원들에서 다룬 내용이 그토록 중요한 까닭이 바로 여기 있습니다. 진짜 제목, 레이블이 붙은 입력 칸, 버튼다운 버튼, 대체 텍스트가 모두 그대로 이 트리에 들어갑니다. html 요소의 lang 속성도 빼놓을 수 없을 만큼 중요합니다. 3.1.1 「페이지 언어」가 이것을 요구하고, 화면 낭독기는 이 값으로 알맞은 음성과 발음을 고릅니다.

ARIA가 더하는 것

WAI-ARIA(Accessible Rich Internet Applications)는 접근성 트리에 들어가는 내용을 바꾸는 속성 모음입니다. role은 역할을, aria-label 같은 속성은 이름을, aria-checked나 aria-expanded 같은 속성은 상태를 정합니다. ARIA가 바꾸는 것은 화면 낭독기가 안내하는 내용뿐입니다. ARIA는 요소가 초점을 받게 해 주지도 않고, 키보드 동작을 더해 주지도 않으며, 겉모습을 바꾸지도 않습니다. W3C의 ARIA 제작 안내서(APG)는 이를 아예 제목으로 적어 둡니다. 「잘못된 ARIA보다 ARIA가 없는 편이 낫다」. 잘못 쓴 ARIA는 화면 낭독기 사용자에게 페이지에 대해 사실과 다른 말을 들려줍니다.

ARIA를 쓸 때 지킬 규칙

W3C 문서 「Using ARIA」는 여러 곳에서 두루 인용되는 짧은 규칙 몇 가지를 정리해 두었습니다(2026년 2월에 중단된 초안으로 표시됐지만 규칙 자체는 그대로입니다). 규칙 1. 내게 필요한 의미와 동작이 이미 들어 있는 HTML 요소나 속성을 쓸 수 있다면, 다른 요소에 ARIA를 붙여 바꿔 쓰지 말고 그것을 씁니다. 규칙 2. 정말 꼭 필요한 경우가 아니라면 HTML 요소가 원래 가진 의미를 바꾸지 않습니다. 규칙 3. ARIA로 만든 상호작용 컨트롤은 모두 키보드로 쓸 수 있어야 합니다. 규칙 4. 초점을 받을 수 있는 요소에 role="presentation"이나 aria-hidden="true"를 주지 않습니다. 그렇게 하면 일부 사용자는 초점이 「아무것도 아닌 것」에 가 있는 상태가 됩니다.

ARIA가 정말 쓸모 있는 것은 HTML만으로는 메울 수 없는 빈틈을 채울 때입니다. 아이콘만 들어 있는 버튼에는 글자가 없으니, 그 버튼에는 이름도 없습니다. aria-label="Close"가 그 버튼에 이름을 붙여 줍니다. 보이는 글자 옆에 놓인 SVG 아이콘은 장식이므로, svg에 aria-hidden="true"를 주면 그 아이콘이 접근성 트리에서 빠집니다. 처음 배우는 사람에게 가장 자주 필요한 속성이 바로 이 두 가지입니다. 탭이나 메뉴 같은 위젯을 통째로 만들 때는 패턴을 직접 지어내지 말고 제작 안내서에 있는 그 위젯에 맞는 패턴을 따릅니다.