부스트코스 웹 접근성 이해
1. 웹 접근성의 이해
2. 웹 접근성 지침
3. 웹 접근성 진단도구와 스크린 리더
📍13. 깜빡임과 번쩍임 사용 제한
✅광과민성 발작
- 1997년 일본에서 포켓몬스터 애니메이션의 특정 에피소드를 보고 750명의 어린이들이 구토, 어지럼증, 경련 등을 일으킴
- 이는 밝은 빛의 화면 점멸이 연속되는 장면을 보고 일어난 광과민성 발작 때문으로 밝혀짐
✅과도한 깜빡임과 번쩍임 방지
- 점멸 컨텐츠가 차지하는 면적이 화면 전체 면접의 10% 미만이 되게 조정
- 시간을 3초 미만으로 제한
- 사전에 경고하며, 중단 가능한 수단을 제공
✅PEAT
- 컨텐츠가 초당 3~50회 깜빡이는지를 확인할 수 있는 프로그램
Photosensitive Epilepsy Analysis Tool (PEAT) - Trace Research & Development Center
The Trace Center’s Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software. The evaluation used by PEAT is based on an analysis engine developed specifically
trace.umd.edu
📍14. 반복 영역 건너뛰기
✅콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다
- 예를 들면 페이지가 바뀔 때마다 GNB 부분을 스크린 리더가 계속 읽게 되는 경우가 있을 수 있다
- 이때, 마크업 최상단에 건너뛰기 링크를 제공한다
아래처럼 href에 컨텐츠 id값을 가진 a 엘리먼트를 배치하면 된다
<body>
<div id="skip_nav">
<a href="#content">본문 바로 가기</a>
<a href="#menu">주 메뉴 바로 가기</a>
…
<div id="content">
…
<div id="menu">
…
</body>
📍15. 제목 제공
✅제목은 유일하고 서로 다르게 제공해야 한다
- 페이지 내용과 다른 제목(<title>)은 스크린 리더 사용자의 혼란을 초래할 수 있음
✅<iframe> 의 제목 제공
- title 어트리뷰트에 제목을 제공해야 한다
- 광고인 경우 광고라고 입력
<iframe src="https://nv.veta.naver.com/fxshow?su=SU10079&nrefreshx=0" title="광고"></iframe>
- 내용이 없는 빈 프레임의 경우, title에 빈 프레임 또는 내용 없음 등을 입력
✅불필요한 특수문자 사용 제한
- 스크린 리더 사용자는 아래 title에 대해 검은 별표...검은 별표...검은 별표... 이렇게 불필요하게 계속 듣게 된다
- 따라서 시각적 장식을 위한 특수문자는 1개만 사용해야 한다
📍16. 적절한 링크 텍스트
아래 이미지에서
- 좌측 bad case) alt와 span 이 따로 존재해서 스크린 리더가 2번 읽고, 공간도 더 차지함
- 우측 good case) alt에 빈값을 전달하여 스크린 리더가 파일명을 읽지 않도록 하고, 아래에 span element로 설명을 대체
✅bad case
- 스크린 리더 사용자는 여기가 무엇을 나타내는지 모르기 때문에 명확한 목적지로 표현해줘야 함
- 예시
- 또한 URL만으로 링크를 제공하거나, 단순한 '더 보기' or '자세히 보기' 등도 주의해야 함
- 이 때, (공지사항) 더 보기 이렇게 공지사항 부분을 안보이게 처리하는 것도 방법이 될 수 있다
📍17. 기본 언어 표시
✅스크린 리더가 선언된 언어로 읽어준다
- 한국어
<html lang="ko">
- 페이지 중간에 다른 언어를 사용해야 한다면 lang 어트리뷰트를 삽입하면 된다
- 예시
