Accessibility 창과 점검 목록

개발자 도구의 Accessibility 창은 고른 요소가 읽는 쪽에 어떻게 건네지는지, 곧 읽는 이름(Name)과 역할(Role)을 보여 줍니다. 검사기가 찾지 못하는 것은 이 창과 점검 목록 한 장으로 사람이 확인합니다.

이 단원에서 본 읽는 이름과 역할은 화면에 보이지 않아, 지금까지는 잰 값 칸으로만 봤습니다. 내 파일에서 같은 값을 읽는 곳이 이 창입니다. 검사기는 HTML을 규칙대로 썼는지는 보지만, alt 글이 그림에 맞는지 · 단추가 Tab으로 닿는지는 보지 않습니다. 이 레슨에서는 창을 여는 길, 검사기가 놓치는 것, 페이지마다 대어 볼 점검 목록 다섯 줄을 봅니다.

1Accessibility 창 — Name과 Role 읽기

창은 크롬 개발자 도구의 Elements 패널 안에 있습니다. 개발자 도구를 한국어로 보면 창 이름은 '접근성'입니다.

1. 내 파일을 브라우저로 열고 개발자 도구를 엽니다(개발자 도구로 요소 나무 보기에서 연 길).
2. Elements 패널의 요소 나무에서 볼 요소를 누릅니다.
3. 요소 나무 곁 칸에서 Styles 창 이름이 있는 줄의 Accessibility를 누릅니다. 줄에 없으면 그 줄 끝의 » 단추 안에 있습니다.
4. Computed properties 절의 Name 줄이 읽는 이름, Role 줄이 역할입니다.

<button
  class="delete"
  aria-label="삭제"
>
  ×
</button>

이 단추를 고르면 창의 Name 줄에 '삭제', Role 줄에 button이 보입니다. 이 과목의 잰 값 칸 '읽는 이름' · '역할'은 이 두 줄을 옮겨 적은 것입니다. Name은 자료에 따라 접근 가능한 이름이라고도 부릅니다. alt="" 그림처럼 읽는 쪽에 건네지 않는 요소를 고르면, 창에는 이름 대신 건네지 않았다는 줄(Accessibility node not exposed)과 그 까닭이 뜹니다.

2검사기가 보는 것, 사람이 보는 것

<img
  src="images/logo.svg"
  alt="사진"
  width="48"
  height="48"
/>
<p class="big">음료</p>

검사기는 이 조각에 Error도 Warning도 내지 않습니다. alt가 있으니 규칙은 지켰고, 그 글 '사진'이 그림에 맞는지는 검사기가 알 수 없습니다. 제목이어야 할 '음료'를 문단으로 쓴 것도 HTML 규칙으로는 틀리지 않았습니다.

그래서 검사기 Error 0은 점검의 시작이고, 나머지는 아래 점검 목록으로 사람이 봅니다.

3점검 목록 다섯 줄

어느 페이지에나 같은 다섯 줄을 대어 봅니다. 줄마다 그 규칙을 세운 레슨을 달았습니다.

점검은 다 만든 뒤 한 번이 아니라, 페이지에 그림 · 칸 · 단추를 하나 더할 때마다 그 줄만 바로 대어 봅니다.

예제

레시피 페이지의 한 조각입니다. 점검 목록 다섯 줄을 차례로 대어 걸리는 줄과 그 코드 줄을 먼저 적어 본 뒤 결과 화면을 펴 보세요.

<h1>김치볶음밥</h1>
<img
  src="images/kimchi.svg"
  alt="kimchi.svg"
  width="200"
  height="150"
/>
<label for="nick">이름</label>
<input id="nick" />
<div class="btn">후기 남기기</div>

자주 틀리는 곳

틀린 생각: 모양을 보고 단추인지 링크인지 점검하면 된다.

<a class="btn">후기 쓰기</a>
<button>담기</button>

.btn {
  background-color: #005bb5;
  color: #ffffff;
}

'후기 쓰기'는 단추처럼 칠해져 있어 눈으로 훑으면 지나칩니다. Accessibility 창의 Role은 generic이고, Tab을 누르면 건너뛰어 '담기'로 갑니다 — href가 없는 a입니다.

맞는 규칙: 누르는 것은 모양이 아니라 Role과 Tab으로 점검합니다(점검 목록 4 — 브라우저 규칙 3).

틀린 생각: 칸 옆에 글이 보이면 그 글이 칸의 이름이다.

<p>이름</p>
<input id="nick" />

화면에서는 '이름'이 칸 바로 위에 있지만, 그 글과 칸은 라벨로 짝을 짓지 않았습니다. 창의 Name이 비어, 칸에 들어간 사람은 무엇을 넣는 칸인지 듣지 못합니다.

맞는 규칙: 칸의 이름은 Name 줄로 확인합니다. 글을 이름으로 쓰려면 label의 for와 칸의 id로 짝을 짓습니다(점검 목록 2).

틀린 생각: 점검은 페이지를 다 만든 뒤에 한 번 하면 된다.

레시피 노트의 목록 페이지에는 카드가 여섯 장입니다. 다 만든 뒤 점검하다 카드 그림의 alt가 모두 틀린 것을 찾으면, 여섯 장을 다시 열어 고쳐야 합니다. 같은 틀린 꼴을 복사해 두었기 때문입니다.

맞는 규칙: 그림 · 칸 · 단추를 하나 더할 때마다 그 줄을 바로 점검합니다. 처음 한 장이 맞으면 복사한 다섯 장도 맞습니다.

확인 문제

1. 예제의 4번 줄을 alt="김치볶음밥 한 그릇"으로 고쳤습니다. 이제 점검 목록 다섯 줄 가운데 걸리는 줄을 모두 고르세요. 점검 목록의 번호를 다 쓰세요.

<h1>김치볶음밥</h1>
<img
  src="images/kimchi.svg"
  alt="김치볶음밥 한 그릇"
  width="200"
  height="150"
/>
<label for="nick">이름</label>
<input id="nick" />
<div class="btn">후기 남기기</div>

2. Accessibility 창에서 단추의 Name을 읽는 차례입니다. 기호를 차례로 쓰세요.

• ㉠ Accessibility 창의 Name 줄을 읽는다
• ㉡ 개발자 도구를 연다
• ㉢ Elements 패널의 요소 나무에서 단추를 누른다

3. 등산 동아리 공지입니다. 검사기는 Error도 Warning도 내지 않습니다. 점검 목록 다섯 줄 가운데 걸리는 줄의 번호와, 고칠 코드 줄을 쓰세요.

<h1>등산 동아리</h1>
<p class="title">이번 달 산행</p>
<p>북한산 둘레길</p>
<a href="join.html">가입</a>

.title {
  font-size: 24px;
  font-weight: 700;
}

<h1>등산 동아리</h1>
<h2>이번 달 산행</h2>
<p>북한산 둘레길</p>
<a href="join.html">가입</a>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. 개발자 도구에서 img · input · div를 차례로 골라 Accessibility 창의 Name과 Role을 읽고, 예제의 잰 값 칸과 같은지 견줘 봅니다. 그다음 div를 button으로 고쳐 저장 · 새로고침한 뒤 Role이 어떻게 바뀌는지 봅니다. 그림 파일은 아래에서 받아 images 폴더에 넣습니다.

• kimchi.svg 받기