InfoGrab DocsInfoGrab Docs

접근성

요약

접근성은 스크린 리더를 사용하거나 키보드만으로 탐색하는 사용자가 시력이 있는 마우스 사용자와 동등한 경험을 할 수 있도록 보장하는 데 중요합니다. 저희는 World Wide Web Consortium(W3C) 웹 콘텐츠 접근성 지침 2.1의 AA 수준을 준수하는 것을 목표로 합니다.

접근성은 스크린 리더를 사용하거나 키보드만으로 탐색하는 사용자가 시력이 있는 마우스 사용자와 동등한 경험을 할 수 있도록 보장하는 데 중요합니다.

저희는 World Wide Web Consortium(W3C) 웹 콘텐츠 접근성 지침 2.1의 AA 수준을 준수하는 것을 목표로 합니다.

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

GitLab은 접근성 준수를 보장하기 위해 포괄적인 다중 레벨 접근 방식을 사용합니다. 각 도구는 개발 워크플로에서 특정 목적을 수행하며, 개발부터 프로덕션까지 완전한 커버리지를 제공하기 위해 함께 동작합니다:

도구 사용 시점 커버리지 피드백 시점
린팅 코드 작성 중 JS, Vue, Markdown 파일 에디터에서 실시간
Storybook 테스트 컴포넌트 개발 독립적으로 실행되는 Vue 컴포넌트 컴포넌트 변경 시 CI 파이프라인 및 로컬 테스트
기능 테스트 기능 개발 완전한 사용자 여정(HAML + Vue + JS) CI 파이프라인 및 로컬 테스트
브라우저 확장 프로그램 코드 리뷰 및 디버깅 모든 페이지, 온디맨드 수동, 즉시
모니터링 프로덕션 감독 주요 애플리케이션 페이지 지속적인 모니터링

상황별 도구 선택#

개발 중:

  • 린팅으로 시작하세요: 코드 작성 중 즉각적인 피드백을 받을 수 있습니다.

  • Storybook 테스트 추가: 컴포넌트가 독립적으로 올바르게 동작하는지 확인합니다.

  • 기능 테스트 포함: 완전한 사용자 경험을 검증합니다.

  • 브라우저 확장 프로그램 사용: 특정 문제를 디버깅하거나 변경 사항을 검토합니다.

파일 유형별:

  • Vue/JS 파일: 린팅 + Storybook 테스트 + 기능 테스트

  • HAML 파일: 기능 테스트 + 브라우저 확장 프로그램(린팅 미지원)

  • 전체 페이지: 기능 테스트 + 브라우저 확장 프로그램 + 모니터링

새 컴포넌트#

  • 모든 컴포넌트 상태를 다루는 포괄적인 Storybook 스토리를 작성합니다.

  • 통합 전에 Storybook 테스트가 통과하는지 확인합니다.

  • 키보드 탐색과 스크린 리더로 수동 테스트합니다.

새 기능#

  • 미션 크리티컬 사용자 여정을 파악합니다.

  • 이러한 여정을 완전히 커버하는 기능 테스트를 작성합니다.

  • 중요한 UI 상태와 인터랙션 테스트에 집중합니다.

기존 코드#

  • 트래픽이 많은 영역과 중요한 사용자 흐름을 우선시합니다.

  • 관련 기능 작업 시 점진적으로 테스트를 추가합니다.

  • 모니터링 데이터를 활용하여 주의가 필요한 영역을 파악합니다.

접근성 결함 린팅#

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

린팅 활성화 방법:

  • VS Code 에디터를 엽니다.

  • Extensions(확장 프로그램)으로 이동합니다.

  • "axe Accessibility Linter"를 검색하여 플러그인을 설치합니다.

GitLab 리포지터리에는 axe-linter.yml 설정 파일이 포함되어 있으며, 이 파일은 Pajamas Design System 컴포넌트를 네이티브 HTML 요소에 매핑하여 린터 커버리지를 크게 향상시킵니다.

Storybook 컴포넌트 테스트#

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

컴포넌트 테스트는 Vue 또는 JavaScript 파일이 변경될 때마다 CI에서 실행되며, 위반 사항이 발견되면 머지를 차단합니다. 단, Storybook 항목이 있는 컴포넌트만 테스트되며 해당 항목이 최신 상태여야 합니다.

기능 테스트#

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

이 테스트는 GitLab의 모든 프론트엔드 아키텍처(HAML, Vue, JS)를 커버하며 사용자 여정의 모든 단계에서 검사를 수행할 수 있습니다. 다만 리소스를 많이 사용할 수 있습니다.

브라우저 확장 프로그램#

즉각적인 접근성 피드백을 위해 axe DevTools 브라우저 확장 프로그램을 사용하세요:

별도의 설정이 필요하지 않습니다. 위반 사항 수정 방법에 대한 리소스와 함께 전체 페이지 스캔을 제공합니다. 하이라이트 기능을 통해 문제가 있는 요소를 쉽게 파악할 수 있습니다. 유료 프로 버전은 가이드 테스트 및 컴포넌트별 스캔 기능을 제공합니다.

접근성 모니터링#

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

스테이징 환경에 대한 최신 실행 결과의 SiteSpeed 리포트는 GitLab Browser Performance Tool에서 확인할 수 있습니다.

자동화된 접근성 테스트#

자세한 구현 가이드는 자동화 테스트 가이드를 참조하세요:

접근성 모범 사례#

접근 가능한 웹 애플리케이션을 구현하기 위한 모범 사례를 따르세요:

교육 및 학습#

다음 리소스를 통해 접근성 지식을 향상시키세요:

기타 리소스#

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

추가 학습 리소스#

접근성

GitLab v19.2
원문 보기

요약

접근성은 스크린 리더를 사용하거나 키보드만으로 탐색하는 사용자가 시력이 있는 마우스 사용자와 동등한 경험을 할 수 있도록 보장하는 데 중요합니다. 저희는 World Wide Web Consortium(W3C) 웹 콘텐츠 접근성 지침 2.1의 AA 수준을 준수하는 것을 목표로 합니다.

접근성은 스크린 리더를 사용하거나 키보드만으로 탐색하는 사용자가 시력이 있는 마우스 사용자와 동등한 경험을 할 수 있도록 보장하는 데 중요합니다.

저희는 World Wide Web Consortium(W3C) 웹 콘텐츠 접근성 지침 2.1의 AA 수준을 준수하는 것을 목표로 합니다.

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

GitLab은 접근성 준수를 보장하기 위해 포괄적인 다중 레벨 접근 방식을 사용합니다. 각 도구는 개발 워크플로에서 특정 목적을 수행하며, 개발부터 프로덕션까지 완전한 커버리지를 제공하기 위해 함께 동작합니다:

도구 사용 시점 커버리지 피드백 시점
린팅 코드 작성 중 JS, Vue, Markdown 파일 에디터에서 실시간
Storybook 테스트 컴포넌트 개발 독립적으로 실행되는 Vue 컴포넌트 컴포넌트 변경 시 CI 파이프라인 및 로컬 테스트
기능 테스트 기능 개발 완전한 사용자 여정(HAML + Vue + JS) CI 파이프라인 및 로컬 테스트
브라우저 확장 프로그램 코드 리뷰 및 디버깅 모든 페이지, 온디맨드 수동, 즉시
모니터링 프로덕션 감독 주요 애플리케이션 페이지 지속적인 모니터링

상황별 도구 선택#

개발 중:

  • 린팅으로 시작하세요: 코드 작성 중 즉각적인 피드백을 받을 수 있습니다.

  • Storybook 테스트 추가: 컴포넌트가 독립적으로 올바르게 동작하는지 확인합니다.

  • 기능 테스트 포함: 완전한 사용자 경험을 검증합니다.

  • 브라우저 확장 프로그램 사용: 특정 문제를 디버깅하거나 변경 사항을 검토합니다.

파일 유형별:

  • Vue/JS 파일: 린팅 + Storybook 테스트 + 기능 테스트

  • HAML 파일: 기능 테스트 + 브라우저 확장 프로그램(린팅 미지원)

  • 전체 페이지: 기능 테스트 + 브라우저 확장 프로그램 + 모니터링

새 컴포넌트#

  • 모든 컴포넌트 상태를 다루는 포괄적인 Storybook 스토리를 작성합니다.

  • 통합 전에 Storybook 테스트가 통과하는지 확인합니다.

  • 키보드 탐색과 스크린 리더로 수동 테스트합니다.

새 기능#

  • 미션 크리티컬 사용자 여정을 파악합니다.

  • 이러한 여정을 완전히 커버하는 기능 테스트를 작성합니다.

  • 중요한 UI 상태와 인터랙션 테스트에 집중합니다.

기존 코드#

  • 트래픽이 많은 영역과 중요한 사용자 흐름을 우선시합니다.

  • 관련 기능 작업 시 점진적으로 테스트를 추가합니다.

  • 모니터링 데이터를 활용하여 주의가 필요한 영역을 파악합니다.

접근성 결함 린팅#

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

린팅 활성화 방법:

  • VS Code 에디터를 엽니다.

  • Extensions(확장 프로그램)으로 이동합니다.

  • "axe Accessibility Linter"를 검색하여 플러그인을 설치합니다.

GitLab 리포지터리에는 axe-linter.yml 설정 파일이 포함되어 있으며, 이 파일은 Pajamas Design System 컴포넌트를 네이티브 HTML 요소에 매핑하여 린터 커버리지를 크게 향상시킵니다.

Storybook 컴포넌트 테스트#

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

컴포넌트 테스트는 Vue 또는 JavaScript 파일이 변경될 때마다 CI에서 실행되며, 위반 사항이 발견되면 머지를 차단합니다. 단, Storybook 항목이 있는 컴포넌트만 테스트되며 해당 항목이 최신 상태여야 합니다.

기능 테스트#

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

이 테스트는 GitLab의 모든 프론트엔드 아키텍처(HAML, Vue, JS)를 커버하며 사용자 여정의 모든 단계에서 검사를 수행할 수 있습니다. 다만 리소스를 많이 사용할 수 있습니다.

브라우저 확장 프로그램#

즉각적인 접근성 피드백을 위해 axe DevTools 브라우저 확장 프로그램을 사용하세요:

별도의 설정이 필요하지 않습니다. 위반 사항 수정 방법에 대한 리소스와 함께 전체 페이지 스캔을 제공합니다. 하이라이트 기능을 통해 문제가 있는 요소를 쉽게 파악할 수 있습니다. 유료 프로 버전은 가이드 테스트 및 컴포넌트별 스캔 기능을 제공합니다.

접근성 모니터링#

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

스테이징 환경에 대한 최신 실행 결과의 SiteSpeed 리포트는 GitLab Browser Performance Tool에서 확인할 수 있습니다.

자동화된 접근성 테스트#

자세한 구현 가이드는 자동화 테스트 가이드를 참조하세요:

접근성 모범 사례#

접근 가능한 웹 애플리케이션을 구현하기 위한 모범 사례를 따르세요:

교육 및 학습#

다음 리소스를 통해 접근성 지식을 향상시키세요:

기타 리소스#

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

추가 학습 리소스#