웹 접근성을 고려해야 하는 이유
서비스를 진행하면 항상 최고 사양의 휴대폰으로 진행할 수 없는 사용자가 있고, 몸이 조금 불편하신 사용자도 있을 수 있다. 그런 경우이더라도 서비스는 모두에게 최대의 효율성을 제공하려고 노력을 해야한다. 이러한 이유로 웹 접근성을 고려해야하고, 프론트 개발자가 갖추어야 할 자질이라 생각한다.
인식이 가능해야 함( Perceivable )
사용자가 콘텐츠를 “볼 수 없더라도” 이해 가능해야 함.
예:
- 이미지에 대체 텍스트 제공
- 영상 자막 제공
- 색상만으로 상태 전달 금지
- 충분한 대비 제공
조작 가능해야 함 ( Operable )
마우스 없어도 조작 가능해야 함.
예:
- Tab 이동 가능
- Enter / Space 동작 가능
- 포커스 표시 보임
- 키보드 함정 없음
- 통신을 하거나, 계산이 진행하는 버튼인 경우는 <button>를 사용해야 웹 접근성에 안전함. <div>를 사용하면 키보드로 조작하는 데 이슈 발생함.
이해 가능해야 함( Understandable )
UI가 예측 가능하고 명확해야 함.
예:
- 라벨 있는 입력창
- 명확한 에러 메시지
- 일관된 네비게이션
- 지나치게 복잡한 문구 지양
- label과 관련 있는 input태그는 id-for 일치시켜야 함.
주의해야할 점.
div 남발하지 말고 의미 있는 태그 사용
- header
- main
- nav
- button
- form
- label
- table