웹 표준을 설명하는 포스트에서 웹 표준을 지키기 위한 노력 중 하나로 웹 접근성(Web Accessibility)를 지키자라고 언급했었습니다. 그러면 웹 접근성이 무엇이고 어떻게 해야지킬 수 있는지 알아보도록 하겠습니다.
웹 접근성
웹 접근성은 하드웨어, 소프트웨어, 언어, 장소, 능력, 장애에 상관없이 모든 사람들이 모든 웹 공간을 자유롭게 사용할 수 있도록 웹 사이트를 설계/기획/개발하는 것을 의미합니다. 그렇기에 모든 웹 개발자는 이러한 웹 접근성을 항상 염두에 두고 개발에 참여해야합니다.
누구든지(일반인, 장애인, 고령자, 어린이) 언제 어디서든 어떤 기기(PC, 태블릿, 스마트폰, 스마트 워치, PDA 등)를 사용하던 웹 페이지에 어려움 없이 접근할 수 있고 이용 또한 쉽도록 만드는 것을
웹 접근성이라고 요약할 수 있습니다.
웹 접근성 지침 WCAG
웹 접근성은 W3C에서 제정한 웹 접근성 지침을 준수함으로써 지킬 수 있습니다.
웹 접근성 지침은 4대 원칙, 13개 지침, 78개 검사 항목으로 나뉩니다. 4대 원칙과 지침들을 요약하면 다음과 같습니다.
인식의 용이성 Perceivable
모든 콘텐츠는 사용자가 인식할 수 있어야한다.
- 대체 텍스트: 텍스트가 아닌 콘텐츠에 대해서는 해당 콘텐츠의 의미나 용도를 인식할 수 있는
대체 텍스트를 삽입해야한다.
대표적으로 <img> 태그의 alt속성이 있습니다. 화면 낭독기를 이용하면, alt에 적힌 텍스트를 읽어줍니다.
<img alt='대체 텍스트입니다.' src=''> - 멀티미디어 대체 수단: 멀티미디어 콘텐츠(동영상, 오디오 등)을 이해할 수 있는 대체 수단을 제공해야한다.
자막, 수화 등을 함께 제공함으로써 멀티미디어 시청에 제약이 걸리는 사람들에게 대체 수단을 제공해야합니다.
- 명료성: 콘텐츠가 명확하게 전달되어야한다.
강조 사항은 색보다는 볼드체, 이탤릭체, 밑줄을 통해 강조해야합니다.
참고로 볼드체에는
<strong>, 이탤릭체에는<em>태그를 사용하고 밑줄같은 경우 css의text-decoration속성을 이용하는 것이 웹 접근성을 향상시키는데 도움을 줍니다.
이 외에도 색과 무관한 텍스트의 인식, 자동 소리 재생 금지, 텍스트-배경 사이 명도 차이는 4.5:1 비율, 텍스트 크기는 18pt 이상을 권장하고 있습니다.
운용의 용이성 Operable
UI 요소는 조작과 탐색(navigation)이 가능해야한다.
- 키보드 조작: 모든 콘텐츠는 키보드만으로도 조작이 가능해야한다.
- 시간 제공: 콘텐츠를 읽고 이해하고 사용하는데 충분한 시간이 주어져야한다.
- 콘텐츠 탐색: 모든 콘텐츠는 사용자가 쉽게 찾을 수 있거나, 찾을 수 있도록 도움을
이해의 용이성 Understandable
콘텐츠는 누구나 쉽게 이해할 수 있어야한다.
- 가독성: 웹 페이지에서 주로 사용되는 언어를 명시해야한다.
- 예측 가능성: 콘텐츠의 기능과 실행 결과가 예측 가능해야한다.
- 콘텐츠의 논리성: 콘텐츠는 논리적인 순서로 제공되고 구성해야한다.
- 입력 도움: 사용자의 입력에 대한 오류를 방지하고 정정할 수 있어야한다.
견고성
콘텐츠는 여러 기술들과 기기에 대해 해석될 수 있는 견고성을 가져야한다.
- 호환성, 오류 검출, 웹 어플리케이션 접근성, 문법 준수 등
국내에서도 W3C의 지침을 기반으로한 국내 버전 웹 표준 지침이 있습니다.
참고 자료
이 글을 쓰는데 도움이 된 자료들과 추가해서 참조하면 좋은 자료들입니다.
