Accessible Forms & JavaScript

The first in a series of How To guides from Nomensa. Dan Stringer, Web Developer at Nomensa discusses what to do and importantly what not to do when using Javascript and forms. As part of this tutorial, Dan provides solutions to common mistakes.

Accessible Forms & JavaScript.


Hi everybody, I'm Dan from Nomensa and I'm here to talk to you about accessible forms and JavaScript. The focus of today's video is using the onchange event to change a form or a page when an option is chosen from a select box. Let's take a look at an example. Within this example webpage we have two select boxes. The first of these select boxes uses JavaScript to submit the form when an option is selected. If we select a womble, the form will be submitted automatically and an alert box will be displayed. Although this is not likely to cause any issues for a sighted user, a person using a screen reader is likely to find this extremely disorientating. If the form submission causes the page to reload, the user will likely find the change of context extremely confusing. If new content is loaded into the page via AJAX the user is not likely to know that this content has been loaded or where to find it. eBay is a good example of this. If we select an option from the "Sort by" drop-down box the page will refresh without the user having been told that this will be the case beforehand. For a sighted user it will be a lot easier to spot the changes. However, for a screen reader user this may not be so apparent. As mentioned before this can lead to a disorientating experience for people who use screen readers. So how do we go about resolving this issue? Pure and simply we do not use JavaScript to trigger a change of context when an item is selected from a drop-down box. In practice this means that we need to provide a submit button on every form. If we take a look at the second select box in our example, we are able to select our womble without an alert box being displayed. The user can then go in and change their selection before submitting the form using the submit button. So why is this useful? For a number of reasons. We are leaving control of the page and its functionality in the hands of the user. This has benefits for sighted users and for people using assistive technologies. Every form interaction will be directed by the user of the site, maintaining the predictability and usability of the forms functionality. As such, providing a submit button will likely make the experience more coherent, predictable and will reduce the number of potential annoyances for people who rely on assistive technologies such as screen readers.