이미지
의미 있는 이미지는 본문 설명이나 대체 텍스트로 같은 정보를 전달해야 합니다. 장식용 이미지는 화면낭독기가 읽지 않게 처리합니다.
기준은 실제 화면에서 확인되어야 합니다.
접근성 기준은 문서에 머물지 않고 버튼, 이미지, 입력폼, 제목 구조 같은 실제 콘텐츠에서 확인되어야 합니다. 이 페이지는 화면 요소별로 무엇을 확인해야 하는지 정리합니다.
콘텐츠별로 확인합니다.
같은 기준도 콘텐츠 종류에 따라 적용 방식이 달라집니다.
버튼과 링크
“자세히 보기”처럼 약한 문구보다 어디로 이동하고 무엇을 하는지 알 수 있는 이름을 사용합니다.
입력폼
이름, 연락처, 문의 내용처럼 입력해야 할 정보가 분명히 안내되어야 합니다. 오류가 생기면 수정 방법도 함께 알려야 합니다.
제목 구조
페이지의 제목과 소제목은 문서의 목차처럼 자연스럽게 이어져야 합니다. 제목은 글자 크기만이 아니라 구조로도 전달되어야 합니다.
화면에서 바로 확인하는 기준
기준 문장을 화면 요소와 연결하면 무엇을 고쳐야 하는지 더 분명해집니다.
색상만으로 구분하지 않기
오류, 선택 상태, 강조 정보를 색상만으로 전달하면 색을 구분하기 어려운 사용자는 의미를 놓칠 수 있습니다. 색상과 함께 글자, 테두리, 아이콘, 상태 문구를 같이 제공합니다.
초점 위치 보이게 하기
키보드로 이동할 때 현재 위치가 명확하게 보여야 합니다. 링크와 버튼에는 충분히 굵은 초점 표시가 필요합니다.
링크 목적 분명히 쓰기
같은 화면에 “자세히 보기”가 반복되면 어디로 이동하는지 알기 어렵습니다. 링크 문구만 읽어도 목적지가 이해되도록 작성합니다.
오류를 고칠 수 있게 안내하기
입력폼에서 문제가 생기면 어떤 항목이 잘못되었는지, 어떻게 수정하면 되는지 함께 알려야 합니다.
- 위배 사례와 개선 사례는 같은 기준을 기준으로 비교합니다.
- 문제 설명은 사용자가 겪는 불편과 수정 방향을 함께 보여주는 방식으로 정리합니다.