WCAG 2.1로 Drupal 웹사이트의 접근성 테스트

게시 됨: 2023-05-16

미국 성인 4명 중 1명이 장애*를 가지고 있다는 사실을 알고 계셨습니까? 액세스할 수 없는 웹 사이트의 영향을 받을 수 있는 엄청난 6,100만 명의 사람들입니다.

Drupal 개발자는 귀하의 사이트가 웹 콘텐츠 접근성 지침(WCAG)을 충족하도록 함으로써 차이를 만들 수 있는 힘이 있습니다. 이 블로그에서는 Drupal에서 WCAG 2.1 접근성을 테스트하기 위한 주요 기능과 모범 사례를 살펴보고 모든 사용자를 위한 웹사이트를 만들 수 있습니다.

접근성이란 무엇입니까(A11y)

접근성은 특히 장애가 있는 사람들과 관련하여 가능한 한 많은 사람들이 웹 사이트를 사용할 수 있도록 만드는 것을 의미합니다. A11y는 무엇을 의미합니까? A11y는 단순히 "접근성"이라는 단어를 의미하며 여기서 11은 "A"와 "Y" 사이에 있는 문자 수를 나타냅니다.

WCAG와 그 기원

WCAG는 Web Content Accessibility Guidelines의 약자입니다. 웹사이트 접근성에 대한 표준화된 벤치마크로 간주됩니다. W3C(World Wide Web Consortium)에서 만든 WCAG 지침은 모든 사람이 웹 사이트를 사용할 수 있도록 만드는 가장 쉽고 가장 좋은 방법입니다. 대부분의 정부 및 의료 기관은 웹 사이트가 접근성 법률(예: 섹션 508)을 준수하도록 하기 위해 WCAG 지침을 엄격히 준수합니다.

WCAG의 원칙

WCAG 준수를 채택하려는 경우 액세스 가능성의 네 가지 주요 원칙이 있습니다. 이는 Perceivable, Operable, Understandingable 및 Robust 를 나타내는 'POUR' 약어를 따릅니다.

인지 가능

간단히 말해서 콘텐츠는 사용자의 감각으로 감지할 수 있어야 합니다. 이것은 그들이 그들에게 제시되고 있는 정보를 인식할 수 있어야 한다는 것을 의미합니다. 여기에는 사용자가 오디오 콘텐츠를 명확하게 들을 수 있도록 하고 배경 소음과 구별할 수 있도록 하는 것이 포함됩니다.

실시 가능한

사용자가 웹사이트를 편안하게 탐색할 수 있고 인터페이스가 사용자 친화적인지 확인하는 것이 전부입니다. 사이트에 액세스할 수 없는 부분이나 사용자가 완료할 수 없는 단계가 없어야 합니다. 웹 콘텐츠를 디자인할 때 빠르게 움직이고 깜박이는 콘텐츠를 피해야 합니다. 키보드 없이 사이트를 쉽게 탐색할 수 있어야 하며 마우스를 사용할 수 없는 사용자가 사이트에 키보드로 액세스할 수 있어야 합니다.

이해할 수 있는

사용자는 그들에게 제시된 정보를 처리할 수 있어야 하며 또한 웹 사이트를 사용하고 탐색하는 방법을 이해할 수 있어야 합니다. 여기에는 페이지가 사용자에게 친숙하고 예상되는 방식으로 표시되도록 텍스트를 명확하고 읽기 쉽고 예측 가능하게 만드는 것이 포함됩니다.

건장한

이것은 기술이 발전할 수 있고 미래의 기술 발전과 함께 귀하의 웹 사이트를 구축할 수 있음을 강조합니다. 일반적으로 기술이 변화하고 발전하더라도 콘텐츠에 계속 액세스할 수 있어야 합니다. 또한 다양한 장애를 가진 광범위한 사용자가 이해해야 하며 여전히 이해하기 쉽습니다. 예를 들어 사이트는 최신 버전의 스크린 리더와 호환되도록 만들었습니다.

WCAG를 준수해야 하는 이유

다음은 WCAG 구현의 몇 가지 장점입니다.

접근 가능한 웹사이트는 브랜드에 대한 호감도를 높이고 검색 엔진 최적화를 개선합니다. 귀하의 사이트는 검색 엔진 결과에서 더 높은 순위를 차지할 것입니다.
액세스 가능한 웹 사이트는 광범위한 사람들이 귀하의 콘텐츠에 액세스하는 것을 막는 장벽을 효율적으로 제거하므로 더 큰 참여, 도달 및 유지를 가능하게 합니다.
WCAG가 웹사이트의 일부로 구현되면 표준으로 간주됩니다.

WCAG 2.0/2.1 성공 기준: 가장 광범위하게 구현됨

사이트의 모든 입력 필드에는 적절한 레이블이 있습니다.
장식적인 콘텐츠는 보조 기술로 무시할 수 있는 방식으로 구현됩니다. 예를 들어 스크린 리더에서 무시되는 장식 이미지
사전 녹음된 모든 오디오/비디오 콘텐츠에 캡션이 제공됩니다.
오디오 콘텐츠에 대한 수화 통역 제공
콘텐츠의 의미 있는 시퀀스(예: 모든 페이지의 제목이 순차적 순서로 배치됨)
사용자는 자동으로 비디오를 재생하기 위해 전체 시스템 볼륨과 독립적으로 오디오를 일시 중지 또는 중지하거나 오디오 볼륨을 제어할 수 있습니다.
텍스트와 이미지의 명암비는 4.5:1, 큰 글자와 이미지는 3:1이다. 장식용 콘텐츠나 로고 또는 브랜드 이름에는 명암비가 적용되지 않습니다.
배경 오디오가 낮거나 없습니다. 사전 녹음된 오디오/비디오에는 배경 소음이 포함되어 있지 않습니다.
콘텐츠의 모든 기능은 키보드 인터페이스를 통해 액세스할 수 있습니다. 키워드 트랩이 없습니다.
사용자가 콘텐츠를 읽고 사용할 수 있는 충분한 시간 제공
콘텐츠가 시간 기반인 경우 사용자는 시간 제약을 일시 중지하거나 조정할 수 있습니다.
자동 캐러셀과 같이 빠르게 움직이는 콘텐츠의 경우 사용자에게 일시중지 또는 중지 옵션이 표시됩니다.
인증된 사용자의 세션이 만료되면 사용자는 재인증 후 데이터 손실 없이 세션을 계속할 수 있습니다.
페이지 제목, 표제 및 레이블은 웹 페이지의 주제를 설명합니다.
키보드 포커스가 잘 보이고 강조 표시됨
포커스 가능한 구성 요소는 의미와 조작성을 나타내는 순서로 포커스를 받습니다.
웹페이지의 각 섹션에는 섹션 제목이 함께 표시됩니다.
장식용 이미지를 제외한 모든 이미지에는 의미 있는 대체 텍스트가 있습니다.
오디오, 비디오, 양식, 드롭다운 메뉴, 앵커 텍스트, URL 및 대체 텍스트는 키보드 및 화면 판독기에서 액세스할 수 있습니다.
콘텐츠 선명도는 페이지의 확대/축소 수준에 따라 조정됩니다. 최대 줌 레벨에서도 콘텐츠가 선명하게 보입니다.
도움말 컨텍스트가 포함된 머리글 및 바닥글 메뉴는 사이트 전체의 모든 페이지에서 사용할 수 있어야 합니다.
사이트에는 호버 및 포커스 상태가 적절하게 구현되어 있습니다.

스크린 리더

시각 장애가 있는 많은 사람들이 화면 돋보기와 화면 판독기를 사용합니다. 스크린 리더는 화면에 표시된 디지털 텍스트를 소리내어 읽어주는 소프트웨어입니다. 일부 스크린 리더의 예는 다음과 같습니다.

JAWS(Windows) 및 Dolphin Screen Reader(Windows)와 같은 유료 제품.
NVDA(Windows), ChromeVox(Chrome) 및 Orca(Linux)와 같은 프리웨어.
VoiceOver(macOS, iPadOS, iOS), 내레이터(Windows), ChromeVox(Chrome OS) 및 TalkBack(Android)과 같은 OS(운영 체제)에 내장된 소프트웨어.

세 가지 수준의 접근성

WCAG 2.1에는 3가지 수준의 성공 기준이 있습니다.

레벨 A: WCAG 2.0에 정의된 30가지 필수 성공 기준을 모두 충족합니다. 최소한 모든 웹사이트는 이 수준의 준수를 달성해야 합니다.
레벨 AA: 모든 레벨 A 성공 기준이 충족되고 추가로 28개의 접근성 성공 기준이 충족됩니다. 이 수준은 더 넓은 접근성 스펙트럼을 달성하며 종종 대부분의 개발 팀이 달성해야 하는 목표입니다.
레벨 AAA: 웹사이트는 28개의 추가 성공 기준을 포함하여 세 가지 수준의 성공 기준을 모두 충족해야 합니다. 이 수준은 일반적으로 정부 기관과 같은 특수 사이트용으로 예약되어 있습니다.

대부분의 WCAG 호환 사이트는 접근성 성공 기준 레벨 A 또는 AA에 해당합니다.

Drupal 웹사이트의 접근성 테스트

다음은 Drupal 웹사이트에 대한 접근성 테스트를 수행하기 위해 따라야 하는 단계입니다.

Google Chrome Lighthouse 감사를 실행하고 강조 표시된 접근성 문제 수정
Wave 도구 감사 실행
키보드 하이라이트 포커스와 페이지의 탭 순서를 수동으로 확인
필요한 스크린 리더 소프트웨어로 페이지의 유효성을 검사합니다. 예를 들어 보이스오버
와이드 데스크톱, 노트북, 탭, 모바일 기기 등 모든 해상도에서 사이트 접근성 검증
마크업 및 CSS용 W3C의 유효성 검사 도구를 사용하여 사이트 코드 유효성 검사
Kontrast와 같은 Chrome 확장 프로그램 또는 Color Contrast Analyzer와 같은 애플리케이션을 사용하여 사이트의 색상 대비를 검증하여 표준(4:5:1)을 충족하는지 확인합니다.

Drupal이 접근성 표준을 달성하는 데 도움이 되는 방법

웹 개발에는 웹 사이트가 제대로 작동하고 장애가 있는 사용자가 액세스할 수 있도록 접근성이 포함되어야 합니다. Drupal은 접근성에 대한 확고한 헌신으로 유명합니다. Drupal이 접근성을 높이는 방법과 웹 사이트를 보다 사용자 친화적으로 만들기 위해 제공하는 도구와 기능을 살펴보십시오.

1. Drupal에 접근성 구축

Drupal 개발 팀의 목표는 항상 가능한 한 많은 사용자가 사용할 수 있는 플랫폼을 구축하는 것이었습니다. 핵심 Drupal 플랫폼을 개발할 때 웹 콘텐츠 접근성 지침(WCAG) 2.1 레벨 AA 요구 사항을 따릅니다. 이는 시각, 청각, 신체, 언어, 인지 및 신경 시스템에 영향을 미치는 장애와 같은 다양한 장애가 Drupal 웹 사이트에 액세스할 수 있음을 나타냅니다.

2. 기본 접근성 기능

반응형 디자인 덕분에 다양한 화면 크기와 장치에 적응할 수 있는 Drupal의 기본 테마는 모바일 장치나 보조 기술을 사용하는 사람들이 사용할 수 있습니다.
Drupal은 화면 판독기 및 기타 보조 기술 도구가 웹 사이트 구조를 이해하는 데 도움이 되는 시맨틱 HTML 마크업을 생성합니다.
Drupal에는 사진에 대체 텍스트를 추가하는 필드가 포함되어 있어 시각 장애인이 웹사이트의 콘텐츠를 이해하는 데 도움이 됩니다.
Drupal은 마우스를 사용할 수 없는 사용자에게 중요한 키보드 탐색을 지원합니다.
사용하기 쉽고 보조 기술로 탐색할 수 있는 양식은 액세스 가능한 Drupal에서 생성됩니다.

3. Drupal은 접근성을 위한 플러그인 및 모듈을 제공합니다.

웹 사이트의 접근성을 개선하기 위해 Drupal은 배포할 수 있는 다양한 접근성 모듈 및 플러그인을 제공합니다. 잘 알려진 여러 접근성 모듈 및 플러그인은 다음과 같습니다.

Editoria11y Accessibility Checker: 이 모듈은 웹사이트의 접근성 문제를 검사하고 솔루션을 권장합니다.
CKEditor Accessibility Plugin: 이 애드온은 널리 사용되는 Drupal용 텍스트 편집기인 CKEditor의 접근성을 향상시킵니다.
올인원 접근성 위젯: 이 모듈에는 사용자가 웹 사이트의 텍스트 크기, 대비 및 기타 접근성 관련 설정을 변경할 수 있는 접근성 위젯이 포함되어 있습니다.
A11Y: 양식 도우미: 이 모듈은 모든 Drupal 웹 양식이 접근성 표준을 충족하도록 도와줍니다.
블록 ARIA 랜드마크 역할: 이 모듈은 사용자가 ARIA 랜드마크 역할 및/또는 ARIA 레이블을 블록에 할당할 수 있도록 블록 구성 양식에 추가 요소를 추가합니다.

4. 접근성을 위한 강력한 커뮤니티 지원

접근성에 전념하는 개발자와 디자이너는 Drupal 커뮤니티의 상당 부분을 구성합니다. 장애가 있는 사람들이 Drupal에 더 쉽게 접근할 수 있도록 커뮤니티에서 주도하는 노력은 Drupal Accessibility Group입니다. 이 그룹은 ADA 준수 Drupal 웹 사이트를 개발하기 위한 지침, 도구 및 모범 사례를 제공합니다.

참조:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

마지막 생각들

Drupal은 웹 사이트의 접근성을 개선하기 위해 다양한 기능, 도구 및 플러그인을 제공하는 효과적인 오픈 소스 콘텐츠 관리 시스템입니다. 접근성에 대한 헌신과 접근성 중심 커뮤니티의 강점으로 인해 Drupal은 장애가 있는 사람들이 사용하고 접근할 수 있는 웹 사이트를 구축하기 위한 환상적인 플랫폼입니다.
이 기사가 WCAG 2.1의 접근성 테스트에 필요한 통찰력을 제공하기를 바랍니다. 액세스 가능한 Drupal 웹 사이트를 처음부터 구축하고 싶거나 현재 사이트의 액세스 가능성을 높이고 싶습니까? 우리는 그것을 실현하고 싶습니다! 이야기하자!