Avoid using colour alone to convey information
You should not rely on colour alone to convey information, as not everyone can see the difference between colours. Table of contents…
Read more, Avoid using colour alone to convey informationAccessibility Tip: Support keyboard only access
Last updated on January 01, 2022• A11y issues
If you can make your site usable with just a keyboard then it is likely that other assistive input devices can also use your site so you should always aim to make sure it is usable by just a keyboard.
It is also very easy to test (we don’t need any specalised hardware to test it).
How to test
Try using your site or application with just a keyboard. You should be able to tab around and interact with everything.
For some interactive features such as tabs there are specific interactions (such as left/right arrow functionality to switch between tabs) that you can find in the WCAG specs (example on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#keyboard_interaction )
WCAG guidelines
Success Criterion 2.1.1 Keyboard (Level A):
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
Success Criterion 2.1.1 Keyboard (Level A): All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.
This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.
This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.
Found this post useful?
Please consider sharing this link with your work colleagues or on social media. There are no ads on my site, I just want to promote accessibility.
Found an issue? please point them out - let me know if there is a mistake and I'll update it
Follow me on Twitter: @A11yForDevs. I post links to interesting a11y articles and resources.
More posts
Ensure you have clear focus and hover states
Ensure that you have clear focus and hover states, so people know when they are hovering over an element or have it focused. Table of…
Read more, Ensure you have clear focus and hover states