Web Accessibility: Controls

Controls are any elements that users can interact with, such as buttons, links or form inputs (Lambert, 2018). The text used to describe controls should be clearly labeled and understandable.

Links and buttons

Navigating through a page full of links using a screen reader can be tiresome – or worse, useless (Kalbag, 2017, p. 61). If links and buttons are confusing or difficult to interact with, that increases the likelihood of users leaving your site.

Tips:

Do not use general wording such as “Click here” or “Read more”. The link won’t mean anything out of context, especially for screen reader users (Kent State University, n.d.).
- Link text should be made up of descriptive phrases rather than single words (Penn State, n.d.).
- Think about restructuring your sentence to remove “click here” and then surround the meaningful part of your text with the link. For example: Learn more about Purdue’s Botany and Plant Pathology research.
- Additional examples are on the Kent State Accessibility examples webpage and the Penn State Accessibility Link Text webpage.
Links should not contain the full URL of the target page, as that forces screen readers to read everything in the URL (Kent State University, n.d.). Instead of “Visit https://www.purdue.edu/science/Alumni/index.html for more information”, try “Visit the College of Science Alumni webpage for more information.”
Indicate if the link will take the user off the site they are currently using. For example: learn more on the National Science Foundation website.
Links going to a document must include the file type (such as PDF) in the link text (Kent State University, n.d.). This will let the user know what they’re clicking on. If the document is a large file, include that information as well. Example: view the job description (PDF: 1 MB)
Links should be underlined and possibly a different color from the regular text (Kalbag, 2017). This is expected by users, and it will help colorblind users find links more easily (Penn State, n.d.).
Allow plenty of space for buttons and links. Controls that are too small or too close together can cause problems for (Lambert, 2018):
- Touch screen users: fingers are big and difficult to be precise with.
- Older users: fingers that have less dexterity due to age
- Alternate inputs: people who don’t use a mouse to navigate websites.

Forms

If you’re using a form builder like Qualtrics or Google Forms, the majority of the coding work will be done for you. However, there are other things you can do to improve the experience for all users.

Form layout

Users prefer simple and short forms, so make the form as easy as possible to complete.

Tips:

Provide instructions to help users understand how to complete the form. For example, which fields are required, the expected format for date fields, etc (Web Accessibility Initiative, n.d.).
Only ask users to enter what is required to complete the transaction or process. If irrelevant or excessive data is requested, users are more likely to abandon the form (Web Accessibility Initiative, n.d.).
Put questions in a logical, sensible order.
Visually group related elements together. For example, think about how shipping and payment information is organized in an online shop.
If long forms are needed:
- Separate the form into multiple pages.
- Indicate progress with text (such as a heading) or a progress bar. Qualtrics has an option to add a progress bar.
- Give users the option to save their progress and return to finish the form later. Qualtrics allows users to save their form progress. This is helpful for users that have cognitive impairments that can affect their memory (Kalbag, 2017, p. 69).
When a user has finished filling out the form, show them a confirmation page or send them an email.

Form inputs and labels

These can be text fields, multi-select areas, checkboxes, radio buttons, and date inputs.

Tips:

Every input needs a text label that describes the expected input. Sighted users can see them, visually-impaired users can hear them and motor-impaired users can more easily set a focus (via the keyboard or other devices) on the related input (Lambert, 2018).
Labels should be placed above or to the left of the form input so it’s clear the label is associated with the form field.
Provide instructions:
- Within the label where possible. For example: Graduation date (MM/YYYY)
- If the input is required, put “Required” or “(required)” within the label. Do not use the asterisk to indicate required inputs as it is often not read by screen readers.
Placeholder text is not a replacement for text labels. While they provide instructions or an example of the required data, they can be confusing for several reasons (Web Accessibility Initiative, n.d.):
- It is usually displayed with lower color contrast than text inputted by users, therefore making it more difficult to see.
- It disappears from form fields when users start entering text, which can cause problems for users with cognitive disabilities.
- Users might think the form field is already filled out.
- Screen readers do not treat placeholder text as labels and will ignore them.

Examples of accessible form design are on the No Style Design System’s Form Validation webpage. Note: this is a captured page from the Internet Archive.

References:

Kent State University. (n.d.). Accessibility examples (correct and incorrect use). Retrieved March 18, 2019, from https://www.kent.edu/web-standards/accessibility-examples-correct-and-incorrect-use.
Lambert, S. (2019, April 9). Designing for Accessibility and Inclusion. Smashing Magazine. https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/.
Kalbag, L. (2017). Accessibility for Everyone. Jeffrey Zeldman.
Penn State. (n.d.). Link Text. Retrieved March 18, 2019, from https://accessibility.psu.edu/linktext/.
Web Accessibility Initiative. (n.d.). Forms Tutorial. Retrieved March 18, 2019, from https://www.w3.org/WAI/tutorials/forms/.
Web Accessibility Initiative. (n.d.). Form Instructions. Retrieved March 18, 2019, from https://www.w3.org/WAI/tutorials/forms/instructions/.