Hacker News new | ask | show | jobs
by lhorie 1549 days ago
> Test accessibility with keyboard

One very simple step a dev can take is to just `tab` over their pages and check that important elements (links, buttons, etc) receive focus. Especially if they toggle something on the page via JS. If something doesn't, replace the div soup w/ a focusable element like `<a href="javascript:;"></a>`

For those saying accessibility is hard, doing just this one thing can make a big difference.

2 comments

You don't even really need to replace the divs, just add tabIndex="0" on the things that should be focusable/tab-able.
This is mostly true, but it's usually better/easier to use the semantic element for any particular use case. In this case, for example, to correctly mimic how the <a> tag works, you'll need to handle both click events and keyboard events (e.g. space for clicking), and even then you'll struggle to handle right-clicks, ctrl-clicks or middle clicks in a way that is truly cross-platform.

The <a> tag, on the other hand, just does all that for you.

Bonus points: if you realize that you get annoyed from having to tab through the navigation every time, add a skip link at the beginning of the page.