접근성

만든 것을 사람들이 쓸 수 있는 정도입니다. 장애가 있는 사람도 남들과 똑같이 쓸 수 있으면 접근성이 높습니다. 있다 없다로 갈리는 것이 아니라 정도로 재는 말입니다.

상세

건물 정문에 계단만 있다고 해 봅시다. 휠체어를 탄 사람은 그 건물에 못 들어갑니다. 문이 잠긴 것도 들어갈 자격이 없는 것도 아닙니다. 들어가는 길이 한 가지뿐이라 그 길을 못 밟는 사람이 생긴 것입니다.

접근성은 장애가 있거나 처한 상황이 제약된 사람도 똑같이 쓸 수 있는 정도입니다. 여기서 중요한 것은 정도라는 말입니다. 접근성이 있는 물건과 없는 물건으로 세상이 둘로 갈리지 않습니다. 같은 화면이 어떤 사람에게는 그럭저럭 쓸 만합니다. 어떤 사람에게는 아예 벽입니다. 그래서 접근성은 켰다 껐다 하는 기능이 아니라 재서 끌어올리는 대상입니다.

장애가 사람 안에만 있는 것도 아닙니다. 장애는 사람과 그 사람이 놓인 환경 사이에서 생깁니다. 눈이 멀쩡한 사람도 한낮의 햇빛 아래에서는 옅은 회색 글자를 못 읽습니다. 두 손이 멀쩡한 사람도 한 손에 짐을 들고 있으면 두 손가락으로 하는 조작을 못 합니다. 시끄러운 지하철에서는 누구나 소리를 못 듣습니다. 영구적인 장애와 일시적인 상황이 화면 앞에서는 같은 결과를 냅니다.

그래서 쓸 수 있음의 기준을 특정 기기나 특정 감각에 묶으면 안 됩니다. 화면을 눈으로 읽는 마우스 사용자 하나만 상정하면, 그 상정을 벗어난 사람은 전부 못 쓰는 사람이 됩니다. 접근성을 올리는 일은 대체로 같은 내용에 닿는 길을 하나 더 내는 일입니다. 그림에는 글로 된 설명을 붙입니다. 마우스로 하던 것은 키보드로도 되게 합니다. 소리로 알리던 것은 글자로도 알립니다.

다만 길을 하나 더 낸다는 것은 그 길도 함께 만들고 함께 고쳐 나가야 한다는 뜻입니다. 화면이 바뀌면 대체 텍스트도, 키보드 조작도, 글자 알림도 같이 손봐야 합니다. 길을 하나만 두는 것보다 만들 때도 고칠 때도 손이 더 갑니다.

배경

화면을 못 보는 사람에게 그림뿐인 화면은 아무 정보도 아닙니다. 버튼에 그려진 가위표가 닫기를 뜻한다는 것을 눈으로만 알 수 있게 만들어 두면, 그 화면은 눈으로 보는 사람만의 것이 됩니다. 손을 자유롭게 못 쓰는 사람에게 마우스로만 되는 조작은 벽입니다. 정확한 좌표를 찍어야 눌리는 것은 손이 떨리는 사람에게도 벽입니다.

그래서 내용과 그 내용을 보여주는 방식을 갈라 둘 필요가 생겼습니다. 내용이 화면 위의 픽셀에만 담겨 있으면 그 픽셀을 못 보는 쪽으로는 아무것도 못 넘어갑니다. 내용을 기계가 읽을 수 있는 형태로도 함께 적어 두면, 사람마다 다른 방식으로 같은 내용에 닿을 수 있습니다. MDN Web Docs(Mozilla Developer Network, 모질라 개발자 네트워크)는 W3C(World Wide Web Consortium, 월드와이드웹 컨소시엄)의 문장을 인용해 이렇게 적습니다. 웹은 근본적으로 하드웨어·소프트웨어·언어·위치·능력이 무엇이든 모든 사람에게 작동하도록 설계되었다는 것입니다. 웹이 이 목표를 만족할 때, 듣기·움직임·시각·인지 능력이 다양한 범위에 걸친 사람들이 그것에 접근할 수 있다고 이어 적습니다.

HTML Living Standard 는 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)의 표준 문서입니다. 여기에도 이미지의 대체물로 쓸 텍스트를 제공하는 요구사항이 따로 있습니다. 달리 명시된 경우를 빼면 alt 속성은 반드시 지정되어야 한다고 적습니다. 그 값은 비어 있으면 안 됩니다. 그 값은 이미지의 적절한 대체물이어야 합니다. 이름은 닿을 수 있음이라는 말이 그대로 굳은 것입니다.

예시

접근성이 실제로 나타나는 자리는 네 갈래로 갈립니다. 내용에 대체물을 붙이는 마크업, 배경과 글자 사이의 밝기 차를 수로 나타낸 대비율로 통과와 실패를 가르는 판정 수치, 마우스 없이 오가는 키보드 조작, 그리고 웹 밖의 플랫폼입니다.

alt 속성

HTML Living Standard 가 대체 텍스트가 붙은 이미지를 이렇게 적습니다.

<img src="small.jpg" alt="The wolf runs through the snow.">

src 는 그림 파일이 어디 있는지를 가리킵니다. alt 는 그 그림 자리에 대신 놓일 글을 정합니다. 같은 표준은 alt 에 대한 구체적인 요구사항이 그 이미지가 무엇을 나타내려는 것인지에 따라 달라진다고 덧붙입니다.

aria-label 속성

MDN Web Docs 가 ARIA(Accessible Rich Internet Applications, 접근 가능한 리치 인터넷 애플리케이션) 속성이 붙은 닫기 버튼을 이렇게 적습니다.

<button aria-label="Close">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg">
    <path d="m.967 14.217 5.8-5.906-5.765-5.89l3.094.26l5.783 5.888l14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162z" fill="black"/>
  </svg>
</button>

버튼 안에는 글자가 하나도 없습니다. 가위표 그림만 있습니다. aria-label 이 그 버튼의 이름을 Close 로 정합니다. svg 에 붙은 aria-hidden="true" 는 그 그림을 스크린리더가 훑는 목록에서 뺍니다 — 이름은 이미 버튼의 aria-label 이 정했으니 그림까지 다시 읽을 필요가 없습니다. focusable="false" 는 그 그림이 Tab 순서에 따로 끼어들지 않게 막습니다. MDN Web Docs 는 aria-label 속성이 요소의 이름으로 쓸 수 있는 문자열 값을 정의한다고 적습니다. 다만 그 요소의 역할(버튼·체크박스처럼 그 요소가 무엇으로 동작하는지를 나타내는 값)이 이름 붙이기를 금지하지 않는 한에서 그렇다고 못 박습니다.

대비율 4.5:1

접근성은 정도의 문제지만 판정에는 수치가 붙습니다. MDN Web Docs 는 WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침)의 1.4.3 최소 대비 항목을 이렇게 옮깁니다. 이 항목은 배경과 전경 내용 사이의 대비율(앞서 나온 그 판정 수치, MDN 은 명암 대비라고도 부릅니다)에 읽을 수 있음을 보장할 최소 수준을 두라고 권합니다.

텍스트와 그 배경            최소 4.5:1
제목이나 그냥 더 큰 텍스트    최소 3:1

같은 문서는 더 큰 텍스트를 최소 18pt, 또는 14pt 굵게로 정의한다고 적습니다.

tabindex 속성

MDN Web Docs 는 tabindex 전역 속성이 세 가지를 할 수 있게 한다고 적습니다. HTML 요소를 포커스(지금 입력을 받을 차례로 지정되는 상태) 가능하게 만드는 것, 그 요소를 순차적으로 포커스 가능하게 하거나 막는 것, 순차 포커스 내비게이션에서의 상대 순서를 정하는 것입니다. 순차 포커스는 보통 Tab 키로 일어납니다. 속성 이름도 거기서 왔습니다.

<div tabindex="0">Tabbable due to tabindex.</div>

원래 div 는 포커스를 받지 못합니다. tabindex="0" 이 그것을 Tab 키로 닿을 수 있게 만듭니다. 반대로 음수 값은 그 요소가 순차 키보드 내비게이션으로는 닿을 수 없다는 뜻입니다. 정확히 어떤 음수인지는 실제로는 중요하지 않습니다. 보통 tabindex="-1" 을 씁니다.

contentDescription 속성

웹 밖에서도 같은 일이 벌어집니다. Android 개발자 공식 문서는 공유 버튼을 이렇게 적습니다.

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(imageVector = Icons.Filled.Share, contentDescription = stringResource(R.string.label_share))
    }
}

Icons.Filled.Share 는 눈으로 보는 그림입니다. contentDescription 이 그 그림 대신 읽힐 설명을 정합니다. 같은 문서는 앱의 각 UI(User Interface, 사용자 인터페이스) 요소마다 그 요소의 목적을 적은 설명을 넣으라고 적습니다. 대부분의 경우 그 설명을 요소의 contentDescription 속성에 넣는다고 덧붙입니다.

여담

위키피디아의 「Curb cut effect」 항목은 커브컷 효과를 이렇게 적습니다. 장애인에게 친화적인 기능이 원래 설계 대상이었던 사람들보다 더 큰 집단에게 쓰이는 현상이라는 것입니다. 같은 항목은 인도의 일부를 이루는 작은 경사로인 커브컷이 특정 장소에서 휠체어 접근을 위해 처음 만들어졌지만 유모차나 수레나 짐가방을 미는 사람들에게도 환영받았다고 적습니다. 같은 항목은 다른 예로 듣는 사람들이 텔레비전 폐쇄 자막을 쓰는 것을 듭니다.

관련 항목

사용자가 대신 쓰는 보조 기술

스크린리더 · 화면 확대 · 점자 키보드 · 스위치 제어 · 음성 입력 · 대체 포인팅 장치 · 키보드 조작

보조 기술 제품 이름

JAWS · NVDA · VoiceOver · TalkBack · Narrator · Orca · ChromeVox · Dolphin Screen Reader

측정 대상

WCAG · 인식 가능 · 운용 가능 · 이해 가능 · 견고성 · 대비율

표시 방식

시맨틱 마크업 · 대체 텍스트 · alt 속성 · ARIA · aria-label · aria-hidden · role · 라이브 리전 · tabindex · 포커스 순서 · contentDescription

확인 방법

접근성 트리 · 자동 검사 · 사용자 테스트

이것을 뒷받침하는 표준과 사례

커브컷 효과 · 폐쇄 자막 · HTML Living Standard