요즘 직접 웹사이트를 만들기 시작하신분들이 많은데요, 제작하면서 웹접근성 측면에서 놓칠 수 있는 부분들을 체크리스트로 정리해봤습니다.
이 체크리스트는 접근성 높은 디자인을 위한 출발점일 뿐, 최종 목적지가 아닙니다. 여기에는 가장 중요한 개념들이 담겨 있습니다. 단순히 최소 기준을 충족하는 수준을 넘어, 당사자가 실제로 만족하고 유용하게 활용할 수 있고 필요에 꼭 맞는 디자인을 구현하기 위해 더욱 고민해 보시기 바랍니다.
페이지 제목
- 페이지 제목(브라우저에 표시되는 페이지 제목이며, 본문 내 주요 제목이나 <h1> 요소는 아님)이 해당 페이지의 주제나 목적을 설명하고 있나요?
헤딩
- 제목처럼 보이고 기능하는 모든 텍스트가 제목 태그(<h1>-<h6>)로 돼있나요?
- 제목 레벨은 스타일을 고려해서가 아니라, 콘텐츠 내의 올바른 위계를 나타낼 수 있도록 선택되었나요?
내비게이션
- 반복적인 탐색 과정을 건너뛰고 바로 본문 콘텐츠로 이동할 수 있는 방법이 제공되나요? 이를 위한 주요 기법으로는 HTML/ARIA 랜드마크(예: header, navigation, main, footer)를 설정하거나 ‘스킵 링크(skip navigation links)’를 제공하는 것 등이 있습니다.
- 코드 순서에 따라 결정되는 콘텐츠의 읽기 순서 및 포커스 이동 순서가 논리적이고 직관적인가요?
링크
- 링크 텍스트가 링크의 목적이나 목적지를 명확하게 설명하고 있나요?
색상/대비
- 정보가 색상 이외의 다른 수단을 통해서도 전달되나요? 예를 들어 폼에 오류가 있음을 나타낼 때 색상과 텍스트를 함께 사용하거나, 차트 항목을 표시할 때 색상과 텍스트를 병기하는 경우가 이에 해당합니다.
- 모든 텍스트는 배경색과 최소 4.5:1(큰 텍스트의 경우 3:1)의 색상 대비를 갖추고 있나요?
- 링크 텍스트를 일반 텍스트와 구분할 수 있는 요소가 색상 외에도 존재하나요?
- 마우스를 사용하지 않는 사용자가 Tab 키나 화살표 키를 사용하여 상호작용 가능한 요소로 이동했을 때, 해당 요소에 명확하고 눈에 띄는 포커스가 표시되나요?
- 콘텐츠에 접근하거나 이를 이해하는 데 중요한 모든 비텍스트 요소(사용자 인터페이스 구성 요소 및 그래픽 객체)는 최소 3:1의 충분한 색상 대비를 갖추고 있나요?
확대 기능과 반응형 디자인
- 저시력 사용자가 데스크톱, 모바일 등 어떤 기기에서든 브라우저 내 콘텐츠를 확대하거나 크게 볼 수 있나요?
- 디자인이 모든 확대 수준에 최적화되어 있나요? 가로 스크롤이 발생하지 않도록 디자인을 최대한 단순화하세요.
- 사용자가 원하는 방향(가로 또는 세로)으로 기기를 설정한 상태에서 웹사이트를 이용할 수 있나요?
이미지
- 정보 전달용 이미지에 대한 대체 텍스트가 해당 이미지와 동일한 정보를 제공하나요?
- 링크, 버튼, 이미지 맵 영역 등 사용자가 상호작용할 수 있는 이미지의 대체 텍스트가 연결 대상이나 버튼의 목적을 명확히 나타내나요?
- 복잡한 이미지나 인포그래픽의 경우, 페이지 본문에서 충분히 설명하고 있으며 짧은 대체 텍스트도 함께 제공되나요?
- 장식용 이미지는 대체 텍스트가 필요 없는 것으로 올바르게 처리되어 있나요?
- 이미지 내부에 텍스트를 포함하는 대신 일반 텍스트를 사용했나요? (로고 내 텍스트나 장식용 텍스트 이미지 등은 예외입니다.)
표
- 페이지에 데이터 표가 포함된 경우, 해당 표에 캡션(이름/제목)이 있고, 마크업상에서 열이나 행이 적절하게 식별되어 있나요?
- 복잡한 표를 단순화해, 복합적인 열 또는 행 헤더를 사용해야 할 필요성을 최소화하거나 제거했나요?
양식(Forms)
- 모든 양식 필드에 항상 표시되는 라벨이 있나요?
- 모든 양식 라벨은 설명이 충분하고 지침을 잘 전달하고 있나요? 사용자가 양식을 작성하는 데 필요한 모든 정보가 해당 페이지에 제공되어 있나요?
- 모든 양식 레이블과 지침이 관련 양식 요소 바로 옆에 배치되어, 사용자(화면 확대 기능을 사용하는 사용자 포함)가 양식 요소와 그 레이블 또는 지침을 쉽게 연결할 수 있나요?
- 모든 제어 요소(버튼 등)가 자신이 제어하는 콘텐츠와 가까운 곳에 배치되어 있나요? 예를 들어, ‘수정’ 과 ‘삭제’ 버튼이 수정하거나 삭제하려는 콘텐츠 바로 옆에 있나요?
- 오류 메시지가 사용자가 오류를 수정할 수 있도록 충분한 정보를 제공하나요?
- 양식이 ‘자동 완성(Autofill)’ 기능을 사용할 수 있도록 구성되어 있나요?
동적 콘텐츠
- 페이지에 동적으로 삽입되는 콘텐츠가 있을 경우, 사용자가 이를 인지할 수 있나요? 또는 해당 콘텐츠가 논리적 읽기 순서나 탭 순서상, 그것을 발생시킨 요소 바로 다음에 나타나나요?
- 키보드 전용 조작이나 터치스크린 상호작용이 모두 예상 가능한 방식으로 이루어져, 사용자가 페이지 내의 모든 위젯을 어떻게 다루어야 할지 알 수 있나요?
- 모든 상호작용에 성공 또는 실패에 대한 피드백을 설계하세요. 사용자가 스크립트로 구현된 기능(버튼 클릭, 양식 제출 등)을 실행했을 때, 성공/오류 메시지나 기능이 실제로 작동하는 모습(예: ‘재생’ 버튼을 누른 후 동영상이 재생되기 시작함) 등을 통해 해당 작업이 성공했는지 여부를 사용자가 알 수 있어야 합니다. 이러한 피드백은 비장애인 사용자, 화면 읽기 프로그램(스크린 리더) 사용자 등 모든 유형의 사용자에게 제공되어야 합니다.
사용자 정의 위젯(Custom Widgets)
- 가능한 경우 표준 HTML 위젯(링크, 버튼, 폼 요소, 컨트롤 등)을 사용하고 있나요? 네이티브(기본) 위젯에는 접근성 기능이 내장되어 있지만, 사용자 정의 위젯에는 그렇지 않습니다.
- 사용자 정의 위젯을 사용하는 경우, 해당 위젯은 키보드만으로 완전히 조작할 수 있도록 구현되었고 WAI-ARIA 작성 지침을 준수하고 있나요?
터치기기
- 주요 링크와 버튼의 터치 영역 크기가 충분히 크고, 손가락으로 쉽게 조작할 수 있도록 서로 충분한 간격을 두고 배치되어 있나요?
- 스와이프 동작이나 제스처를 사용하는 기능에 대해, 이를 대신하여 실행할 수 있는 다른 방법이 마련되어 있나요? 터치 기기에서 화면 읽기 프로그램(스크린 리더)이 활성화되면, 기존에 설정된 모든 사용자 지정 스와이프 동작이나 제스처는 무시된다는 점에 유의하세요.
마치며
홈페이지의 접근성이 좋으면 많은 사람들이 쉽게 이용할 수 있습니다. 여러분의 홈페이지는 체크리스트를 지키고 있나요? 직접 확인하셔도 되고 이 체크리스트를 AI에게 줘도 될거 같아요. 확인하고 수정할게 있어도 요즘은 AI가 잘 수정할 것 같습니다.
답글 남기기