접근성

모두가 쓸 수 있는 화면

화면을 보는 방법은 하나가 아닙니다. 마우스 없이 키보드로만 다니는 사람, 화면을 읽어 주는 프로그램을 쓰는 사람, 색을 구분하기 어려운 사람, 글자를 키워 읽는 사람이 있습니다.

대부분은 이미 배운 것으로 해결됩니다. 1.7 의 뜻이 있는 태그, 1.5 의 alt, 1.6 의 라벨이 그것입니다. 이 단원에서는 그것들을 모아 확인하고 CSS 쪽에서 지켜야 할 것을 더합니다.

초점 표시를 지우지 마십시오

키보드로 Tab 을 누르면 요소를 옮겨 다닙니다. 그때 지금 어디에 있는지 보이지 않으면 화면을 쓸 수 없습니다.

<p>미리보기 안을 누른 뒤 Tab 을 눌러 보십시오</p>
<p>
  <button class="ok">표시가 보임</button>
  <button class="bad">표시를 지움</button>
</p>

/* 초점이 갔을 때 잘 보이게 합니다 */
.ok:focus-visible {
  outline: 3px solid #6e56cf;
  outline-offset: 2px;
}

/* 이렇게 하지 마십시오 — 키보드 사용자가 길을 잃습니다 */
.bad:focus { outline: none; }

outline: none 은 가장 흔한 접근성 실수입니다. 브라우저 기본 표시가 마음에 들지 않으면 지우지 말고 다른 표시로 바꾸십시오.

:focus 가 아니라 :focus-visible 을 쓰면 키보드로 왔을 때만 표시가 납니다. 마우스로 누를 때는 나오지 않아 보기에도 깔끔합니다.

색만으로 알리지 마십시오

남성 스무 명 가운데 한 명 정도가 색을 구분하기 어렵습니다. 색이 유일한 단서이면 그 사람들에게는 아무 정보가 없는 것과 같습니다.

/* 빨간 글씨 = 오류 */
.error { color: red; }

/* 링크를 색으로만 알림 */
a { text-decoration: none; }

/* 색 + 글자 + 기호 */
.error { color: #c92a2a; }
.error::before { content: "오류: "; }

/* 밑줄을 남깁니다 */
a { text-decoration: underline; }

글자와 배경의 명도 대비도 중요합니다. 본문은 4.5 대 1 이상이어야 합니다. 옅은 회색 글씨(#aaa)를 흰 바탕에 두면 그 기준에 한참 못 미칩니다.

화면 밖에 두되 읽히게

그림만 있는 단추에는 글자가 없어 화면 읽기 프로그램이 읽을 것이 없습니다. 글자를 두되 눈에는 보이지 않게 하는 방법이 있습니다.

/* 널리 쓰이는 규칙입니다. 그대로 복사해 두십시오. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

<button>
  <span class="sr-only">검색</span>
  <img src="search.svg" alt="">
</button>

display: none 을 쓰면 안 됩니다. 그것은 화면 읽기 프로그램에서도 사라집니다. 위 방법은 자리만 없애고 읽히기는 합니다.

확인 목록

키보드 확인은 지금 바로 할 수 있습니다. 마우스에서 손을 떼고 Tab 만으로 화면을 끝까지 다녀 보십시오. 갈 수 없는 자리나 어디 있는지 모르겠는 자리가 곧 고칠 자리입니다.

세 가지

• outline: none 만 적고 끝냅니다. 대신할 표시를 반드시 두십시오.
• div 에 클릭을 붙여 단추로 씁니다. 키보드로 갈 수 없고 Enter 로 눌리지도 않습니다. button 을 쓰면 그 모두가 저절로 됩니다.
• 옅은 회색 글씨를 씁니다. 보기에는 깔끔하지만 읽지 못하는 사람이 생깁니다. 본문은 4.5 대 1 이상입니다.

직접 해보기

<div class="btn">삭제</div>
<img src="chart.png">
<input placeholder="이름">

a:focus { outline: none; }

정리

• 초점 표시를 지우지 마십시오. 바꾸려면 다른 표시를 두십시오.
• 색만으로 알리지 말고 글자나 기호를 함께 두십시오.
• 본문 명도 대비는 4.5 대 1 이상입니다.
• 단추는 button 으로 만드십시오. 키보드 조작이 저절로 됩니다.
• Tab 만으로 화면을 다녀 보는 것이 가장 빠른 확인입니다.