Using technology to showcase your work can be a powerful tool for recruitment. However, you may be missing out on top candidates if the website you’ve built isn’t digitally accessible. The CALS/LAS Web Team wants to help by sharing common accessibility errors that we see and what can be done to correct them.
The most common digital accessibility errors we see are:
- Inconsistent page titles
- Formatting pages with resources that are not formatting tools
- Missing alternate text on images
- Broken links and misspelled words
- Incorrectly linking text
A well-developed website can effectively showcase your teaching, research, scholarship, and more. Many powerful tools, such as screen readers, have been built to ensure all people are able to view the site you’ve invested your time to create. If you’re interested in reading more about digital accessibility, the CALS/LAS Web Team uses a tool called Siteimprove, and they’ve done a great job of explaining what digital accessibility is and why it’s important. Additional information regarding screen readers and how they relate to accessibility can be found in Siteimprove’s article, Screen Reader Testing.
Now, let’s dive into common accessibility errors and how you can fix them!
Inconsistent page titles
The title of your page should match the menu link to your page. If a user clicks a menu item “About” and then lands on a page that is titled “Welcome to the Department,” that could be a bit jarring. The first thing they would expect to see is “About.” Having this consistency creates a better user experience, which is great for accessibility as well as your website’s SEO. If you’re interested in learning more about SEO, the CALS/LAS Web Team has recorded a 20-minute webinar you can watch called “SEO and why it’s important.”
Common Error:
Corrected:
While technology is smart and getting smarter by the day, having consistent page titles helps reduce confusion.
Formatting pages with resources that are not formatting tools
We commonly see tables, quotes, and headings used as formatting tools. However, that creates barriers to accessibility as an unintentional consequence. No one faults a website editor for wanting their site to look its best, but we need to use the tools we have available appropriately.
Tables
While a table does look nice, it should only be used for data, not for formatting lists. We offer other formatting tools, such as “End text wrapping” and “Horizontal line breaks,” that can help you make a similarly formatted page that is also accessible.
Quotes
Additionally, the “Quotes” tool should be used for highlighting a direct quote, not as a method for highlighting key content on the page. Using the quote tool adds a bit of code to your content, indicating that it is, in fact, a direct quote. If you use this tool as a styling option to pull a quote from your content, you are creating an area of confusion for your visitor, who is expecting to hear a quote and a citation.
Headings
The last tool we see commonly misused is headings. While we have multiple options for headings, we want to encourage folks to use them to introduce a new section, not just create bigger, bolder fonts. Screen readers use headers and quotes to inform the reader of what is on the page. There is a keyboard shortcut that allows the visitor to hear all of the H2s on a page so that they can quickly navigate to the section they want. When headings and quotes are used for formatting instead of their intended purpose, the screen reader will not be able to perform its job correctly, and the user may not understand your page's intent. If your page only uses H3s because you like the style better, the visitor using the H2 shortcut won’t know what’s available on your webpage and may leave your site before getting to the useful content.
This is also an opportunity to improve your user experience! We know visitors skim headings when trying to find what they are looking for. Using this tool for design rather than information architecture can lead to a frustrated visitor who can’t find what they are looking for!
Test your content by pulling all the headings on a page and reviewing them as an outline.
H1: About the Department
H2: Department Structure
H2: Department Directory
H3: Faculty
H3: Staff
H3: Teaching Assistants
H2: Department History
Common Errors:
Corrected:
Missing alternate text on images
Alternate text allows a screen reader to share what is in an image. Additionally, alternate texts on images will tell people what the image is if their internet connection is too slow to load images. Adding a short, descriptive message can also help readers understand the page's intent if your image breaks.
Examples of alternate text:
- Kinesiology lab with two scientists.
- Kinesiology lab with two scientists using an oxygen mask and exercise bike to take measurements.
Broken links and misspelled words
While everyone has a to-do list these days that never seems to shorten, it’s important to review the links on your site and update them if they are broken and correct any spelling mistakes. Luckily for the sites supported by the CALS/LAS Web Team, you can access the Siteimprove dashboard that identifies the broken links on your site. There is a different blog post that can help you use this tool. Review Your Siteimprove Dashboard Explained to learn more.
Incorrectly linking text
When adding a text link, you want to ensure that if the link alone was read out of context by the screen reader, the user would have some idea of what the link leads to. If your links are all linked to words such as “here” or “more details,” the user will not know what they are associated with. Instead, consider adding links to text within the content you’re presenting.
Common Error:
The manuscript, "Creating website content for all audiences" can be found here.
Corrected:
The manuscript, "Creating website content for all audiences," provides more details to help reach your website's goals.
If a user has their screen reader tell them each link on a page, they will have a much easier time figuring out where the corrected link will take them, as opposed to where “here” would take them if they follow that link.
Still have questions or want hands-on help?
The CALS/LAS Web Team provides content strategy, design guidance, training, and all technical support for the Sites+ platform. Reach out by emailing us at websupport@iastate.edu.