시맨틱 마크업

화면을 코드로 옮기는 일이 모양을 맞추는 일로만 이해되던 시기가 있었습니다. 웹 화면을 이루는 언어인 HTML에는 뜻이 정해진 태그가 여러 개 있는데, 그것을 골라 쓰지 않고 아무 의미 없는 상자 태그로 전부 만들고 스타일로 꾸미는 쪽이 편했습니다. 눈으로 보면 결과가 같았기 때문입니다.

같지 않은 쪽은 눈으로 보지 않는 쪽이었습니다. 화면에 있는 것을 소리로 읽어 주는 스크린 리더는 코드에 적힌 뜻을 읽습니다. 상자로 만든 것은 버튼처럼 보여도 상자로 읽힙니다.

페이지덱에서 그 차이가 드러난 자리는 공유 버튼이었습니다. 민서 시안의 아이콘 버튼 세 개를 태오가 모양 맞추기 쉬운 상자 태그로 만들었습니다. 화면으로는 시안과 같았지만, 키보드로 탭을 눌러 훑으면 그 세 개를 지나쳤고 스크린 리더로 들으면 버튼이 있다는 사실이 전달되지 않았습니다. 공공기관 고객의 접근성 검토서에 지적으로 올라왔습니다.

시맨틱 마크업은 이 간격을 없애는 작성법입니다. 눌러야 하는 것을 버튼 태그로 만들면 읽히는 것과 조작되는 것이 따라옵니다.

화면을 모양이 아니라 뜻으로 먼저 나누는 것에서 시작합니다. 다섯 단계입니다.

1. 화면을 영역으로 가릅니다. 머리, 탐색 메뉴, 주요 내용, 보조 내용, 바닥에 각각 정해진 태그가 있습니다. 이렇게 나눠 두면 스크린 리더 사용자가 메뉴를 건너뛰고 본문으로 바로 갑니다.
2. 제목을 등급으로 쌓습니다. 한 화면에 가장 큰 제목은 하나만 두고 그 아래로 단계를 내려갑니다. 글자를 작게 하려고 등급을 건너뛰지 않습니다. 크기는 스타일로 조절하고 등급은 뜻으로만 정합니다. 스크린 리더는 제목만 뽑아 들으며 문서를 훑어서, 등급이 어긋나면 목차가 뒤섞인 책이 됩니다.
3. 조작하는 요소를 제 태그로 만듭니다. 그 자리에서 무언가를 실행하면 버튼, 다른 화면으로 옮기면 링크입니다. 버튼 태그로 만들면 키보드 내비게이션에서 탭으로 선택되고 엔터로 눌리는 동작이 저절로 붙습니다. 상자에 클릭 동작만 얹으면 그 두 가지를 손으로 다시 만들어야 합니다.
4. 목록과 표를 제 태그로 만듭니다. 목록 태그로 만들면 항목이 다섯 개라는 사실이 함께 전달되고, 표에서 머리 행을 표시해 두면 칸을 읽을 때 어느 열의 값인지도 함께 읽힙니다.
5. 태그로 표현되지 않는 것만 속성으로 덧붙입니다. 직접 만든 드롭다운이 지금 열려 있는지 같은 상태가 그렇고, 이때 쓰는 것이 ARIA입니다. 태그로 되는 일을 여기서 대신하지 않습니다.

확인은 셋입니다. 마우스를 치우고 탭만으로 모든 기능에 닿는지, 스크린 리더로 들었을 때 제대로 읽히는지, 제목만 뽑아 봤을 때 목차로 읽히는지 봅니다.

거의 모든 화면에 맞고, 특히 문서와 양식처럼 구조가 뚜렷한 화면에서 값이 큽니다. 새로 만들 때 드는 비용은 0에 가깝습니다. 상자 대신 뜻에 맞는 태그를 고르는 것이라 작업량이 같습니다. 반대로 다 만든 뒤에 고치는 일은 비쌉니다. 스타일이 태그 이름에 묶여 있어 태그를 바꾸면 화면이 흐트러지기 때문입니다.

한계도 분명합니다. 넷입니다.

1. 마크업만으로 접근성이 끝나지 않습니다. 이미지를 글로 설명하는 대체 텍스트, 지금 선택된 자리를 보여 주는 포커스 링, 글자와 배경의 밝기 차이는 태그와 별개로 따로 챙겨야 합니다.
2. 표준 태그에 없는 것이 있습니다. 탭 묶음이나 자동 완성 목록처럼 직접 만드는 위젯은 대응하는 태그가 없어서 ARIA에 기대게 됩니다.
3. 태그가 맞아도 순서가 틀릴 수 있습니다. 코드에 적힌 순서대로 읽히므로, 화면에서는 위에 있는 것이 코드에서는 아래에 있으면 듣는 순서가 어긋납니다.
4. 자동 검사 도구가 다 잡지 못합니다. 지켜야 할 항목을 등급으로 나눠 둔 WCAG 기준 가운데 기계가 판정할 수 있는 것은 절반쯤이고, 나머지는 사람이 들어 봐야 압니다.

검색 쪽에도 도움이 됩니다. 검색 엔진도 제목 등급과 영역 구분을 읽어 구조를 파악하므로 온페이지 SEO와 방향이 맞습니다.

"이 버튼 상자로 만들어졌네요. 버튼 태그로 바꿔 주세요."

탭으로 선택되고 스크린 리더에 버튼으로 읽히게 하자는 요청입니다.

"제목 등급이 1에서 4로 건너뛰었습니다. 글자 크기는 스타일로 맞추죠."

크기 때문에 구조를 망가뜨리지 말자는 지적입니다.

"여기는 태그로 되는 자리라 ARIA 안 붙여도 됩니다."

속성을 덧붙이기 전에 표준 태그를 먼저 쓰라는 뜻입니다.

페이지덱은 그 지적을 받은 뒤 순서를 바꿨습니다. 민서가 시안을 넘길 때 각 요소가 무엇인지 함께 적습니다. 이것은 버튼, 이것은 링크, 이 묶음은 목록이라고 표시하는 방식입니다. 태오는 그 표시대로 태그를 고르고 스타일은 그다음에 맞춥니다.

바뀐 뒤에 줄어든 것은 접근성 지적만이 아니었습니다. 키보드로 양식을 채우는 사용자의 문의가 줄고, 같은 구성 요소를 다른 화면에서 쓸 때 손댈 곳도 줄었습니다. 태그가 뜻을 들고 있으면 그 요소가 어디에 놓여도 같게 동작하기 때문입니다.

검색 순위를 올리는 기법으로 읽는 경우가 가장 많습니다. 검색 엔진이 구조를 읽는다는 설명이 자주 함께 나오니 그렇게 들립니다. 하지만 이것은 순위를 올리는 장치가 아니라 내용을 정확히 전달하는 장치입니다. 태그를 정리했다고 순위가 오르지는 않습니다. 반대로 순위를 목표로 잡으면 제목 태그를 뜻과 무관하게 여러 개 넣게 되고, 그러면 스크린 리더에 제목이 스무 개인 문서로 읽혀 원래 얻으려던 것까지 잃습니다.

상자로 만들고 속성을 붙이면 같다는 생각도 흔합니다. ARIA로 역할을 버튼이라고 적어 줄 수 있으니 결과가 같아 보입니다. 실제로는 이름만 옮겨지고 동작은 따라오지 않습니다. 탭으로 선택되게 만드는 일, 엔터와 스페이스로 눌리게 만드는 일, 비활성 상태를 알리는 일을 모두 손으로 다시 구현해야 하고, 그중 하나라도 빠지면 읽히기는 하는데 눌리지 않는 버튼이 됩니다. ARIA 규칙 첫 줄이 태그로 되는 일에는 ARIA를 쓰지 말라는 이유가 여기 있습니다.