Why is this important?
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.
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>.
See DEV 8 - Accessible Rich Internet Applications for more guidance
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?
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
Table 1 - How to and how not to code <noscript> equivalents
<a href="…">Contact us</a>
Examples of bad practice
EN 301 549 v 2.1.2
- 4.1.1 Parsing
- 4.1.2 Name, Role, Value