As we conclude our multi-part series on basic accessibility techniques for complete beginners, we talk about the interactive elements on your website and how you can make them totally accessible.
Keyboard Accessibility
A user should be able to navigate your website using only the keyboard. Keep in mind a visually impaired or motor impared individual won’t be able to make clicks using the mouse. You can do this using the tab order of your website. Keyboard interaction has two aspects – focusing an element and interacting with the element. You can test this feature very easily by trying to navigate your content without a mouse. If you come across a link or a button or a section of the website that is not accessible via the Tab key, you can understand that a keyboard-only user or screen reader user won’t be able to use it.
It is also important to evaluate the support for accessible widgets and components supported by the Content Management System or UI library that you opt for while developing rich user experiences. With respect to rich user interface components, there is an array of Accessible Rich Internet Application standards that need to be complied with. If the UI library is accessibility compliant, most of the load is taken by the library itself. If this goes ignored in the initial phase of the project when technology stack decisions are made, then pushing in fixes could be a daunting task in future.
Dynamic Updates
There are a host of scripting technologies that make a webpage dynamic. Simply put, a dynamic update occurs when the content of a page changes without a page refresh. Often these are user events like button clicks or alert boxes (for e.g. cookie confirmation bar). Remember, keyboard is the only way of navigation here. Page overlays, or popup boxes may confuse a person using assistive technology. You can get around this problem using ARIA standards along with proper use of JavaScript.
Using Forms Tactfully
It is a misconception that disabled people don’t conduct essential activities like shopping, paying bills, etc. using online resources. You would want to convert these people also into potential customers. Like you would do with other users, you should use forms to capture information from disabled people as well. But these forms need to be carefully developed. Every field of input should have a clear, self-explanatory label associated with it. The most common way of providing labels is to make use of label tag and its “for” attribute. Additionally, grouping labels often go ignored. Grouping labels are those that form a common label for multiple form fields. For example, “Gender” will be grouping label for “Male”, “Female” and “Other” radio buttons. Using fieldset and legend elements are best way for providing grouping labels to form fields. In case these mechanisms don’t suit your use case, aria-label and aria-labelled by can be used. But remember that native html elements and attributes are always recommended over ARIA attributes.
Whenever possible, you should put instructional tips so someone using a screen-reader can easily understand what input is needed. This can be achieved via use of title attribute or the aria-describedby attribute.
Additionally, use of HTML 5 required attribute (or aria-required attribute) along with use of aria-invalid attribute for error fields enhance the accessible experience for screen reader users.
Another aspect in forms is use of CAPTCHAs – ensure that you are have implemented not just a visual CAPTCHA but also an audio or text CAPTCHA.
End of Part Three of our blog series on accessibility techniques.
Recent Comments