웹 접근성(Web Accessibility): 장애를 넘어 모두를 위한 웹 만들기

"웹의 힘은 보편성에 있다. 장애에 구애받지 않고 누구나 접근할 수 있는 것이 웹의 본질적인 요소다." - 팀 버너스 리 (웹의 창시자)

웹 접근성(A11y)은 단순히 '시각 장애인을 위한 배려'가 아닙니다. 마우스가 고장 난 사용자, 팔이 부러진 사용자, 밝은 햇빛 아래에서 화면을 보는 사용자 등 다양한 상황에 놓인 모든 사람을 위한 것입니다. 법적인 의무(차별금지법)를 넘어, 개발자의 윤리적 책임이기도 합니다.

1. 시맨틱(Semantic) HTML의 중요성

접근성의 90%는 올바른 HTML 태그만 써도 해결됩니다.

• <div> 대신 <button>을 쓰세요. <button>은 자동으로 키보드 포커스, 엔터/스페이스바 실행 기능을 가집니다. onClick 달린 div는 스크린 리더에게 그저 "그룹"일 뿐입니다.
• <b>, <i> 대신 <strong>, <em>을 쓰세요. 의미적인 강조를 전달해야 합니다.
• <header>, <nav>, <main>, <footer> 등 랜드마크 태그를 사용하여 페이지 구조를 명확히 하세요.

2. 대체 텍스트 (Alt Text)

이미지는 시각 정보입니다. 스크린 리더 사용자를 위해 <img alt="설명">을 반드시 제공해야 합니다.

• 의미 없는 장식용 이미지라면 alt=""로 비워두세요. (스크린 리더가 무시합니다)
• "이미지", "사진" 같은 단어는 굳이 넣지 마세요. 이미 이미지 태그인 걸 압니다.

3. WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

HTML 태그만으로 표현할 수 없는 동적인 UI(탭, 모달, 드롭다운 등)의 접근성을 보장하기 위한 속성입니다.

• aria-label: 텍스트가 없는 버튼(예: 돋보기 아이콘만 있는 검색 버튼)에 이름을 붙여줍니다.
• aria-expanded: 아코디언 메뉴가 펼쳐졌는지 접혔는지 상태를 알려줍니다.
• 주의: ARIA는 최후의 수단입니다. HTML 태그로 해결할 수 있다면 ARIA를 쓰지 않는 것이 원칙입니다(No ARIA is better than Bad ARIA).

4. 키보드 접근성 확인하기

마우스 없이 탭(Tab) 키만으로 여러분의 웹사이트를 탐색해 보세요.

• 포커스가 논리적인 순서로 이동하나요?
• 현재 어디에 포커스가 있는지 시각적으로(Outline) 보이나요?
• 모든 상호작용 가능한 요소를 실행할 수 있나요?

접근성은 "나중에 추가하는 기능"이 아닙니다. 설계 단계부터 고려되어야 하는 "기본 품질"입니다.