ARIA는 무엇을 약속하는 걸까?

ARIA Authoring Practices Guide

APG는 ARIA Authoring Practices Guide의 약자로, W3C가 만든 접근성 구현 가이드 문서입니다.

ARIA 속성을 "어떻게 써야 하는지"를 컴포넌트별로 설명합니다. 표준 명세가 아니라 권고 문서이고, role, 키보드 동작, 포커스 규칙을 예제 코드와 함께 보여 줍니다.

Unlike HTML input elements, ARIA roles do not cause browsers to provide keyboard behaviors or styling.

ARIA role은 보조기술에 알려 줄 뿐, 키보드 동작은 만들어 주지 않는다는 뜻입니다. 따라서 그 동작은 직접 JavaScript로 만들어야 합니다. 그래서 ARIA는 속성을 붙이는 일보다 약속을 지키는 일에 가깝습니다.

1. 같은 이름의 nav가 둘이면 어떻게 될까? (Landmark Regions)

Landmark Regions는 페이지를 구역으로 나누고 각 구역에 이름을 붙이는 방법을 다룹니다. 여기서 landmark란 내비게이션, 본문, 검색처럼 페이지의 큰 구역을 보조기술에 알려 주는 표식을 말합니다. 스크린 리더 사용자는 이 표식 목록으로 구역 사이를 바로 건너뜁니다.

HTML Element가 이미 표식 역할을 합니다. nav는 navigation, main은 main, aside는 complementary가 됩니다. 문제는 같은 종류의 표식이 둘 이상일 때입니다. 이 경우 APG는 각각에 서로 다른 이름을 붙이라고 합니다.

내용과 목적이 같은 두 구역은 같은 이름을 써도 된다는 예외도 적혀 있습니다. APG가 드는 예가 같은 검색 결과를 위아래에 두 번 놓은 pagination입니다. 이름을 지을 때 지킬 규칙도 하나 있습니다.

Do not use the landmark role as part of the label.

이름에 역할을 또 적지 말라는 뜻입니다. 이름을 "Site Navigation"으로 지으면 스크린 리더가 역할까지 붙여 "Site Navigation Navigation"처럼 읽기 때문에, 그냥 "Site"라고 지으라는 것이 APG의 예입니다.

fix(a11y): unique names for repeated nav landmarks by AKnassa · Pull Request #4692 · facebook/astryx

2. 내 눈에는 보이는데, 그걸 보조기술은 읽고 있을까? (Names and Descriptions)

이 글은 Element의 이름과 설명을 다룹니다. 이름은 한두 단어의 짧은 라벨이고, 포커스를 받는 모든 Element에 필요합니다. 설명은 선택 사항이고 더 깁니다.

descriptions are optional strings that are usually significantly longer than names