키보드 테스트: 완료의 정의에 대한 A11y 향상

접근성은 항상 웹 개발에서 정의의 일부가 되는 데 어려움을 겪었습니다. 팀이 웹 콘텐츠를 빠른 속도로 공개하는 데 매우 집중하고 있기 때문에 접근성 테스트는 일반적으로 콘텐츠가 프로덕션에 출시된 후에 수행됩니다.

그러나 최근에는 완료의 정의에 접근성을 도입하기 시작한 추세가 있습니다! 그 추세는 자동화된 접근성 테스트입니다. 이러한 도구를 사용하면 개발 팀이 개발할 때 콘텐츠의 접근성을 확인할 수 있으며 일상적인 민첩한 프로세스 속도가 느려지지 않습니다.

팀은 axe-core와 같은 자동화 라이브러리를 사용하거나 접근성 규칙이 포함된 린터를 사용하거나 완전히 렌더링된 콘텐츠를 테스트하는 확장 프로그램을 실행하는 파이프라인 작업의 일부로 자동화 테스트를 포함하고 있습니다.

이것만큼 훌륭한 자동화는 접근성 문제의 하위 3분의 1만 포착하여 아직 수정되지 않은 주요 접근성 문제가 있는 콘텐츠에 대한 문을 열어줍니다. 그렇다면 개발 프로세스의 속도를 늦추지 않고 완료에 대한 정의를 강화하고 더 많은 문제를 포착하기 위해 무엇을 할 수 있을까요?

키보드 테스트 소개

팀에서 실행 가능한 모든 콘텐츠를 테스트하는 가장 일반적인 방법은 여전히 ​​마우스 사용입니다. 간단하게 들리겠지만 키보드로 웹 콘텐츠를 테스트하는 것은 모든 사람이 콘텐츠에 액세스할 수 있도록 하는 큰 단계입니다.

JavaScript 프레임워크의 세계와 전반적인 HTML 지식이 부족한 상황에서 키보드 테스트는 귀하와 귀하의 팀이 귀하의 사이트에서 실행 가능한 모든 항목을 계속 사용할 수 있는지 확인하는 데 필수적입니다.

예를 들어 <div>와 ARIA로 생성된 버튼을 살펴보겠습니다.

<div role="button" tabindex="0" class="btn" 
onClick="doSelect()">Select Item</div>

마우스를 사용하여 클릭하면 활성화되는 것을 볼 수 있으며 사용할 수 있습니다. 그게 다야. 키보드 테스트가 수행되지 않았기 때문에 Enter 또는 Space와 함께 작동하지 않고 포커스가 있을 때 버튼 자체에 포커스 표시기가 없다는 것을 놓칠 것입니다. 두 개의 주요 문제가 누락되었지만 쉽게 포착할 수 있습니다.

또 다른 예는 사용자 지정 콤보 상자 또는 선택 드롭다운입니다.

<div role=”combobox” aria-label="Select a Dog"
aria-expanded="true" aria-owns="owned_listbox"> <input 
type="text" aria-autocomplete="list" aria-controls="owned_listbox" aria-activedescendant="dog_list">
</div>
<ul role="listbox" id="dog_list">
<li role="option">German Sheperd</li>
<li role="option">Beagle</li>
<li role="option">Beagle</li>
</ul>

이것은 ARIA 패턴과 완벽하게 일치할 수 있지만 키보드 테스트 없이는 화살표 키로 작동하는지 또는 현재 Enter 또는 Space로 트리거가 작동하는지 알 수 없습니다.

키보드 테스트의 이점

키보드 테스트에는 다음과 같은 많은 이점이 있습니다.

누락된 초점 표시기 포착

콘텐츠가 엔터 또는 스페이스와 함께 완벽하게 작동하는지 확인

사용자 정의 콤보 상자 또는 선택 위젯이 화살표 키와 함께 작동하는지 확인합니다

.

수동 테스트를 위한 기반 구축 지원

배우기 쉽고 애자일 환경에 적용하기 쉬움

스크린 리더 테스트로 대대적인 전환

시행 방법

완료에 대한 정의의 일부로 키보드 테스트를 추가하는 마지막 방법은 개발자가 수행하도록 하는 방법입니다. 자동화된 접근성 테스트는 시행하기 쉽습니다. 개발자는 풀 요청을 할 때 접근성 검사의 증거를 제시해야 합니다.

키보드와 같은 수동 테스트의 경우 완료되었는지 확인할 수 있는 몇 가지 방법이 있습니다.

QA 팀에서 확인할 수 있습니다

.

코드 검토자도 확인할 수 있음

입력 및 공백을 확인하는 자동 회귀 테스트 작성

표시기가 있는 포커스를 확인하는 자동 회귀 스크립트를 작성합니다

.

요약해서 말하자면

키보드 테스트를 추가하는 것은 표준을 넘어서는 간단하고 효과적인 방법입니다. 접근성 자동화는 민첩한 환경에 매우 적합하지만 키보드 테스트도 마찬가지입니다. 이를 일상적인 개발에 추가하기만 하면 훨씬 더 많은 접근성 문제를 포착하고 키보드로 콘텐츠를 사용할 수 있으며 개발 프로세스가 느려지지 않도록 할 수 있습니다. 모두를 위한 완전한 승리!