"웹이란 장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간" - 월드와이드 웹의 창시자 팀 버너스 리
-
웹 접근성은 신체적 장애 여부와 상관없이 누구나 웹 사이트를 이용할 수 있어야 한다는 것을 의미한다.
-
e.g. 시각장애인의 스크린리더
-
'메뉴'라는 텍스트 대신 메뉴라고 그려진 이미지를 사용할 경우 스크린리더 소프트웨어는 이를 인식 못한다. -> 시각장애인에게 전달 불가
-
따라서 이미지 대신 소스코드에 내용을 그대로 담는 것이 권장된다. 부득이하게 이미지를 사용할 경우 반드시
alt설명을 추가해야함. -
최선은 역할에 맞게 버튼 태그를 사용하는 것 (아래 코드 참고)
-
이처럼 장애가 있는 경우를 포함, 여러 사용자 시나리오 에도 웹페이지를 원활하게 이용할 수 있도록 지켜야 하는 사항을 웹 접근성이라 한다.
<!-- worst -->
<img src="./button.png" />
<!-- better -->
<img src="./button.png" alt="메뉴버튼" />
<!-- best -->
<button>메뉴버튼</button>-
인지성 (Perceivable)
- 정보와 사용자 인터페이스 컴포넌트는 사용자가 인지할 수 있는 방식으로 제공되어야함
- 대체텍스트: 텍스트가 아닌 콘텐츠가 있을 경우 대체 콘텐츠와 함께 제공되어야 한다.
- 시간 기반 미디어: 시간을 바탕으로 한 미디어에 대한 대체제가 제공되어야한다.
- 응용성: 콘텐츠가 정보나 구조의 손실 없이 다른 방식들로 표현될 수 있어야 한다.
- 명료성: 사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.
-
운용성 (Operable)
- 사용자 인터페이스 요소와 탐색은 운용이 가능해야 함
- 키보드 접근성: 키보드로 모든 기능을 사용할 수 있도록 해야한다.
- 충분한 시간: 사용자가 콘텐츠를 읽고 사용할 충분한 시간이 제공되어야 한다.
- 발작과 신체반응: 사용자가 발작 및 신체적 반응을 일으킬 가능성이 있는 콘텐츠는 배제하야 한다.
- 탐색 가능성: 사용자가 탐색하고, 필요한 내용을 찾고, 어느 부분을 보고 있는지 알 수 있는 방법이 제공되어야 한다.
-
이해성 (Understandable)
- 사용자 인터페이스 정보와 운용은 이해할 수 있도록 제공되어야 함
- 가독성: 텍스트로 이루어진 콘텐츠는 이해하기 쉬어야 한다.
- 예측성: 웹 페이지는 사용자가 예측할 수 있는 방향으로 보이고 작동하도록 해야한다.
- 입력 도움: 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.
-
내구성 (Robust)
- 콘텐츠는 보조 기술을 포함한 다양한 사용자 보조기기에 의존하여 해석될 수 있도록 충분한 호환성을 가져야한다.
- 호환성: 보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 최대화해야 한다.
- 자막, 스크린디러, 자동완성 기능, 마우스 스틱, 색상대비 디자인 등
- CreatedAt 2023.01.07