2. 운용의 용이성

2. 운용의 용이성

2.1. 입력장치 접근성

2.1.1 [검사항목 8] 키보드 사용 보장

1. 마우스 오버로 확인하는 콘텐츠

contents.addEventListener('focus', function(){
	console.log("focus되었을 때 contents에 동작되기를 기대하는 함수");
})

• 드롭 다운 메뉴

• 롤링 콘텐츠

롤링 콘텐츠는 전체 항목이 접힌 상태로 리스트가 회전하는 듯 순차적으로 보여지는 콘텐츠를 의미합니다. 마찬가지로 마우스를 올렸을 때 전체 목록들이 보이게 구현되어 있다면 키보드의 접근으로도 동일한 인터렉션을 제공해 주어야 합니다.

 

• 레이어 툴팁 제공

툴팁이란 구성요소에 마우스를 올렸을 때 추가적인 레이어로 제공되는 부가정보로 이 역시 키보드가 접근했을 때에 동일하게 노출해 주어야 합니다.

 

1. 키보드 탭으로 접근 가능한 요소

• 상호작용을 하는 콘텐츠

<!-- 잘못된 예시 -->
<!-- button 기능을 하는 콘텐츠에 div 요소를 사용, 키보드 접근 불가 -->
<div id="button" onclick="button()">누르면 반응하는 버튼</div>

<!-- 올바른 예시 -->
<!-- button 기능을 하는 콘텐츠에 button 요소를 사용, 키보드 접근 가능 -->
<button type="submit">누르면 반응하는 버튼</button>

• <a>요소를 사용한 링크 이동

<!-- 잘못된 예시 -->
<a href="">바울랩 사이트 바로가기</a>

<!-- 올바른 예시 -->
<a href="https://paullab.co.kr">바울랩 사이트 바로가기</a>

1. 키보드 탐색이 특정 루프에 갇히는 경우

• 에디터 안에서의 탈출 단축키 제공

글을 작성하는 에디터 편집 영역 내에서 Tab은 들여쓰기 기능을 지원합니다. 이런 경우 키보드 사용자는 원하지 않게 에디터를 빠져나올 수 없는 상황을 마주할 수 있습니다. 그렇기 때문에 에디터 편집 영역을 탈출할 수 있는 단축키를 따로 제공해 주어야 합니다.

2.1.2 [검사항목 9] 초점 이동

1. 논리적인 순서 제공

• 기능적으로 논리적인 순서에 맞게 마크업

로그인 창을 예시로 보겠습니다. 사용자가 키보드로 로그인 모달에 접근했을 경우, ‘아이디 입력 - 비밀번호 입력 - 로그인 기억하기 체크박스 - 로그인 버튼’ 순으로 초점이 이동하기를 기대할 것입니다. ‘로그인 버튼’은 사용자가 할 수 있는 모든 입력을 완료한 뒤 제출되어야 하기 때문입니다. 그런데 만약 이런 상황에서 마크업 순서가 하단의 ‘잘못된 예시’처럼 되어있다면, 사용자는 ‘로그인 기억하기 체크박스’에 도달하기 위해 ‘로그인 버튼’을 지나 ‘로그인 기억하기 체크박스’를 입력한 뒤 다시 ‘로그인 버튼’으로 되돌아가야 하는 상황을 마주하게 됩니다. 이처럼 마크업 순서는 기능의 논리적인 순서를 고려하여 설계되어야 합니다.

<article>
  <h2>반갑습니다 :) 로그인해주세요!</h2>
	<input type="text" placeholder="아이디" required>
	<input type="password" placeholder="비밀번호" required>
	<!-- '로그인 기억하기'가 '로그인 버튼'보다 먼저 작성되어야합니다. -->
	<input type="checkbox" id="login-remember">
	<label for="login-remember">로그인 기억하기</label>
	<button type="submit">로그인</button>
</article>

 

 

• 시각적 순서가 아닌 논리적인 순서에 맞게 마크업

<!-- 잘못된 예시 -->
<section>
	<img scr="./이미지.jpg" alt="h2에 해당하는 이미지">
	<h2>제목</h2>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
</section>

<!-- 올바른 예시 -->
<!-- 논리 순서대로 마크업하고, 레이아웃은 CSS에서 설정 -->
// HTML
<section>
	<h2>제목</h2>
	<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit</p>
	<img scr="./이미지.jpg" alt="h2에 해당하는 이미지">
</section>

// CSS
section{
    display: flex;
}
section h2{
    order:1;
}

1. 초점 제공

• focus를 숨김 처리하지 않기

2.1.3 [검사항목 10] 조작 가능

1. 컨트롤의 최소 대각선 길이

• 컨트롤의 최소 대각선 길이는 적어도 6mm 이상이어야 합니다.



 

1. 컨트롤의 최소 여백

• 사용자 입력, 링크, 버튼 등 컨트롤 요소는 테두리 안으로 여백을 적어도 1mm 이상 배치해야 합니다.

• 근접한 컨트롤끼리 겹치거나 너무 가까워 선택하는 데에 불편함이 있지 않도록 간격을 만들어줘야 합니다.

2.2. 충분한 시간 제공

2.2.1 [검사 항목 11] 응답시간 조절

1. 시간제한 콘텐츠 사용 배제

• 자동 갱신되도록 구성된 콘텐츠

• 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠

• 자동적으로 스크롤되는 콘텐츠

• 짧은 기간 동안 나타났다 일정시간 후에 자동적으로 사라지는 대화상자(dialog box), 팝업 창, 레이어 팝업

• 일정시간 동안 사용하지 않으면 웹 페이지에 대한 접근이 강제로 차단되거나 사용할 수 없게 되는 콘텐츠

1. 예외 콘텐츠

<title>네이버 호텔 중간 페이지...예약사이트 가격은 1박 기준으로 보여질 수 있습니다.</title>

2.2.2 [검사 항목 12] 정지 기능 제공

1. 이동하거나 스크롤되는 콘텐츠 사용 배제

1. 이동하거나 스크롤되는 콘텐츠에 컨트롤 제공

2.3. 광과민성 발작 예방

2.3.1 [검사 항목 13] 깜빡임과 번쩍임 사용 제한

1. 번쩍이거나 깜빡이는 콘텐츠 사용 금지

1. 번쩍이거나 깜빡이는 콘텐츠 시간 제한

1. 준수 확인 방법 - 프로그램 PEAT 사용

2.4. 쉬운 네비게이션

2.4.1 [검사 항목 14] 반복 영역 건너뛰기

• 불필요한 탐색을 줄이기 위해 최대한 페이지 상단에 위치 시켜야 합니다.

• 건너뛰기 링크는 화면에 보이도록 지정해야 합니다. 화면 구성 상 가려야 한다면 Tab키를 눌렀을 때 화면에 나타나게 해야 합니다.

• 건너뛰기 링크는 한 페이지에 3개 이하로 제공하는 것이 좋고, 핵심이 되는 영역으로 이동하는 건너뛰기 링크를 가장 앞에 제공 해야 합니다.

• 건너뛰기 링크가 정확하게 이동하도록 링크와 이동 영역을 정확하게 연결시켜 주어야 합니다.

• 영역이 어떤 영역인지 파악 할 수 있도록 ‘본문 내용 바로 가기’, ’뉴스로 바로 가기’와 같이 지정해 주어야 합니다. ‘하단 메뉴로 이동하기’와 같은 제목은 하단이라는 방향이 어떤 영역을 가리키는지 알 수 없으므로 바람직하지 않습니다.

2.4.2 [검사 항목 15] 제목 제공

• 메인 페이지

• 검색 결과 페이지

검색 결과와 같은 서비스의 페이지는 콘텐츠의 이름과 서비스 이름을 모두 웹페이지의 제목으로 지정해야 합니다.

<title>'웹접근성'의 검색 결과 :네이버 사전</title>

• 뉴스 기사 페이지

• 하위 메뉴 페이지

선택된 메뉴와 서비스 이름을 모두 웹페이지의 제목으로 지정해야 합니다.

<title>IT/과학 홈:네이버 뉴스</title>

• 적절하지 않은 제목
특수 문자를 두 개 이상 사용한 경우
스크린 리더는 특수 문자도 읽기 때문에 불필요한 음성을 출력할 수 있습니다. 웹 페이지 제목에 특수 문자는 한 개로 제한 합니다.

<title>☆☆☆☆☆웹 접근성-운용의 용이성☆☆☆☆☆</title>

웹 페이지에 <title> 요소를 지정하지 않은 경우
웹페이지 제목으로 내용을 유추 할 수 없는 경우

• 오류 예시

<!-- title속성을 지정 하지 않은 경우-->
<iframe src ="http:// 새로운페이지로이동하는광고링크. com"></iframe>

<!-- title속성을 빈 값(" ")으로 지정한 경우 -->
<iframe src ="http:// 새로운페이지로이동하는광고링크. com" title = " "></iframe>

• 올바른 예시

<iframe src="http:// 새로운페이지로이동하는광고링크. com" title="광고"></iframe>

<iframe data-veta-preview="main_frame" title="빈 프레임" width="0" height="0" >

• 콘텐츠 블록 제목

같은 단계의 콘텐츠 블록은 일관성 있게 동일한 heading 요소로 지정해 주어야 합니다.

<h2>어학사전</h2>
...
<h3>국어사전 단어</h3>
...
<h3>영어사전 단어·숙어</h3>

• 오류사례

<!--제목을 순차적으로 제공하지 않은 코드-->
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

2.4.3 [검사 항목 16] 적절한 링크 텍스트

• 링크 텍스트를 목적지에 맞게 지정해야 합니다.



<a href="...">국어사전 더보기</a>

 

• IR기법으로 대체 텍스트를 제공해야 합니다.

<a href="..."><span class="blind">주요뉴스 더보기</span>더보기</a>

<a href=”#”><img src="book.png".jpg alt="웹 접근성에 접근하기 출판" /></a>

<a href="#" class="menu"><span class="blind">이전</span></a>
<a href="#" class="menu"><span class="blind">다음</span></a>