Techniques
Use device-independent event handlers
A device-independent handler is one that works with both the mouse and the keyboard, such as onclick (when used with a keyboard-focusable element), onfocus, onblur, onselect, onchange.
If using a device-dependent handler is unavoidable, use a combination of mouse- and keyboard-dependent event handlers:
- Use OnKeypress with OnClick;
- Use OnMousedown with OnKeydown;
- Use OnMouseUP with OnKeyup;
- Do not use OnDblclick as it does not have a keyboard equivalent.
Do not rely solely on client-side scripts
Use redundant server-side scripts as well as client side scripts (this is also a good idea for security reasons). Using server-side scripts negates the need for additional accessibility implementation.
Avoid using JavaScript links
Links should be provided by <a> elements, with an href attribute and link text, and only used if the URL changes. For interactions that happen on the same page, use a <button>.
Ensure appropriate ARIA roles are assigned if using custom interactive JavaScript elements
See DEV 8 - Accessible Rich Internet Applications for more guidance
Use aria-live regions to announce content that is changed or loaded in from JavaScript applications
For example, when using a page loading screen, or changing content displayed on screen by selecting an option on-screen.
See DEV 8.1 - Accessible Rich Internet Applications: Using ARIA for updates and messaging for further guidance
If "lazy loading" content, this should not be announced as it loads
While optimised load speeds are useful for all users, it is important to avoid using ARIA announcements as this will quickly become overwhelming.
If focus is given to an image that has not yet loaded, use a placeholder image with Alt text of "Loading image".
If using infinite scrolling, ensure all areas of the page are accessible by keyboard
Because new content is continually loaded in through an infinite scroll, ensure there is either:
- No content after the infinite scrolling section, or
- An option to enable/disable infinite scrolling functionality at the users' request.
- Provide a control that allows users to toggle infinite scroll on/off before they have to interact with any infinite scrolling content. Ideally, the control should be placed before the role=”feed” and can be made visible when it receives keyboard focus.
- “Load more” or pagination links must appear once the infinite scroll is switched-off so that the user is able to request more content when they want to.
What about AJAX?
AJAX uses JavaScript to bind several technologies together to create web pages that can be updated 'on the fly' by exchanging small amounts of data with a server rather than requiring full page reloads.
Reliance on JavaScript is an accessibility issue in itself; a non-JavaScript dependent alternative (in fact equivalent) should be provided.
A major issue of AJAX use is the need to ensure that all users will be aware of when changes to the page contents occur. Possible solutions to this include providing visual and non-visual alerts, and potentially offering the option to turn these on and off.
In the end, careful development and testing of AJAX applications needs to occur in order to ensure usability and accessibility.
Examples of good and bad practice
Provide equivalent content in for users without JavaScript
Table 1 - How to and how not to code <noscript> equivalents
| Do not… | Do… |
<script> …script that displays a colour picker for a user to select from… </script> <noscript> Sorry, your browser does not support JavaScript. </noscript> | <script> …script that displays a colour picker for a user to select from… </script> <noscript> <p>Select a colour</p> <ul> <li><a href="…">Red</a></li> <li><a href="…">Blue</a></li> <li><a href="…">Green</a></li> </ul> </noscript> |
| <a onClick="…">Contact us</a> | <a href="…">Contact us</a> |
Examples of bad practice
References
WCAG 2.1
- 2.5.6 Concurrent Input Mechanisms (AAA)
- 4.1.1 Parsing (A)
- 4.1.2 Name, Role, Value (A)
EN 301 549 v 2.1.2
- 4.1.1 Parsing
- 4.1.2 Name, Role, Value