접근성

GitLab 프론트엔드 개발에서 접근성을 보장하기 위한 도구, 테스트 방법, 모범 사례 및 교육 리소스를 설명합니다.

접근성은 스크린 리더를 사용하거나 키보드만으로 탐색하는 사용자가 시력이 있는 마우스 사용자와 동등한 경험을 할 수 있도록 보장하는 데 중요합니다. 저희는 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 컴포넌트를