티스토리 뷰
[웹 접근성] 웹 접근성 지침(12-16) 정지 기능 제공 / 깜빡임과 번쩍임 사용 제한 / 제목 제공 / 적절한 링크 텍스트
JINSUKUKU 2021. 10. 4. 00:42
✅ 12. 정지 기능 제공
- 자동으로 변경되는 콘텐츠는 움직임 제어할 수 있어야 한다
- 스크롤이나 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 한다
(1) 자동 변경 슬라이드
- 이전, 다음, 정지 기능을 제공해야 한다
- 정지 버튼이 없더라도 마우스 오버 시와 키보드 접근 시에 정지되도록 구현하면 정지 기능을 제공한 것으로 인정된다
(2) 자동 변경 콘텐츠
실시간 검색어처럼 자동 변경되는 콘텐츠에 이전, 다음, 정지 기능이 제공되지 않더라도 마우스 오버, 키보드 접근 시 모든 콘텐츠가 보이고 탐색 가능하다면 준수한다고 간주한다
- 비 장애인들도 이전 콘텐츠를 보고 싶었는데 넘어간 경우, 이를 제어할 수 있는 기능을 제공해야 한다
- 스크롤 및 자동 갱신되는 콘텐츠는 사용하지 않는 것이 좋고, 만약 사용 시에는 제어할 수 있는 기능을 제공해야 한다
- 자동으로 변경되는 콘텐츠를 제어 가능하도록 구현하면 이를 이용하기 어려운 사용자도 이용할 수 있다
✅ 13. 깜빡임과 번쩍임 사용 제한
1997년에 일본에서 포켓몬스터 전뇌 전사 폴리곤이 방영되었을 때, 이 영상으로 인해 어린아이들이 구토, 어지럼증 증세를 호소하여으며, 심한 경우 경련을 일으키거나 의식 상실 호흡 장애 등을 겪었다.
원인은 밝은 빛의 화면 점멸이 연속적으로 나오는 장면을 보고 일어난 '광과민성 발작'으로 오랜 시간 불규칙적으로 깜빡거리는 광고에 자극받아 생기는 간질 발작이다.
(1) 해결 방안
- 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10% 미만
- 시간을 3초 미만으로 제한
- 사전에 경고하고 중단 가능한 수단을 제공
- 깜빡거리고 번쩍거리는 영상은 비장애인들도 눈에 피로를 느낄 수 있기 때문에 가능하면 제공하지 않는 편을 권장한다
✅ 14.반복 영역 건너뛰기
- 웹 페이지에 공통적으로 들어있는 부분을 반복 영역이라 부른다
- 스크린 리더 사용자는 페이지가 로드되거나 갱신될 때마다 반복 영역을 다시 듣게 된다
- 키보드 사용자도 탭을 여러 번 반복해 접근해야 하는 불편을 방지하기 위해 반복 영역을 건너뛸 수 있는 기능 제공이 필요하다
(1) 반복 영역 건너뛰기 제공 방법
- 마크업 상 최상단에 위치
- 건너뛰기 링크가 페이지 내에 존재
- 키보드 접근 시 화면에 노출
- "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절
<body>
<div id="skip_nav">
<a href="#content">본문 바로 가기</a>
<a href="#menu">주 메뉴 바로 가기</a>
...
</div>
...
<div id="menu>
...
</body>- 반복 영역 건너뛰기는 마크업 상 최 상단에 위치해야 하며, 건너뛰기 링크가 페이지 내에 존재해야 한다
- 본문 바로 가기를 선택하면 content를 id로 가진 영역이 페이지 내에 있어야 한다
- 키보드 접근이 가능하고, 접근 시 화면이 보이도록 구현해야 한다
- 키보드 접근이 불가능하면 8번 키보드 접근 보장에도 영향을 미친다
- 반복 영역 건너뛰기 링크에 "하단 메뉴 바로 가기"와 같이 위치 정보를 제공하면 하단 인식이 어렵기 때문에 부적절하다
✅ 15. 제목 제공
- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다
- 제목 제공에 대한 사례를 통해 구체적으로 살펴보도록 하자
(1) 페이지 제목 제공
스크린리더 사용자는 제목과 내용이 다르거나 모두 동일한 제목을 사용하는 경우 인식이 힘들다
그렇기 때문에 페이지의 제목은 유일하고 서로 다르게 제공해야 한다. 제목이 서로 다르면, 비장애인들도 제목을 통해 구분하여 빠른 선택이 가능하다
<!DOCTYPE html>
<html lang="ko">
<head>
<title>로그인</title>
...- 페이지 제목은 해당 내용을 이해할 수 있도록 하위분류로 적절하게 제공한다
- 뉴스 상세페이지 제목도 마찬가지로 뉴스에 대한 타이틀을 제목으로 제공해야 한다
- 게시판의 경우에도 글 읽기, 글 보기, 목록 등 게시판 용도에 맞게 페이지 제목을 제공한다
- 각 페이지의 핵심 내용을 제목으로 사용한다
(2) 프레임 제목 제공
<iframe src="https://nv.veta.naver.com/fxshow?su=SU10079&nrefreshx=0" title="광고"></iframe>- 프레임이나 아이프레임에도 각 프레임을 설명하는 제목을 제공한다
- 광고를 아이프레임으로 제공하는 경우 위와 같이 title을 '광고'라고 제공한다
<iframe data-veta-preview="main_frame" title="빈 프레임" width="0" height="0" >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="initAd()" marginwidth="0" marginheight="0">
</body>
</html>
</iframe>
- 내용이 없는 빈 프레임의 경우에도 title을 아래와 같이 '빈 프레임' 또는 '내용 없음' 등으로 제공해야 한다
- 웹 페이지를 구성하는 모든 프레임에 제목을 제공하여 사용자가 프레임 제목을 통해 프레임 간 이동을 편리하게 할 수 있도록 한다
(3) 콘텐츠 제목 제공
<h3 class="an_tit">
<a href="http://newsstand.naver.com" class="an_ta" target="_blank">뉴스스탠드</a>
</h3>- 콘텐츠 블록에도 제목을 제공한다
- 뉴스스탠드 콘텐츠는 헤딩 태그로 콘텐츠의 제목을 '뉴스스탠드'라고 제공하는 것이 적절하다
- 뉴스스탠드와 동일한 depth의 콘텐츠는 동일한 헤딩 태그로 일관성 있는 제목을 사용해야 한다
- 이때, 제목을 숨김 처리할 때에는 "display:none"나 "visibility:hidden"속성은 스크린리더에서 읽어주지 않으니 주의하자
(4) 특수 기호 제한
- 연속된 특수기호를 사용하게 되면 스크린 리더에서 불필요한 음성을 반복해 출력하게 된다
- 시각적인 장식을 위해 반복되는 특수문자는 제공하지 않아야 하고, 기호는 1개까지만 사용 제한을 두고 있다
- 이는 페이지, 프레임, 콘텐츠 제목 모두 마찬가지이다
✅ 적절한 링크 텍스트
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다
- 링크의 용도나 목적지를 링크 텍스트만으로 또는 맥락을 통해 충분히 이해할 수 있도록 제공해야 한다
(1) 빈 링크
<a href="…" title=""></a>- 링크 텍스트를 제공하지 않는 경우, 스크린 리더 사용자는 무슨 링크인지 인지할 수 없다
- 링크가 크기를 갖지 않는 이상 어디에 초점이 있는지 알 수 없으므로, 위와 같이 빈 링크는 제거한다
(2) 독립적 이미지 링크
<a href="#">
<img src="btn_next.png" alt="다음 콘텐츠 보기">
</a>- 이미지를 독립적인 링크로 제공하는 경우, 링크 텍스트는 이미지의 대체 텍스트가 된다
- 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우가 오류 사례에 해당한다
- 따라서 위와 같이 적절한 링크 텍스트를 제공하도록 한다
(3) 독립적 배경 이미지 링크
<a href="#" class="link_next">다음 콘텐츠 보기</a>.link_next{
background-image: url('./img/icon_next.png');
}- 링크에 의미 있는 배경 이미지를 적용한 경우에도 대체 텍스트와 링크 텍스트를 적절히 제공하도록 한다
(4) 썸네일 링크
<a href="…">
<img src="thumb01.jpg" alt="">
<span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a>- 썸네일 이미지와 텍스트를 각각 링크로 구현하는 경우 링크 텍스트를 각각 제공해야 하므로 내용이 중복된다
- 이 경우 먼저 이미지와 텍스트를 하나의 링크로 묶어준다
- 그리고 링크 텍스트가 중복되지 않도록 이미지의 alt는 빈 값으로 제공한다
- 마지막으로 링크 텍스트는 마크업 요소로 제공하도록 한다
(5) 명확한 링크 제공
- 방향 지시로 링크 목적을 안내한 경우 스크린 리더 사용자는 링크를 클릭한 결과를 알 수 없다
- URL만 링크로 제공하는 것보다는 해당 주소의 목적을 함께 제공하는 것이 좋다
- "더 보기"나 "자세히 보기" 같은 경우에도 문맥상 알 수 있으나 어떤 콘텐츠의 더 보기인지 좀 더 명확하게 제공해야 한다
- 예를 들면 공지사항 더보기라고 공지사항 텍스트를 숨김 처리로 제공하는 편이 좋다
- 즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 한다