널리에서 강의를 듣고 정리한 내용이다. 원래 아는것도 있었지만, 몰랐던 것들도 많았다.. 😭 정리한 내용을 바탕으로 내 프로젝트에 적용해볼 생각이다. 🔥
1. 적절한 대체 텍스트 제공
시각적으로 정보를 습득하기에 어려움을 겪는 사용자들은 스크린 리더로 해당 컨텐츠를 음성으로 듣기 때문에 텍스트가 아닌 콘텐츠(이미지 같은 요소)는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
<img>, <input> type이 image 이거나 <button> 인 경우 <map>의 area에도 대체텍스트가 존재한다면 alt 속성 넣어주어야 한다.
또한, 만약에 대체텍스트가 중요하지 않은 콘텐츠라면 alt에 ””(빈 값)을 넣어줘야한다. alt에 값을 넣어주지 않으면 파일명을 읽기 때문이다.
2. 자막 제공
멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다.
3. 자동 재생 금지
자동으로 동영상, 오디오, 음성, 배경 음악 등 콘텐츠가 제공하는 모든 소리는 자동으로 재생되지 않아야 한다.
배경음이나 동영상이 자동으로 재생되면 스크린 리더 음성과 겹치게 되면서 내용을 인식하기 어려워진다.
4. 키보드 사용 보장
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
예를 들어 드롭 다운 메뉴가 있다고 가정하면, 마우스 오버시에 서브 메뉴가 노출이 되느데 마우스를 사용하지 못하는 사용자는 서브 메뉴에 접근을 할 수 없게 된다. 그러므로 마우스 오버시 기능과 키보드 접근 시 기능이 동일하도록 구현해야한다.
5. 초점 이동
키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
6. 응답 시간 조절
시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
예를 들면 은행과 같이 보안을 위해 로그인 시간에 제한이 있는 경우가 있다. 반응 시간이 정해진 웹 콘텐츠를 사용자가 이용할 수 있도록 하기 위해서는 반응 시간이 완료되기 전에 이를 조절할 수 있는 수단을 제공해야 한다.
7. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍인 콘텐츠를 제공하지 않아야 한다.
8. 반복 영역 건너뛰기
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
특정 사이트에서 페이지 마다 반복되는 구간이 있다. (예를 들면 헤더, 네비바, 푸터 등) 스크린리더 사용자는 페이지가 로드 되거나 갱신될 때마다 모든 웹 페이지에 공통적인 부분을 다시 듣게된다. 이러한 불편함을 방지하기 위해 반복 되는 영역을 건너뛸수 있는 기능을 제공해야 한다.
9. 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공 해야한다.
페이지의 제목은 유일하고 서로 다르게 제공해야 한다. 그래야 이렇게 여러 페이지가 열려 있는 경우 비장애인들도 여기에 있는 제목만 보고 구분하여 빨리 선택할 수 있고, 스크린리더 사용자도 제목이 전부 똑같이 제공되어 있거나 내용과 다르게 제공되어 있으면 인식하기 힘들기 때문이다.
또한 뉴스 상세 페이지 제목도 마찬가지로 해당 뉴스에 대한 타이틀을 제목으로 제공해야 한다.
추가적으로 게시판의 경우에도 글읽기, 글보기, 목록 등 각각의 게시판 용도에 맞게 페이지 제목을 제공해야 한다.
- 페이지 제목 ⇒
<head><tilte>페이지 제목</title></head> - 프레임 =>
<iframe title="프레임 제목"/> - 콘텐츠 =>
<h1>~<h6>태그 사용
10. 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
만약에 다음 페이지를 넘어가는 a 태그 라면,
1. <a href=”#”>다음 콘텐츠 보기</a>
2. <a href=”#”><img src="btn_next.png" alt="다음 콘텐츠 보기"></a>
또한 ‘여기를 클릭하세요’ 나 ‘더보기’ 등 문맥을 알아야 이해할 수 있는 표현보다는 해당 주소의 목적을 함께 제공 하는 것이 좋다. (숨김처리로 보여주면 됨)
11. 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창 팝업 등)은 실행되지 않아야 한다.
사용자가 예측하지 못한 팝업은 방해 요인이 되기때문에 새 창이 열릴것을 사전에 알려주어야 한다.
blind로 새 창이라는 텍스트를 넣어주는것이 가장 확실한 해결 방안이다.
<a href=”…”>이용약관<span class=”blind”>새 창</span></a>
12. 레이블 제공
사용자 입력에는 대응하는 레이블을 제공해야 한다.
입력 서식에 초점이 갔을 때 스크린 리더가 편집창이라고만 읽어주기 때문에 어떠한 입력인지 설명을 제공해야 한다.
레이블과 입력 서식이 1:1로 매칭되어 있는 경우에는 레이블을 제공하고 label for 값과 input의 id 값을 동일하게 제공해야 한다. 이렇게 제공하게 되면 입력 서식 선택 시 초점이 가는 것은 물론이고 레이블을 선택해도 입력 서식에 초점이 가게 된다.
1:1 매칭이 아닌 경우에는 title로 입력 서식에 대한 설명을 제공하면 된다.
13. 오류 정정
입력 오류를 정정할 수 있는 방법을 제공해야 한다.
입력 서식 작성 시 오류가 발생하여 입력 내용이 모두 사라지는 경우 오류이며, 작성된 내용이 삭제되지 않고 오류가 있는 부분만 수정할 수 있도록 제공해야 한다. 오류가 발생하는 경우 사용자에게 오류가 발생한 원인을 알려 주어야 하며, 오류가 발생한 입력 서식으로 초점이 이동해야 한다.
14. 마크업 오류 방지
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
15. 웹 애플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
