Avoid gestures. Stick to clicks!
All interactions on the site should be driven by simple mouse clicks with obvious targets. Gestures are only allowed if they are essential, and it is strongly encouraged to have an alternative way to activate the feature with simple clicks.
Why
Not all users and input devices are capable of handling gestures. A simple click is replicable by all input devices and is achievable by users with physical challenges
Best Practices
- In the event of a gesture-based input (e.g. a volume slider) an alternative click interface should be provided (e.g. plus/minus) buttons
- Drag and drop interfaces should also have alternative interfaces for moving elements around ("cut/paste", "move up/down" are possible approaches)
- Make sure that click targets are reasonably sized.
- Avoid actions on "mouse down"
- Avoid "path dependent" mouse actions.
Use Modern Web Design
Most modern web best-practices are also accessible, so follow them!
Why
Elements on the page need to be clearly marked in such a way as to describe what the element is for a user who is visually impaired.
Best Practices
- Avoid using
<div>and<span>when there are more descriptive alternatives. - Use HTML elements to appropriately distinguish regions of your page (i.e. use
<table>, not<div style="display:table">) - Use input elements like
<button>when possible. - Use HTML5 regions when possible. It should be a rare exception that you have to use an ARIA attribute to make screen-readers work.
- Use attributes on input fields so that autocomplete behaves as expected
- Make sure that your application works in all orientations.
Make Your Designs Responsive
Your application should work on a wide variety of screen sizes and shapes.
Why
Visually impaired users are likely to be zooming in dramatically, so ideally, the application will work well in a highly zoomed in state. This has the advantage of also helping our users on mobile devices.
Best Practices
- Test your application at a variety of screen resolutions from a small mobile device all the way to a zoomed out Retina display
- Take advantage of modern front-end layout tools like flexbox.
Use HTML
Whenever possible information should be presented in HTML.
Why
Screen readers and other adaptive tools work best with common formats like HTML. Frameworks like Flash and Silverlight should be avoided as some interactive content is not accessible to screen readers and other accessibility devices.
Best Practices
- Front end frameworks that cause HTML to be rendered are perfectly fine (e.g. React).
- Avoid using Flash
- Avoid putting information inside videos or images.