input에 파란테두리가 미워보여 focus에 outline: none해보신 분(저요✋!)
생각없이 사용했던 css속성도 접근성과 관련있다는 점에서 하나하나 의미있게 사용해야 한다는 걸 다시 느낀다. 💪🏻
:focus는 입력장치가 없는 (마우스, 트랙패드 또는 터치스크린의 손가락)를 사용하지 않는 사람들에게 유용하다는 점에서 중요하다. 포커스 스타일은 현재 위치와 선택된 요소를 눈에 띄게 보여준다.
웹 접근성?
웹 접근성의 목표는 모든 사람들이 웹을 인지하고, 이해하고, 탐색하고, 상호 작용하고, 기여할 수 있도록 하는 것이다. 모든 사람에게 평등한 접근과 기회를 제공해야 하는 기본적인 인권이다.
또한 접근성은 비지니스적 잠재력도 가지고 있다. 접근성이 뛰어난 웹 사이트는 모든 사람에게 향상된 사용자 경험을 제공한다. 웹사이트의 탐색 경험이 긍정적인 사용자일 수록 비지니스적 결과로 이어지는 경우가 많다. 웹 접근성은 잠재 고객 기반을 확장한다.
웹 콘텐츠 접근성 지침(WCAG)
Perceivable
누구나 제공되는 정보를 인지할 수 있어야 한다.
- 장애가 있는 사람이 인식할 수 없는 웹사이트나 앱이 있는가?
- 다른 유형의 보조 기술 장치와 함께 작동 가능한가?
가능한 한 다양한 장애를 고려해야 한다.
사용자는 인터넷이 느린 환경일 수도, 신체의 감각으로 모든 정보를 인지 하지 못할 수도 있다는 점을 생각해야 한다.
e.g) <img> 태그의 alt, 비디오에 캡션 및 스크립트 추가
컬러가 의미를 전달하는 유일한 방법이 아니라는 점을 인지한다.
Operable
사용자는 인터페이스를 조작할 수 있어야 한다. 사용자가 수행할 수 없는 인터렉션을 요구하는 인터페이스는 피해야 한다.
- 사용자가 웹사이트/앱의 상호요소를 제어할 수 있는가?
- 웹 사이트에 키보드 트랩이 있는지?(키보드를 사용하는 사람이 키보드만 사용하는 대화형 요소나 컨트롤에서 포커스를 이동할 수 없을 때를 말한다.)
- 터치 장치에서 작동하는지?
e.g)
키보드 전용 탐색 고려하기
슬라이드쇼와 미디어 플레이어에 표시된 모든 컨트롤이 있는지 확인한다.
사용자가 양식을 작성할 충분한 시간을 둔다.
Understandable
사용자는 정보와 사용자 인터페이스의 작동을 쉽게 이해할 수 있어야 한다.
- 모든 내용이 명확하게 작성되었는가?
- 모든 상호 작용이 이해하기 쉬운가?
- 페이지 순서가 의미가 있는지?
e.g)
9학년 읽기 수준에서 내용을 작성하기
웹사이트의 오류 메시지가 명확하고 해결하기 쉬운지 확인한다.
Robust
버전이 업그레이드되는 것과 상관없이 사용자는 콘텐츠에 접근할 수 있어야 한다.
- 최신 브라우저 또는 운영 체제만 지원하는지?
- 충분한 테스트를 걸쳐 진행이 되었는지?
- 가로형 및 세로형 사진 모두 잘 작동하는지?
- 업데이트 관련 주기적인 테스트를 진행한다.
