본문 바로가기
프론트엔드/웹 접근성

웹 접근성, 개요: What, Why and How?

by 초코다빈 2024. 10. 21.

[최초 게시] 2024년 10월 21일.

 

0. 서론

UI/UX 에 관심 있다고 했지만, 디자인만 신경 쓰고 UX 개선을 위한 별다른 공부를 해오지는 않은 것 같다. 

그래서 web.dev의 웹 접근성 파트를 번역하며 깃허브에 기록하고, 블로그에는 정리본을 업데이트하여 공부해나갈 예정이다. 

 

web.dev의 웹 접근성 파트의 목차를 내 입맛대로 구분하여 도식화해보았고, 이 파트를 기준으로 앞으로 글을 작성하겠다. 

이번 글은 그 첫 번째 개요 파트이다. 

 

 

그림1. 웹 접근성 목차 중 개요 파트


1. What is digital accessibility, and why does it matter?

ㄴ 디지털 접근성이란 무엇이며, 왜 중요한가?

 

웹 접근성은 일반적으로 a11y로 약칭되는 디지털 접근성은 사람의 장애와 관계없이 제품과 의미 있고 동등한 방식으로 상호 작용할 수 있도록 디지털 제품을 설계하고 구축하는 것에 관한 것입니다.

 

웹 접근성의 정의에서부터 사람의 장애와 관계없이 ~ 라고 정의되어 있음에도, 흔히들 장애인을 위해서만 제공해야 하는 기술로 알고 있다. 나 역시도 장애인들의 사용성을 보장해 주는 것 아닌가?라고 생각했었다.

 

그러나 웹 접근성은 아래 상황들처럼 일반인에게도 보장이 필요한 순간이 있다. 따라서 항상 디지털 제품의 접근성을 확보하기 위해 노력해야 한다.

  • 갑자기 신체를 다쳐서 사용에 제약이 생긴 경우
  • 공공장소에서 비디오의 오디오를 재생할 수 없는 경우
  • 언어에 익숙하지 않은 경우
  • 제공된 글씨가 작아서 잘 읽히지 않는 경우 등 

※ 참고: web.dev - 2. What is digital accessibility, and why does it matter? 번역본 


2. How is digital accessibility measured

ㄴ 디지털 접근성은 어떻게 측정되나요?

 

앞의 챕터에서 디지털 접근성이 무엇인지, 왜 중요한지 알아봤다. 그렇다면 이를 어떻게 측정해야 할까?

 

프로젝트에 특정 표준이 요구되지 않는 경우 웹 콘텐츠 접근성 지침(WCAG)의 최신 버전을 따르는 것이 일반적으로 권장된다고 한다. 접근성 분야가 처음이라면 WCAG의 기본 원칙인 POUR부터 준수하는 것이 좋다고 한다. 그러면 실제 사용자들이 우리의 제품을 어떻게 이용하는지에 초점을 맞출 수 있다고 한다. 

 

POUR (Perceivable - Operable - Understandable - Robust)

  • Perceivable (인식 가능성)
    • 사용자가 화면의 모든 필수 정보를 인식할 수 있어야 한다.
    • 점검 질문: 특정 장애가 있는 사람이 인식하기 어려운 디지털 제품의 콘텐츠나 기능이 있나요?
    • 예시: 이미지, 아이콘, 동영상, 색상
  • Operable (운용 가능성)
    • 사용자가 디지털 제품의 인터페이스를 조작할 수 있어야 한다.
    • 점검 질문: 사용자가 디지털 제품의 상호작용 요소를 제어할 수 있나요?
    • 예시: 키보드, 터치스크린, 모든 제어 기능, 충분한 시간
  • Understandable (이해 가능성)
    • 사용자가 사용자 인터페이스의 정보와 작동 방식을 이해할 수 있어야 한다.
    • 점검 질문: 모든 내용이 명확하게 작성되어 있나요? 모든 상호작용이 이해하기 쉬운가요?
    • 예시: 간단한 내용, 명확한 오류 메시
  • Robust (견고성)
    • 보조 기술을 지원하고, 기기와 사용자 에이전트가 발전해도 디지털 제품의 접근성이 유지되도록 하는 데 중점을 둔다.
    • 점검 질문: 어떤 종류의 보조 기술(디바이스)을 지원하고 있나요? 
    • 예시: 키보드만으로 탐색, 다양한 기기 지원 

※ 참고: web.dev - 3. How is digital accessibility measured 번역본