웹 접근성: 프로와 아마추어를 가르는 디테일

방문자 일부가 쓸 수 없는 사이트

문이 너무 좁아 고객의 5분의 1이 들어오지 못하는 가게를 납품한다고 상상해 보세요. 접근성 없는 사이트가 하는 일이 바로 그것입니다: 저시력자, 색맹인 사람, 키보드로 조작하는 사람, 스크린 리더를 쓰는 사람, 혹은 그저 강한 햇빛 아래 휴대폰을 보는 사람——테스트하지 않는 개발자에게는 보이지 않는 장벽에 이들 모두가 부딪힙니다.

접근성(a11y)은 마지막에 덧붙이는 계층이 아닙니다. 첫 줄부터 시작되는, 만드는 방식 그 자체입니다.

제가 체계적으로 점검하는 것

특이한 사례가 아니라, 모든 프로젝트에서 지키는 기본기입니다:

• 대비 — 텍스트는 배경에서 도드라져야 합니다(본문은 최소 4.5:1). 「우아한」 흰 바탕의 연회색은 대개 읽히지 않습니다.
• 키보드 내비게이션 — 클릭 가능한 모든 것은 Tab 키로 닿을 수 있어야 하고, 포커스가 보여야 합니다. 많은 사이트가 「디자인을 위해」 포커스 외곽선을 없앱니다: 잘못입니다.
• 대체 텍스트 — 의미 있는 모든 이미지에는 서술형 alt를, 장식용 이미지는 그렇게 표시.
• 시맨틱 구조 — <h1>은 하나만, 논리적인 제목 위계, 스크린 리더가 읽어 주는 랜드마크(nav, main, footer).
• 터치 타깃 — 모바일에서 너무 작은 버튼은 빗나가는 버튼입니다.

접근성은 디자인을 옭아매지 않습니다. 디자인을 다스립니다. 대비와 포커스 요건은 거의 언제나 모두에게 더 명료한 인터페이스를 만들어 냅니다.

SEO와의 직접적인 연결

많은 이가 간과하는 것: Google은 페이지를 스크린 리더처럼 읽습니다. 깔끔한 시맨틱 구조, 적절한 alt, 명확한 링크——이것들은 접근성과 검색 순위에 동시에 작용하는 같은 신호입니다. 사이트를 접근성 있게 만드는 것은, 거의 기계적으로, 더 잘 발견되게 만드는 일입니다.

그래서 접근성 좋은 사이트는 세 칸을 한 번에 체크합니다: 더 많은 사용자, 더 나은 SEO, 더 낮은 법적 리스크(접근성은 점점 더 많은 나라에서 법적 의무가 되고 있습니다).

WCAG 위반 0이 「정말 쓸 만함」과 같은 것은 아니다

자동 도구(Lighthouse, axe)는 문제의 일부를 잡아냅니다——대비, 누락된 alt, 깨진 ARIA 역할. 하지만 100점이 사람이 해낼 수 있음을 보장하지는 않습니다. 어떤 것은 오직 손으로만 테스트됩니다:

• 마우스 없이 키보드만으로 페이지 전체를 조작하기.
• 스크린 리더(VoiceOver, NVDA)로 들어 보기.
• 이해를 위해 색에만 기대는 것이 없는지 확인하기.

바로 이 마지막 줄——사람에 의한 테스트——을 아마추어는 건너뛰고, 프로는 결코 잊지 않습니다.

나의 입장

저는 「접근성」을 프리미엄 옵션으로 청구하지 않습니다. 그것은 사이트가 모바일에서 표시되어야 하는 것과 똑같이, 제대로 된 사이트를 납품한다는 말의 일부입니다. 방문자 일부를 배제하는 결과물은 완성된 것이 아닙니다——미완입니다. 그리고 30초 데모에서는 보이지 않는 이 요건이야말로, 오래가는 작업과 일회용 사이트를 가르는 것입니다.