Keyboard Testing: The A11y Enhancement to Your Definition of Done

Accessibility has all the time had a troublesome time being part of the definition of executed in internet improvement. With groups so closely targeted on getting their internet content material out the door at lightening tempo, accessibility testing usually is completed AFTER the content material has been launched to manufacturing.

Just lately nevertheless, there was a development that has began to carry accessibility into the definition of executed! That development, is automated accessibility testing. These instruments permit for improvement groups to see the accessibility of their content material as they develop and it doesn’t decelerate their each day agile course of.

Groups are together with automated testing as a part of pipeline jobs utilizing automated libraries like axe-core, utilizing linters that embrace accessibility guidelines, or operating an extension that assessments the totally rendered content material.

As nice as that is, automation at finest catches solely the decrease third of accessibility points, opening the door for the content material you create to nonetheless have main accessibility points which are nonetheless not mounted. So what can we do to boost our definition of executed and catch extra points with out slowing down the event course of?



Introduce Keyboard Testing

Utilizing a mouse remains to be the commonest approach groups take a look at all actionable content material. So simple as this sounds, testing your internet content material with keyboard is a big step to make sure your content material is accessible for all.

On the planet of JavaScript frameworks and the overall lack of general HTML information, keyboard testing is important for you and your crew to make sure you can nonetheless use all actionable objects in your website.

For instance, let’s appears a button that’s created with <div> and ARIA.

<div function="button" tabindex="0" class="btn" 
onClick="doSelect()">Choose Merchandise</div>
Enter fullscreen mode

Exit fullscreen mode

When you have been to make use of a mouse and click on it, you’d see it prompts and you should use it. That is it. Since there was no keyboard testing executed, you’d miss that it does not work with enter or area AND that there isn’t a focus indicator on the button itself when its focus. Two MAJOR points missed, however may simply be caught.

One other instance can be a customized combobox or choose dropdown.


<div function=”combobox” aria-label="Choose a Canine"
aria-expanded="true" aria-owns="owned_listbox"> <enter 
sort="textual content" aria-autocomplete="listing" aria-controls="owned_listbox" aria-activedescendant="dog_list">
</div>
<ul function="listbox" id="dog_list">
<li function="possibility">German Sheperd</li>
<li function="possibility">Beagle</li>
<li function="possibility">Beagle</li>
</ul>

Enter fullscreen mode

Exit fullscreen mode

Though this will match the ARIA sample completely, with out keyboard testing I have no idea if it really works with arrow keys or that the set off at present works with enter or area.



Advantages of Keyboard Testing

Keyboard testing contains many advantages equivalent to:

  • Catching lacking focus indicators
  • Making certain your content material works totally with enter or area
  • Ensures customized combobox or choose widgets work with arrow keys
  • Helps construct a basis for handbook testing
  • Straightforward to be taught, and apply agile setting
  • Nice transition into display reader testing



How To Implement It

The ultimate factor with including keyboard testing as a part of your definition of executed, is how one can implement your builders are doing it. Automated accessibility testing is straightforward to implement. Builders have to indicate proof of an accessibility scan when making a pull request.

For handbook testing equivalent to keyboard there are just a few methods in which you’ll be able to test it has been accomplished.

  • Your QA crew can confirm
  • Code reviewers can even test it
  • Write automated regression assessments that test for enter and area
  • Write automated regression scripts that test on focus there may be an indicator



In Abstract

Including keyboard testing is an easy and efficient option to go above and past the norm. Accessibility automation is a superb match for agile environments, however so is keyboard testing. By merely including this to your each day improvement you possibly can catch so many extra accessibility points, guarantee your content material is usable with keyboard and no decelerate your improvement course of. A complete win for everybody!

Add a Comment

Your email address will not be published. Required fields are marked *