액세스 가능 링크

부트 스트랩 내부에 몇 가지 입력 요소가 있습니다 panel-heading. 마우스를 사용하여 잘 작동하는 클릭 핸들러가 있지만 WCAG 준수를 위해 키보드를 사용해야합니다. 그들이 클릭 또는 스페이스 바에 응답하게하는 쉬운 방법이 있습니까/입력 언론?액세스 가능 링크

버튼에 태그를 변경하고 CSS
보이는 문서에를 keyDown 트리거를 추가 및 e.keyCode

모두의 확인과 버튼 스타일을 제거 : 내가 볼 수있는 유일한 방법은 하나입니다 해피면 친절하고 길다.

수정 : 구체적으로 기재하십시오. 헤더, 나는 다음과 같은 구조를 가지고 : 개별 <a> 태그의 요소들이 포커스를받을 수 있습니다 포장

------------------------------------------ 
- \/ Section Name  [15]  [On/Off] 
------------------------------------------

을하지만, 실제로 섹션 이름을 클릭하면 핸들러를 확장 트리거합니다.

출처

2017-12-20 Echilon

입력 요소는 기본적으로 탭 포커스를받을 수 있으며, 일반적으로 키보드 전용 사용자가 액세스 할 수있는 것으로 간주하기에 충분합니다. "click or spacebar/enter press?"를 사용하여 달성하려는 작업을 설명해 주시겠습니까? – Josh

세부 사항이 추가되었습니다. – Echilon

여기 조금 혼란 스럽네요. 부트 스트랩 패널에 대한 나의 이해는 그들이 정적 (v4에서도 사용되지 않음)이라는 것입니다. 여기서 설명하는 것은 부트 스트랩 아코디언 구성 요소와 비슷합니다. 그 중 하나를 사용하지 않는 이유가 있습니까? https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example – Josh

앵커 및 스팬 대신 <button> 요소를 사용하고 JavaScript를 통해 aria-expanded 특성을 토글 링하여이 문제를 해결했습니다.

출처

2018-01-03 15:33:55 Echilon

액세스 가능 링크

답변

관련 문제