3 ms·
> 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
by lhorie 5y 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.
- Benjammer 5y agoYou don't even really need to replace the divs, just add tabIndex="0" on the things that should be focusable/tab-able.
- MrJohz 5y agoThis 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.
- ximm 5y agoBonus 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.