접근성은 스크린 리더를 사용하거나 키보드만으로 조작하는 사용자가 마우스를 쓰는 비장애 사용자와 동등한 경험을 얻도록 하는 데 중요합니다.

GitLab은 World Wide Web Consortium(W3C) Web Content Accessibility Guidelines 2.1의 AA 등급 준수를 목표로 합니다.

접근성 도구들의 연동 방식#

GitLab은 접근성 준수를 확보하기 위해 여러 단계에 걸친 포괄적 접근 방식을 사용합니다. 각 도구는 개발 워크플로에서 고유한 역할을 맡으며, 서로 맞물려 개발부터 프로덕션까지 전 구간을 다룹니다.

상황별 도구 선택#

개발 중에는 다음 순서를 따릅니다.

1. 린팅으로 시작합니다: 코드를 작성하는 동안 즉시 피드백을 받습니다.
2. Storybook 테스트를 추가합니다: 컴포넌트가 독립적으로 동작하는지 확인합니다.
3. 기능 테스트를 포함합니다: 전체 사용자 경험을 검증합니다.
4. 브라우저 확장 프로그램을 사용합니다: 특정 문제를 디버깅하거나 변경 사항을 검토합니다.

파일 유형별로는 다음과 같습니다.

• Vue/JS 파일: 린팅 + Storybook 테스트 + 기능 테스트
• HAML 파일: 기능 테스트 + 브라우저 확장 프로그램 (린팅은 지원되지 않습니다)
• 전체 페이지: 기능 테스트 + 브라우저 확장 프로그램 + 모니터링

새 컴포넌트#

1. 컴포넌트의 모든 상태를 포괄하는 Storybook 스토리를 작성합니다.
2. 통합 전에 Storybook 테스트를 통과하는지 확인합니다.
3. 키보드 탐색과 스크린 리더로 직접 테스트합니다.

새 기능#

1. 핵심적인 사용자 여정을 식별합니다.
2. 이러한 여정을 빠짐없이 다루는 기능 테스트를 작성합니다.
3. 중요한 UI 상태와 상호 작용 테스트에 집중합니다.

기존 코드#

1. 트래픽이 많은 영역과 핵심 사용자 흐름을 우선합니다.
2. 관련 기능을 작업하면서 테스트를 점진적으로 추가합니다.
3. 모니터링 데이터를 활용하여 주의가 필요한 영역을 찾습니다.

접근성 결함 린팅#

무료 VS Code 플러그인 axe Accessibility Linter로 접근성 결함에 대한 린팅을 활성화할 수 있습니다. VS Code를 사용하여 GitLab에 기여하는 모든 분께 권장합니다.

린팅을 활성화하는 절차는 다음과 같습니다.

1. VS Code 에디터를 엽니다.
2. Extensions로 이동합니다.
3. "axe Accessibility Linter" 를 검색하여 플러그인을 설치합니다.

GitLab 리포지터리에는 Pajamas Design System 컴포넌트를 네이티브 HTML 요소에 매핑하는 axe-linter.yml 구성이 포함되어 있어 린터의 커버리지를 크게 넓혀 줍니다.

Storybook 컴포넌트 테스트#

Storybook 테스트는 axe-playwright를 사용하여 Vue 컴포넌트의 접근성 위반을 자동으로 검사합니다.

컴포넌트 테스트는 Vue 나 JavaScript 파일이 변경될 때 CI에서 실행되며, 위반이 발견되면 병합을 차단합니다. 다만 Storybook 항목이 있는 컴포넌트만 테스트하며, 그 항목이 최신 상태여야 합니다.

기능 테스트#

axe-core-gem을 사용하는 기능 테스트는 전체 사용자 경험을 검증하므로 가장 포괄적인 접근성 테스트를 제공합니다.

프론트엔드 아키텍처 전반(HAML, Vue, JS)을 다루고 사용자 여정의 어느 단계에서든 검사할 수 있지만, 리소스 소모가 클 수 있습니다.

브라우저 확장 프로그램#

접근성 피드백을 즉시 받으려면 axe DevTools 브라우저 확장 프로그램을 사용합니다.

• axe for Firefox
• axe for Chrome

별도의 설정은 필요하지 않습니다. 전체 페이지 스캔 결과와 위반 사항을 해결하는 방법에 대한 자료를 함께 제공합니다. 하이라이트 기능은 문제가 되는 요소를 찾는 데 도움이 됩니다. 유료 프로 버전에서는 가이드 테스트와 컴포넌트별 스캔을 제공합니다.

접근성 모니터링#

axe 확장 프로그램을 적용한 Sitespeed 구성은 최소한의 설정으로 지속적인 접근성 모니터링을 제공합니다.

스테이징을 대상으로 한 최신 실행의 SiteSpeed 리포트는 GitLab Browser Performance Tool에서 확인할 수 있습니다.

자동화된 접근성 테스트#

구현에 대한 자세한 안내는 자동화된 테스트 가이드를 참고합니다.

• 접근성 Storybook 테스트
• 접근성 기능 테스트

접근성 모범 사례#

접근성 높은 웹 애플리케이션을 구현하려면 다음 모범 사례를 따릅니다.

• 간단 체크리스트
• 스크린 리더를 위한 접근 가능한 이름
• 아이콘
• ARIA 사용 시점

교육 및 학습#

다음 자료로 접근성 지식을 넓힐 수 있습니다.

• Introduction to digital accessibility 과정
• Accessible Web Development 과정

기타 리소스#

브라우저 접근성 트리 보기#

• Firefox DevTools 가이드
• Chrome DevTools 가이드

추가 학습 리소스#

• The A11Y Project - 종합 접근성 자료
• Awesome Accessibility - 선별된 접근성 자료
• Pajamas Design System Accessibility - GitLab 전용 안내