5 Steps to Design Apps with Keyboard Accessibility in Mind

What steps do you take to design with keyboard accessibility in mind?

I read this blog recently:

And was wondering if anyone would add anything to what’s been suggested or had any thoughts about it?

1 Like

A way to test accessibility of a website is to use a screen reader. This tool speaks aloud what is shown on the screen. It also provides some useful shortcuts, which are really interesting.

One of the most used Windows tool for blind and visually impaired people is NVDA (www.nvaccess.org). This free tool has a neat feature: Element list. Once installed it can be opened using

  • {Caps lock] + [F7] or
  • [Insert] + [F7]

Some test ideas using the Element list of NVDA:

  • The first option is links. If you listen at the links, is it clear, which page will be opened?
  • The second option is headings. Is the structure of the web page logical? Does the heading provide information about the content?
  • The third option is form fields. Is the description of the fields clear?
  • The fourth option is buttons. Is every button reachable? Are the descriptions clear?
  • The fifth option is orientation points. Are the shown points understandable? Is it easy to reach relevant information in the banner?

Bonus test ideas:

  • It is possible to filter items in the shown list. E.g. show me all the links containing the word “ticket”. On a ticket website how many relevant options are shown?
  • Is it possible to accelerate the steps using the key short cuts in the Element list? E.g. I ordered a ticket on the web site. Let me try it again using the information of my previous attempts. Could I reduce the number of keystrokes?

This morning I was scanning the 2020 Hackaday Prize announcement for the BYTE, a mouth operated mouse. Got me thinking about how broken mouse based UI’s often are. I am a staunch Windows user, and without starting a flame war, I find so often that well intentioned changes in the desktop are often coming with baggage, like how often a computer becomes useless when it does not have a trackpad or mouse attached. This happens equally often in Windows and on MacOS, don’t start me on the linux distros, because those are not truly desktop systems. I never used to care about accessibility, but its become one of the few words more than 8 characters long that I can spell correctly first-time of late.

I am 100% with you @han_toan_lim on the use of a keyboard not just for blind but for anyone who struggles to control the analog rodents, they are a poor proxy for good UI design. I really hope we can all make computing a joy for all by testing UI designs with some of the best guidance now being shared so often, before they go live.

I find that simply mashing the TAB key in any native app or web page uncovers all kinds of horrors.