ARIA

스크린 리더는 화면에 있는 것을 소리로 읽어 주는 프로그램입니다. 무엇을 어떻게 읽을지는 화면을 이루는 태그를 보고 정합니다. 버튼용 태그로 만들어진 것은 "확인, 버튼" 으로 읽고, 제목용 태그로 만들어진 것은 제목이라고 알려 주며, 사용자가 제목만 건너뛰며 듣는 것도 이 정보가 있어서 가능합니다.

웹이 문서에서 화면으로 옮겨 가면서 이 전제가 흔들렸습니다. 탭, 아코디언, 자동완성 입력칸, 직접 만든 드롭다운처럼 종이 문서에는 없던 부품이 화면을 채우기 시작했는데, 이런 부품에는 대응하는 태그가 아예 없습니다. 개발자는 별수 없이 아무 뜻도 없는 상자 태그를 쌓아 모양과 동작을 직접 만들었습니다.

눈으로 보는 사람에게는 완성된 탭이지만 스크린 리더에는 상자 세 개일 뿐입니다. 지금 어느 탭이 선택돼 있는지는 밑줄과 색으로만 표시돼 있으니 소리로는 전달되지 않고, 화살표 키로 옮겨 다닐 수 있다는 사실도 알 방법이 없습니다. 아이콘만 있는 버튼이 늘어선 도구 모음은 "버튼, 버튼, 버튼" 으로 읽힙니다.

ARIA 는 이 간극을 메우려고 웹 표준 단체가 낸 규격입니다. 태그를 새로 만드는 대신, 이미 있는 요소에 역할과 상태를 적어 두는 속성을 더합니다. 상자는 그대로 상자이되 그 상자에 "이건 탭이고 지금 선택돼 있다" 는 쪽지를 붙여 두는 셈입니다. 눈으로 보는 화면은 하나도 달라지지 않고, 보조 기술에만 그 쪽지가 전달됩니다.

네 가지 일을 합니다.

1. 역할을 알립니다. 상자로 만든 부품에 역할 속성을 달면 스크린 리더가 그것을 탭 목록이나 대화상자로 읽습니다. 사용자는 그제야 이 자리에서 화살표 키가 통한다는 것을 압니다.
2. 상태를 알립니다. 접힌 목록이 지금 펼쳐져 있는지, 체크박스 모양이 지금 켜져 있는지를 속성으로 적습니다. 눈으로 보면 화살표 방향과 색으로 알 수 있는 정보인데, 그 표시는 소리로 옮겨지지 않습니다. 열림 여부를 적어 두면 "메뉴, 접힘" 으로 읽히고, 눌러서 펼치면 "펼침" 으로 다시 읽힙니다.
3. 이름을 붙입니다. 안에 글자가 없는 아이콘 버튼은 읽을 것이 없어 그냥 "버튼" 이 됩니다. 이름 속성을 달면 "공유 버튼, 댓글 버튼, 삭제 버튼" 으로 읽혀 도구 모음이 목차 구실을 합니다.
4. 바뀐 것을 알립니다. 화면 전체가 넘어가면 스크린 리더가 새로 읽지만, 한 귀퉁이만 바뀌면 아무 일도 일어나지 않습니다. 저장 버튼을 눌러 "저장되었습니다" 가 잠깐 떴다 사라지는 자리, 검색어를 치는 동안 결과 개수가 바뀌는 자리에 알림 속성을 달아 두면 그 변화가 소리로 전달됩니다. 이것이 없으면 저장이 됐는지 안 됐는지 모르는 채로 버튼을 여러 번 누르게 됩니다.

여기에 요소끼리 관계를 맺어 주는 쓰임이 더해집니다. 입력칸과 그 아래 오류 문구를 이어 두면, 입력칸에 초점이 갔을 때 "이메일, 편집, 형식이 올바르지 않습니다" 까지 한 번에 읽힙니다. 이어 두지 않으면 빨간 글씨는 화면에만 남습니다.

먼저 쓸 수단이 따로 있습니다. 규격 자체가 첫 번째 원칙으로 "쓰지 않아도 되면 쓰지 말라" 를 적어 둡니다.

1. 시맨틱 마크업 — 뜻에 맞는 태그를 쓰는 것입니다. 버튼용 태그로 만든 버튼은 역할과 이름이 저절로 전달되고 키보드 내비게이션과 포커스 링도 따라옵니다. 상자에 속성을 붙여 같은 상태를 만들려면 손이 훨씬 많이 갑니다.
2. 브라우저가 이미 가진 부품 — 대화상자와 접이식 목록은 표준 태그가 생겼습니다. 직접 만든 것보다 동작이 덜 자유롭지만, 키보드 조작과 초점 처리가 이미 들어 있습니다.
3. 검증된 부품 모음 — 널리 쓰이는 라이브러리의 탭이나 자동완성은 속성 처리가 이미 되어 있습니다. 직접 만들면서 규격을 잘못 적용하는 것보다 안전합니다.
4. 설계를 단순하게 바꾸기 — 복잡한 부품을 굳이 만들지 않는 선택지도 있습니다. 탭 대신 항목을 차례로 늘어놓으면 속성이 필요 없어집니다.

WCAG 같은 접근성 기준을 맞추는 자리에서 이 규격은 마지막 수단에 가깝습니다. 앞의 네 가지로 안 되는 자리에만 씁니다.

"이 드롭다운 직접 만든 거면 열림 상태를 속성으로 알려 줘야 해요."

시각적 표시만으로는 스크린 리더에 전달되지 않는다는 지적입니다.

"아이콘 버튼에 이름이 없어서 전부 버튼으로만 읽혀요."

도구 모음 전체가 구분되지 않는 소리로 들린다는 뜻입니다.

"그건 버튼 태그로 바꾸면 되는 거라 ARIA 안 써도 됩니다."

속성을 덧붙이기 전에 태그부터 바로잡자는 말입니다.

페이지덱의 문서 편집 화면에는 서식 도구 모음이 있습니다. 민서가 만든 시안에는 아이콘만 있는 버튼이 여덟 개 있었고, 태오가 그대로 구현한 뒤 스크린 리더로 들어 보니 "버튼" 이 여덟 번 반복됐습니다. 각 버튼에 이름 속성을 달자 굵게, 기울임, 목록처럼 아이콘이 뜻하는 말이 그대로 읽혔습니다.

같은 화면의 공유 메뉴에서는 문제가 달랐습니다. 직접 만든 드롭다운이라 펼침 여부가 화살표 방향으로만 보였고, 열고 닫아도 소리로는 아무 변화가 없었습니다. 태오는 속성을 더 붙이는 대신 브라우저가 이미 가진 접이식 부품으로 바꿨고, 속성 없이 해결됐습니다.

속성을 많이 붙일수록 접근성이 좋아진다고 여기는 경우가 가장 흔합니다. 접근성 점검 도구가 속성 개수를 세지는 않지만 숫자로 보이는 것이 없다 보니 그렇게 느껴집니다. 실제로는 틀린 역할을 붙이면 아무것도 안 붙인 것보다 나쁩니다. 목록이 아닌 것에 목록 역할을 달면 스크린 리더는 "목록, 항목 3개" 라고 읽어 놓고 항목이 없는 상태를 전달하게 되고, 듣는 사람은 자기가 뭘 놓쳤다고 생각하며 같은 자리를 다시 훑습니다. 붙일 수 있어서 붙이는 것과 필요해서 붙이는 것은 다릅니다.

역할을 적으면 동작까지 생긴다고 생각하는 것도 잦은 오해입니다. 상자에 버튼 역할을 달면 스크린 리더는 버튼이라고 읽어 주므로 다 된 것처럼 보입니다. 하지만 이 규격은 전달만 할 뿐 동작을 만들지 않습니다. 탭 키로 그 자리에 갈 수 있게 하는 것, 엔터와 스페이스로 눌리게 하는 것, 눌린 뒤 초점을 어디로 보낼지는 전부 따로 짜야 합니다. 그래서 버튼이라고 읽히는데 아무리 눌러도 반응이 없는 화면이 나옵니다.