접근성 모범 사례

GitLab 프론트엔드 개발에서 시맨틱 HTML, ARIA, 키보드 탐색, 아이콘 처리 등 접근성 모범 사례를 설명합니다.

빠른 요약 # 잘못된 ARIA 보다는 ARIA를 쓰지 않는 편이 낫습니다 . 따라서 aria-* , role , tabindex 를 사용하기 전에 다음 권장 사항을 확인합니다. 접근성 시맨틱이 내장된 시맨틱 HTML을 사용하고, 가능하면 스크린 리더와 브라우저의 주요 조합 으로 테스트합니다. 상위 100만 개 홈페이지에 대한 WebAIM의 접근성 분석 에서는 "ARIA가 탐지 가능한 오류의 증가와 상관관계가 있다"는 결과가 나왔습니다. 오류 증가의 큰 원인은 ARIA의 오용일 가능성이 높으므로, 확신이 없다면 aria-* , role , tabindex 를 쓰지 말고 시맨틱 HTML을 사용합니다. macOS에서 키보드 탐색 활성화 # macOS는 기본적으로 tab 키를 Text boxes and lists only 로 제한합니다. 전체 키보드 탐색을 활성화하는 방법은 다음과 같습니다. System Preferences 를 엽니다. Keyboard 를 선택합니다. Shortcuts 탭을 엽니다. Use keyboard navigation to move focus between controls 설정을 활성화합니다. 브라우저별 키보드 탐색 활성화에 관한 자세한 내용은 a11yproject 에서 확인할 수 있습니다. 빠른 체크리스트 # text , textarea , select , checkbox , radio , file , toggle 입력에 접근 가능한 이름이 있습니다. 버튼 , 링크 , 이미지 에 설명적인 접근 가능한 이름이 있습니다. 아이콘 장식용이 아닌 아이콘 에 aria-label 이 있습니다. 클릭 가능한 아이콘 은 버튼입니다. 즉 <gl-icon /> 이 아니라 <gl-button icon="close" /> 를 사용합니다. 아이콘만 있는 버튼에 aria-label 이 있습니다. 인터랙티브 요소를 Tab 키로 접근 할 수 있고 포커스 상태가 눈에 보입니다. 툴팁 이 있는 요소에 Tab 키로 포커스를 줄 수 있습니다. 불필요한 role , tabindex , aria-* 속성이 없는지 확인합니다. div 나 span 요소를 p , button , time 처럼 더 시맨틱한 HTML 요소 로 바꿀 수 있는지 확인합니다. 좋은 문서 구조 제공 # 제목은 스크린 리더 사용자가 콘텐츠를 탐색할 때 쓰는 주요 수단입니다 . 따라서 페이지의 제목 구조는 잘 짜인 목차처럼 이해할 수 있어야 합니다. 다음을 지킵니다. 페이지에 h1 요소는 하나만 둡니다. 제목 수준을 건너뛰지 않습니다. 제목 수준을 올바르게 중첩합니다. 스크린 리더를 위한 접근 가능한 이름 제공 # 접근 가능한 이름이 있는 마크업을 만들려면 다음을 지킵니다. 입력에는 연결된 label 이 있어야 합니다. 버튼과 링크에는 눈에 보이는 텍스트 가 있어야 하며, 콘텐츠가 없는 아이콘 버튼처럼 보이는 텍스트가 없으면 aria-label 이 있어야 합니다. 이미지에는 alt 속성 이 있어야 합니다. 차트에는 긴 설명과 짧은 설명이 모두 있어야 합니다 . fieldse