접근성 모범 사례

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

빠른 요약 # 잘못된 ARIA보다 ARIA를 사용하지 않는 것이 낫다 는 원칙에 따라, aria-* , role , tabindex 를 사용하기 전에 다음 권장 사항을 먼저 검토하세요. 접근성 시맨틱이 내장된 시맨틱 HTML을 사용하고, 이상적으로는 스크린 리더와 브라우저의 관련 조합 으로 테스트하세요. WebAIM의 상위 100만 홈페이지 접근성 분석 에서 "ARIA는 더 높은 탐지 가능한 오류와 상관 관계가 있다"는 사실이 발견되었습니다. ARIA를 잘못 사용하면 오류가 크게 증가할 가능성이 높으므로, 확신이 없다면 aria-* , role , tabindex 를 사용하지 말고 시맨틱 HTML을 고수하세요. macOS에서 키보드 탐색 활성화 # 기본적으로 macOS는 탭 키를 텍스트 상자와 목록만 으로 제한합니다. 전체 키보드 탐색을 활성화하려면: 시스템 환경설정 을 엽니다. 키보드 를 선택합니다. 단축키 탭을 엽니다. 키보드 탐색으로 컨트롤 간 포커스 이동 설정을 활성화합니다. 브라우저별 키보드 탐색 활성화에 대한 자세한 내용은 a11yproject 에서 확인할 수 있습니다. 빠른 체크리스트 # 텍스트 , 텍스트 영역 , 선택 , 체크박스 , 라디오 , 파일 , 토글 입력에 접근 가능한 이름이 있습니다. 버튼 , 링크 , 이미지 에 설명적인 접근 가능한 이름이 있습니다. 아이콘 장식이 아닌 아이콘 에는 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 속성 이 있어야 합니다. 차트에 긴 설명과 짧은 설명이 모두 있어야 합니다. fieldset 의 첫 번째 자식으로 legend 가 있어야 합니다. figure 의 첫 번째 자식으로 figcaption 이 있어야 합니다. table 의 첫 번째 자식