접근성 높은 웹 구축을 위한 초보자 가이드

번역웹 접근성
원문
Chakra UI - The beginners guide to building an accessible web

웹 접근성은 모든 사람이 사용할 수 있는 웹사이트와 웹 애플리케이션을 만드는 방법입니다.

접근성(a11y)은 수백만 명의 사용자에게 제한 없는 접근을 제공하기 때문에 웹 개발에서 필수적인 부분입니다. 안타깝게도 많은 개발자가 웹 접근성에 필요한 조치를 취하지 않고 간과하는 경우가 많습니다. 최근 보고서에 따르면 상위 웹사이트의 98%가 완전한 접근성 환경을 제공하지 않는 것으로 나타났습니다.

웹 앱이나 웹사이트를 구축한다면 장애, 연령, 신체적 상황에 관계없이 모든 사람이 사용할 수 있기를 원할 것입니다. 접근성은 나중에 프로덕션에 임박해서 고려하는 것이 아니라, 개발자가 개발을 시작할 때부터 포함시켜야 합니다.

다행히도 접근성을 구현하는 것은 그리 어렵지 않습니다. 특정 사람들이 사이트를 거의 사용할 수 없게 만드는 문제를 파악한 후에는 해당 문제를 방지하고 모든 사람이 사이트를 사용할 수 있도록 조치를 취할 수 있습니다.

웹 접근성이란 무엇인가요?

웹 접근성은 장애나 제한이 있는 사용자를 포함하여 모든 사람이 웹사이트와 웹 애플리케이션을 사용할 수 있도록 만드는 방법입니다.

전 세계 인구의 약 15%가 어떤 형태로든 장애를 안고 살아가고 있습니다. 스크린 리더와 같은 보조 기술(AT, Assistive Technology)과 함께 작동하도록 사이트를 개발하지 않으면, 10억 명에 가까운 사람들이 여러분의 콘텐츠에 참여하지 못하게 됩니다.

접근성 높은 웹사이트를 구축하면 웹 배제의 벽을 허물고 모든 사용자에게 웹에 대한 동등한 접근권을 부여할 수 있습니다.

웹 접근성이 필요한 이유

접근성 높은 웹을 구축하는 것이 중요한 이유는 다음과 같습니다.

  1. 사용성 향상 - 사용성은 효과적이고 효율적이며 만족스러운 제품을 만드는 것과 관련이 있습니다. 웹 접근성을 높이면 자동으로 제한이 사라지며 장애와 상관없이 모든 사람이 웹을 사용할 수 있습니다.

  2. 법 - 일부 정부 정책과 법률에서는 웹 접근성 준수를 의무화하고 있습니다. 이러한 법을 준수하지 않을 경우, 도미노 피자의 사례와 같이 회사에 대한 법적 조치가 취해질 수 있습니다. 따라서 소송과 고소의 위험을 방지하려면 웹사이트나 앱의 접근성을 높이는 것이 가장 좋습니다.

  3. 옳은 일 - 결국 접근성은 옳은 일입니다. 웹을 사용하고자 하는 모든 사람에게 포용성과 다양성을 보여주고 싶을 것입니다. 접근성 높은 웹을 구축한다는 것은 신체적 또는 인지적 능력에 관계없이 사이트를 이용하고자 하는 모든 사람에게 문을 개방한다는 의미입니다.

웹 접근성 표준

웹 접근성 표준을 설정하는 두 가지 주요 지침은 다음과 같습니다.

1. 웹 콘텐츠 접근성 지침 (WCAG 2.1)

W3C(World Wide Web Consortium)에서 관리하는 WAI(Web Accessibility Initiative)에서 이 지침을 발표했습니다. 개발자가 장애인이 더 쉽게 접근할 수 있는 콘텐츠를 만드는 방법을 설명하는 기본 규칙입니다.

WCAG는 POUR로 알려진 네 가지 원칙을 기반으로 합니다.

  1. 인식 가능(Perceivable) - 모든 정보 및 사용자 인터페이스 구성 요소는 사용자가 인지할 수 있는 방식으로 제공되어야 합니다.

  2. 작동 가능(Operable) - 사용자 인터페이스(UI) 구성 요소와 탐색이 작동 가능해야 합니다.

  3. 이해 가능(Understandable) - 모든 정보 및 사용자 인터페이스의 작동은 사용자가 이해할 수 있어야 합니다.

  4. 견고함(Robust) - 콘텐츠는 많은 사용자와 보조 기술이 해석할 수 있을 만큼 견고해야 합니다.

2. Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA)

W3C WAI에서 운영하는 Accessible Rich Internet Applications Working Group(ARIA WG)에서 이러한 지침을 마련했습니다. WAI-RAI는 보다 복잡한 웹 앱과 접근 가능한 웹 구성 요소를 구축하기 위한 모범 사례에 중점을 두고 있으며 다음을 제공합니다.

접근성 높은 웹 구축을 위한 10가지 모범 사례

위의 원칙과 지침에 따라 접근성 높은 웹사이트와 웹 앱을 구축하기 위해 구현할 수 있는 몇 가지 실행 항목과 모범 사례를 살펴보겠습니다.

1. 의미 있는 HTML 작성하기

HTML은 의미 있는(semantic) 요소와 의미 없는(non-semantic) 요소로 구성됩니다. 의미 있는 HTML은 태그 내의 콘텐츠 유형을 지정하기 때문에 올바른 웹 접근성 관행의 기초가 됩니다.

의미 있는 HTML 태그의 예로는 <button> 태그가 있습니다. 이 태그는 버튼과 사용자가 수행해야 하는 작업을 전달하기 때문입니다. <div> 태그는 어떨까요? 여러분의 추측이 맞습니다! <div> 태그는 래핑 역할만 하고 포함된 콘텐츠의 의미를 전달하지 않기 때문에 의미 없는 HTML입니다.

스크린 리더와 같은 보조 기술은 의미 있는 HTML을 사용하여 각 요소를 사용자에게 가장 잘 해석하는 방법을 파악합니다. 따라서 제품을 개발할 때는 의미 있는 HTML을 작성하도록 노력해야 합니다.

의미 있는 HTML

(출처: SoftTeco)

2. 이미지에 ALT 텍스트 사용하기

이미지를 사용하면 콘텐츠를 더욱 매력적이고 이해하기 쉽게 만듭니다. 웹에서 이미지를 볼 수 없는 시각 장애가 있는 웹 사용자의 경우, ALT(대체) 텍스트를 통해 해당 이미지를 이해할 수 있습니다.

ALT는 이미지에 설명 텍스트를 제공합니다. 이러한 ALT 텍스트를 통해 스크린 리더는 사용자에게 이미지가 어떤 것인지 알려줄 수 있습니다. ALT 텍스트가 없으면 스크린 리더는 이미지 설명이 아니라 <image>라고만 말합니다.

다음은 하단의 이미지에 대한 ALT 텍스트 예시입니다.

<img src='/images/towerbridge.jpg' alt='새벽의 타워 브리지' />

새벽의 타워 브리지

(출처: Flickr)

3. 버튼에 div 사용하지 않기

개발자라면 <div>의 스타일을 <button>과 똑같이 보이도록 만들 수 있을 것입니다.

div를 버튼으로 사용하지 않기

(버튼으로 스타일링된 div와 버튼의 시각적 표현)

이 두 요소는 비슷해 보일 수 있지만, 스크린 리더에 동일한 내용을 전달하지는 않습니다. 첫 번째 경우, 스크린 리더가 텍스트 콘텐츠만 읽어주므로 사용자는 다운로드 버튼을 클릭해야 한다는 사실을 인지하지 못합니다. 두 번째 경우, 스크린 리더는 사용자가 버튼을 클릭하여 다운로드해야 한다고 알려줍니다.

어떤 사람들은 'role=button'을 할당하면 div가 버튼이 된다고 주장할 수 있습니다. 그러나 이 접근 방식은 onClick 처리기, preventDefault 등과 같은 많은 추가 기능이 필요하므로 나쁜 습관입니다.

절대로 <div>를 사용하여 <button>과 기타 대화형 요소를 구축하지 마세요. <div>와 <span>은 블록 및 인라인 수준에서 요소를 그룹화하기 위한 일반적인 상자로 사용하세요.

4. 제목을 올바르게 사용하기

제목은 텍스트를 크고 굵게 보이게 하는 것 이상의 역할을 합니다. 제목은 웹 페이지에 견고한 구조를 제공합니다. 독자가 웹페이지의 다양한 구역을 빠르게 훑어보고 각 구역의 내용을 파악할 수 있도록 도와주는 안내서라고 생각하면 됩니다.

좋은 제목 구조는 <h1>에서 <h6> 태그를 사용하여 접근성과 좋은 사용자 경험을 위해 웹 콘텐츠를 구성합니다.

HTML 제목 구조

(HTML 제목 구조)

적절한 제목이 없으면 시각 장애가 있는 사용자는 페이지 구역을 빠르게 확인할 수 없으며 정보를 얻기 위해 전체 웹 페이지를 읽어야 합니다. 그러나 적절한 제목 구조를 사용하면 스크린 리더가 페이지의 레이아웃을 소리 내어 읽을 수 있으므로, 사용자가 한 제목에서 다른 제목으로 빠르게 이동할 수 있습니다.

기본 원칙은 글꼴 크기를 설정하거나 시각적 스타일을 지정하기 위해 제목을 사용하지 않는 것입니다. 예를 들어 큰 글꼴 크기가 필요하다고 해서 <h2> 태그를 사용하는 것이 이에 해당합니다. 이렇게 하면 HTML 구조가 나빠지고 보조 기술 사용자에게 전반적으로 좋지 않은 사용자 경험을 제공할 수 있습니다. 간단히 말하자면 스타일링에는 CSS를 사용하세요.

5. 키보드 탐색 지원하기

모든 사용자가 트랙패드나 마우스를 사용하여 사이트 페이지를 탐색하는 것은 아닙니다. 운동 장애와 상관없이 많은 사용자가 키보드를 사용하여 탐색합니다.

개발자는 키보드 접근성을 위해 다음 사항을 숙지해야 합니다.

다음을 통해 사이트의 접근성을 확인할 수 있습니다.

  1. 브라우저의 주소 표시줄에 커서를 놓습니다.
  2. 탭을 누르기 시작합니다.
  3. 모든 링크나 버튼을 탐색할 수 있는지 확인합니다.

6. 충분한 색상 대비 제공하기

색상 대비는 가장 어두운 색상과 가장 밝은 색상의 밝기 차이를 나타냅니다. 배경과 텍스트 간의 색상 대비가 낮으면 색맹과 같은 시각 장애가 있는 사용자가 페이지의 콘텐츠를 읽는 데 어려움을 겪을 수 있습니다. WCAG에서는 본문 텍스트(글꼴 크기가 18px 이하인 텍스트)와 배경의 경우 색상 대비가 4.5:1 이상이어야 한다고 표준으로 권고하고 있습니다.

WCAG 지침에서는 읽기 쉬운 인터페이스를 디자인하기 위해 다음과 같은 명암비를 권장합니다.

WCAG 색상 대비 표준

웹 개발자는 웹 페이지를 구축하기 전에 접근성 표준에 따라 색상 대비를 검증해야 합니다. 색상 대비가 좋으면 모든 사용자가 사이트의 텍스트 요소를 쉽게 읽을 수 있습니다.

색상 대비가 좋지 않은 경우와 좋은 경우의 예

(색상 대비가 좋지 않은 경우와 좋은 경우의 예)

7. 텍스트 블록 내의 링크에 밑줄 긋기

링크 접근성은 쉽게 무시되지만 접근성의 필수 요소입니다. 많은 사이트에서 링크는 색상으로만 텍스트와 구분되기 때문에 색맹 사용자가 식별하기 어렵습니다.

접근 가능한 링크를 만들 때, 텍스트 블록 내에서 링크를 알리거나 구분하기 위해 색상만 사용하지 마세요. 표준에 따라 WCAG2.1에서는 링크에도 밑줄을 그을 것을 권장합니다.

링크에 밑줄 긋기

(링크 간 비교)

8. ARIA 랜드마크 사용하기

이전 버전의 HTML에는 메뉴와 같은 일부 UI 위젯을 의미 있게 설명하는 일부 태그가 없었습니다. 이 격차를 해소하기 위해 개발자는 <div> 태그를 사용하여 위젯을 만들어야 했습니다.

이러한 위젯은 시각적으로는 정상적으로 보였지만, 코드가 충분한 정보를 제공하지 않아 보조 기술은 이를 적절하게 해석할 수 없었습니다. <div> 태그는 의미 없는 HTML이기 때문입니다. ARIA는 HTML이 처리할 수 없는 접근성 문제를 해결하기 위해 도입되었습니다. WAI-ARIA라고도 알려진 ARIA는 Web Accessibility Initiative - Accessible Rich Internet Applications의 약자입니다.

정의에 따르면 ARIA는 W3C 명세서입니다. ARIA는 HTML 속성을 사용하여 보조 기술에 추가 정보를 제공하여 순수 HTML에 대한 접근성을 향상시킵니다. ARIA는 스크린 리더를 위한 추가 설명 계층만 제공하며 요소가 표시되는 방식에는 영향을 미치지 않는다는 점에 유의해야 합니다.

ARIA 속성에는 크게 두 가지 범주가 있습니다. 역할 그리고 상태와 프로퍼티입니다.

3가지 인기 있는 ARIA 상태 및 프로퍼티는 aria-label, aria-labelledby, aria-describedby입니다.

ARIA는 HTML을 대체하는 것이 아니라 보완합니다.

9. 표에 캡션 추가하기

시각에 문제가 없는 사용자가 내용을 빠르게 파악할 수 있도록 표에 레이블을 붙이는 것과 같은 이유로, 시각 장애가 있는 사용자를 위해 표에 캡션을 추가해야 합니다. 캡션은 스크린 리더에게 표의 내용을 설명합니다.

표에 캡션을 추가하려면 <table> 태그를 연 직후에 <caption> 태그를 사용합니다.

예시:

<table>
  <caption>Computer Science students</caption>
  ...
</table>

이제 캡션을 통해 스크린 리더가 표의 정보를 이해하고 사용자에게 전달할 수 있습니다.

10. 양식에 <label> 태그 추가하기

<label> 태그가 없으면 보조 기술이 양식의 입력 필드를 이해하고 구분할 수 없습니다. 스크린 리더가 양식에 도달하면 즉시 레이블을 읽어주므로 시각 장애가 있는 사용자도 입력 양식의 유형을 알 수 있습니다.

<label>을 <input> 필드에 연결하는 방법에는 두 가지가 있습니다.

1. 레이블의 for 속성을 입력의 id 속성과 일치시키기

<label for="first-name">First Name</label>
  <input type="text" name="name" id="first-name">

2. <label> 태그 내에 <input>을 배치하기

 <label>
   First Name
   <input type="text" name="first-name">
 </label>

모든 사람을 포용하는 웹 구축하기

사이트에 접근성을 구현할 때 고려해야 할 요소는 많습니다. 하지만 위의 정보는 접근성 높은 웹을 구축하는 데 좋은 기초가 됩니다.

차크라 UI는 접근성의 중요성을 충분히 이해하고 있으며, 사이트와 앱에 접근성을 처음부터 구축하는 데 훨씬 더 많은 시간이 필요할 수 있다는 것을 알고 있습니다. 차크라 UI의 모든 컴포넌트는 완전히 접근 가능하므로 개발자는 접근성 높은 사이트를 빠르게 만들 수 있습니다. 차크라 UI의 컴포넌트 중 하나를 자유롭게 사용해 보세요.

접근성 높은 웹을 구축하는 것은 단순히 있으면 좋은 것이 아니며 모든 사람에게 우선순위가 되어야 합니다.