Accessibility and Usability Techniques
Here are two summarized resources on accessibility and usability.
1. Accessibility Guide
Use headings correctly to organize the structure of your content.
Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.
Examples of proper use of headings:
- Use <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.
- Use headings to indicate and organize your content structure.
- Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader users will wonder if content is missing.
Include proper alt text for images.
Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page. When creating the alt text, the text should contain the message you wish to convey through that image, and if the image includes text, that text should also be included in the alt. The exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screen reader user is not distracted from the more important content on the page.
Give your links unique and descriptive names.
When including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.
The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.
For example, if you are pointing visitors to a page called "About Us":
Try not to say: "Click here to read about our company."
Instead, say: "To learn more about our company, read About Us."
Use color with care.
The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colors such as these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.
Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when used to distinguish and organize your content.
To satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders).
UT NOTE: High-contrast button colors and accessible field indicators have been included with the template. If additional button colors or field indicators are needed, please let me know and we'll work out a solution that can be applied across all of OIT's forms for consistency.
Design your forms for accessibility.
If certain form fields are required, the field should be labeled accordingly, and configured to alert the screen reader user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers. Asterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or people who speak English as a second language. Indicating that a field is required to a screen reader can be accomplished by adding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will need to be alerted to submission confirmation and any submission errors. We recommend including any error counts in the page title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If a user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.
2. Form Usability
Allow users to tab through inputs
Many users will utilise the Tab key to move between inputs on a form as it can be much quicker than moving the cursor to the next input with the mouse. It’s therefore a good idea to check that tabbing between inputs is possible for your form and that inputs are tabbed in a logical order. The TABINDEX element can be used to specify tabbing order within a web form if the default order is all over the place.
Use real-time validation
For some inputs it can be a good idea to utilise real-time validation, perhaps using JavaScript or AJAX to validate inputs prior to submission. For example you might check that an input is in the correct format, that a user name has not already been used or that two email addresses entered are exactly the same.
Provide feedback to users
It’s important to provide users with feedback following an action. For example, you should provide feedback following submission of the form or during some sort of lookup. For operations that can take a little while the now ubiquitous swirling circle is a good way to show that something is happening, or alternatively showing a progress bar or percentage complete. Let users know whether their action was successful or not and what their next steps are. If their action was unsuccessful don’t forget to outline why this was and what the user can do about it.