고정 헤더 영역
상세 컨텐츠
본문
심사대상은 적절한 대체 텍스트, 자막제공, 콘텐츠에 무관한 인식, 명확한 지시사항 제공, 텍스트 콘텐츠의 명도 대비, 자동재생 금지, 키보드 사용 보장, 초점 이동, 조작가능,응답시간 조절, 정지기능제공, 깜빡임과 번쩍임 제한, 반복영역 건너뛰기, 제목제공, 적절한 링크 텍스트, 기본언어 표시, 사용자 요구에 따른 실행, 콘텐츠의 선형화, 표의 구성, 레이블 제공, 오류 정정, 마크업 오류 방지 항목이 있다.
적절한 대체 텍스트는 시각 장애인이 이미지를 볼 수 없기 때문에 이미지에 삽입된 내용을 동일하게 작성하는 부분이다. 이 부분은 CSS 상에서 alt부분이다. 이미지 내에 표의 내용 또한 동일하게 대체 텍스트로 작성되어 시각 장애인의 사용이 어렵지 않게 작성되어야 한다.
자막제공은 동영상 콘텐츠에 한하여 심사되는 내용으로 동영상 콘텐츠가 있다면 자막을 제공하여야 한다.
콘텐츠에 무관한 인식은 각 콘텐츠나 UI별로 색상의 명도차가 확실하거나 선택 시에 기존과 차이가 있어야 한다는 점이다. 색상으로 두 컴포넌트가 구별이 어렵다면 하나의 컴포넌트에는 패턴을 넣거나 외곽선을 주어 확실하게 다른 컴포넌트로 인식 되어야 한다.
명확한 지시사항 제공은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식되어야 한다.
회원가입 시 필수 입력 항목들 앞에 별표 문자 모양으로만 정보를 제공하고 있는 경우 오류 사례이다.
따로 "*표시는 필수 입력 사항입니다."라는 설명을 제공하거나,
'*'가 이미지인 경우 대체 텍스트를 "필수"나 "필수 입력사항"이라고 제공하거나,
'*'영역에 "필수"라는 정보를 숨김 텍스트로 제공하면 된다.
크기로만 정보 제공
"작은 버튼을 클릭하세요."라고 크기로만 정보 제공하는 경우도 오류 사례이다.
대상이 되는 버튼이 '작은 버튼'이라는 대체 텍스트를 포함하고 있지 않을 경우 시각적으로 인식이 어려운 사용자는 어떤 요소를 지칭하는지 알 수 없기 때문이다.
위치나 방향으로만 정보 제공
왼쪽의 숫자를 입력하라고 방향으로만 정보를 지시하는 경우는 오류 사례이며 시각적으로 인식이 어려운 사용자의 경우 왼쪽이 어딘지 알기 어렵다
색으로만 정보 제공
"보라색 지역은 관할 지역입니다."라고 색으로만 정보를 제공하고 있는 경우 오류 사례이다. "서울, 경기, 인천지역은 관할 지역입니다." 라고 명확하게 정보를 제공해야한다.
텍스트 콘텐츠의 명도 대비는 배경색과 텍스트색의 대비를 기준으로 보는 항목이다. 일반적으로 흰색배경에 검은 글씨는 21:1로 명도 대비가 가장 높고 가시성이 좋은 조합이다. 하지만 유색일 경우 이 대비를 체크하며 콘텐츠를 제작하여야 한다. 명도 차이를 체크하기 위해서는 webaim 등의 사이트를 활용한다. 각각의 컬러코드를 입력하여 명도대비를 확인하는 사이트이다. 일반적으로 명도 대비는 4.5:1 이상이어야 심사 통과가 가능하다.
자동재생 금지 항목은 평가받는 범위 이내에 동영상이 있을 경우 자동재생이 되지 않아야 하는 항목이다. 페이지 진입 시에 자동 재생되는 3초 이상의 배경은 콘텐츠에 심사되는 항목이다. 불가피하게 제공되어야 하는 경우에는 3초내 정지하거나 ESC키를 이용해 정지시키거나 소스 상 가장 먼저 위치해 정지 기능 실행이 가능하도록 한다.
키보드 사용 보장 항목은 웹사이트 이용 시 모든 항목에 탭키를 이용하여 접근이 가능한지 심사하는 항목이다. 각각의 컴포넌트에 탭 키로 접근이 가능하며 SHIFT 탭 키로 이전 항목을 선택 할 수 있어야 한다.
초점 이동 항목은 스크린 리더 사용자가 키보드를 통해 웹 페이지의 정보에 접근하는 것을 의미한다. 탭 키로 다음 항목을 이동하며 SHIFT+탭 키로 이전 항목으로 이동 되어야 한다 이 때에 초점이 된 컴포넌트는 컴포넌트와 포커스링이 구별 되어야한다. 컴포넌트와 포커스링의 dimension이 동일하면 구분이 어려우므로 컴포넌트와 포커스링의 dimension이 구분될 수 있도록 css를 수정하여야 한다. 혹은 포커스링을 점선으로 표현하여 구분하여도 된다.
조작 가능 항목은 손떨림이 심하여 미세한 조작이 어려운 경우와 같이 운동 장애가 있는 경우에도 사용자 입력 및 컨트롤이 조작 가능하도록 제공되어야 하는 항목이다. 웹 페이지 기준은 웹 페이지의 모든 컨트롤은 대각선 방향의 길이를 6mm 이상으로 제공해야 한다. 링크, 사용자 입력, 기타 컨트롤 등의 안쪽 여백은 1px 이상의 여백을 두는 것을 권고한다.
응답시간 조절 항목은 시간 제한이 있는 콘텐츠는 응답시간을 조절 할 수 있어야 한다. 문서를 읽고 이해하는데 더 많은 시간이 필요한 지적 장애 또는 학습 장애가 있는 사용자도 시간 제한이 있는 콘텐츠를 시간에 관계없이 이용 할 수 있다. 이 항목은 이용자가 한 문서의 끝까지 도달하는데 걸리는 시간을 측정하므로 한 문서 내의 버튼이나 게시판 이용에 어려움이 없도록 상세한 안내를 요구한다.
정지 기능 제공 항목은 자동으로 변경되는 콘텐츠는 움직임을 제어 할 수 있어야 한다. 스크롤이나 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지 할 수 있는 수단을 제공해야 한다. 이전, 다음, 정지 기능을 제공해야 한다. 일반적으로 자동 슬라이드 컴포넌트에서 많이 쓰이는 데 자동 슬라이드 컴포넌트에 이전, 다음, 정지 기능을 포함하면 된다.
깜빡임과 번쩍임 제한 항목은 콘텐츠가 초당 몇 회 깜빡이는지 확인하는 것이다. 깜빡거리고 뻔적이는 영상은 비장애인들도 눈에 피로를 느끼기 때문에 가능한 제공하지 않는 것이 좋다. 이 컴포넌트는 번쩍이는 콘텐츠가 차지하는 면적이 10%이하 이거나 시간을 3초 미만으로 제한하는 것이 좋다. 혹은 사전에 경고하고 중단 가능한 기능을 제공하여야 한다 .
반복영역 건너뛰기 항목은 콘텐츠에 반복 되는 영역을 뛰어 넘을 수 있게 해야하는 항목이다. 페이지마다 반복되는 영역이 있는 경우에 마크업 상 최 상단에 위치하며 건너뛰기 링크가 페이지 내에 존재해야 한다. 숨김 처리되어 있어도 키보드 접근 시 화면에 노출된다. 대부분의 경우 헤더 내에 있는 컴포넌트에 속한다 .
제목제공은 테이블이 있는 소스에 해당하며 테이블의 th 영역에 테이블 내용이 요약된 제목이 제공되어야 한다. 페이지의 제목도 스크린 리더로 읽히는 부분이므로 페이지의 제목을 명확하게 작성하여야 한다.
적절한 링크 텍스트 항목은 빈 링크가 없도록 해야하며 독립적 이미지 링크는 alt를 수정하여 적절한 링크 텍스트를 작성하여야 한다. 썸네일 링크 또한 마찬가지로 적절한 alt를 작성하여야 한다. a 태그로 특정 페이지로 이동하는 내용에 대해서 title을 이용하여 어느 페이지로 이동하는지 명확하게 구분해주어야 한다.
기본언어 표시는 html 구조 상 언어를 표시하는 <html lang=""> 항목을 심사한다. 일반적으로 한국어인 ko로 작성되어 있다. 외국어를 지원하는 웹페이지라면 정확한 언어로 되어 있는지 확인이 필요하다.
사용자 요구에 따른 실행 항목은 사용자가 의도하지 않은 기능 이 실행되는지 검토하는 항목이다. a 태그로 특정 페이지로 이동하는 내용에 대해서 title을 이용하여 새 창 열림인지 현재 페이지 열림인지를 명확하게 구분해주어야 한다. 화면을 가리는 레이어 팝업의 경우 최 상단에 마크업한다.
콘텐츠의 선형화 항목은 콘텐츠가 논리적인 순서로 제공되는지 검토하는 항목이다. 탭 콘텐츠의 경우 제목-내용-제목-내용 순서로 마크업하거나 해당 내용에 대한 제목을 숨김 처리로 제공한다.
더보기가 존재하는 콘텐츠의 경우 제목-내용-더보기 순서로 마크업한다.
표의 구성의 항목은 표의 내용이 시각 장애인에게 그대로 전달 될 수 있는지 검토하는 항목이다. 표의 속성에서 caption에 표의 요약된 내용을 제공하며 제목 셀이 제공 되는 경우 th의 내용이 정확하게 전달되어야 한다.
레이블 제공의 항목은 인풋박스가 제공 될 경우 이 인풋박스가 어떤 항목을 요구하는지 검토하는 항목이다. lable 태그에 해당하는 내용을 동일하게 작성하며 label for의 항목도 명확하게 제시되어야 한다.
오류 정정 항목은 화면 낭독 프로그램을 이용하는 (시각 장애)사용자의 경우, 입력 오류가 발생 했을때 무엇이 잘못 되었는지 알 수가 없어서 입력 전체를 포기할 가능성이 있다. 그러므로 입력 오류가 발생할 경우 이를 쉽게 찾아서 정정할 수 있는 방법을 제공해야 한다. 사용자가 잘 못 입력 했을 때 본문에 오류 메세지를 표시하거나 오류 메시지를 스크립트 alert으로 제공하여야 한다.
마크업 오류 방지 항목은 html상에서 body가 열렸다가 </body>로 잘 닫혀있는지 검토하는 항목이다. 이 항목은 일반적으로 마크업 시에 체크하는 부분이므로 심사에서 탈락률이 가장 낮은 항목이다.
간단하게 웹 접근성의 심사 종류와 항목별 요구사항 및 대표 오류 사례를 작성했다. 이외에도 다양한 케이스가 존재하며 웹접근성의 검토 기준은 변경되므로 가볍게 참고하며 자세한 사항은 웹 접근성 심사시에 문의가능하다.
'UIUX디자인' 카테고리의 다른 글
| 2023 피그마 컨피그 및 피그마 업데이트 사항 (0) | 2023.07.09 |
|---|---|
| [웹접근성] 웹접근성 심사 기준 (0) | 2023.04.09 |
