Aug 15, 2024
Persona
One of the keys to understanding and improving website accessibility is knowledge of the most common accessibility errors and how to fix them. Since 2019, WebAIM has completed a yearly accessibility review of the top 1 million websites and produced a report of their findings. The review tests the home pages for each of these sites and scans them for accessibility errors.
The reviewed websites are divided into categories including education. Notably, while the average number of errors across all sites was 56.8, educational sites fared better, averaging only 26.0 errors. It is encouraging to observe that the educational sector significantly outperforms the general average; however, there is still room for improvement.
The WebAIM report identifies the six most common types of errors. These types of errors make up a staggering 96% of all errors found in their review. If your college or university focuses on addressing these types of errors, there will be a significant improvement in the overall accessibility of your website. The most common types of errors are:
- Low Contrast Text
- Missing Alt Text
- Empty Links
- Missing Labels
- Empty Buttons
- Missing Language
Let’s review each of them in detail and talk about how to fix them.
Low Contrast Text
Having proper contrast between web text content and its background is critical for colorblind and low-vision users. Good contrast also improves usability for all users. WCAG guidelines state that text should have a color contrast of 4.5:1. Some common ways low contrast text appears are putting text over a background image, and when institution brand colors that are low contrast are used together on a page.
Testing for color contrast is relatively easy, and there are many free tools available to help you find this type of error.
Once you have identified where the color contrast issues are you can begin correcting them by adjusting or changing the color of the text, or the background.
Missing Alt Text
WCAG guidelines require that most images have alternative text. This alternative (alt) text provides important contextual and functional information to people using assistive technologies. Adding alt text to images is an easy and straightforward process in most CMS systems. I recommend using the WAVE by WebAIM browser extension mentioned above to test for missing alt text.
W3C has more information about the alt text requirements for different types of images, as well as a decision tree to help you determine how to use alt text in a variety of image scenarios. Prioritize your homepage and other high-traffic pages first, then you can review your school’s website section by section to finish remediating for missing alt text.
Empty Links
An empty link is a hyperlink that does not have any associated content, meaning there is no text that explains to users what happens when they click a link. When links are empty, it is almost impossible for people using assistive technologies to understand what will happen when they click on the link.
Most automated accessibility tools will check for empty links. They will also look for other common hyperlink issues such as redundant link text and broken links. You can use the WAVE by WebAIM tool listed above, or you could try one of the Siteimprove browser extensions.
Once you have identified the empty links, you can choose to add the necessary associated content (link text or alt text) or remove the empty link if it is no longer needed.
Learn more about optimizing anchor text and linking strategy for SEO.
Missing Labels
Forms play an important role for colleges and universities in gathering information from prospective students. To meet accessibility requirements you must provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. These labels need to describe the purpose of the associated form control.
Once again, you can use an automated accessibility testing tool to scan your site for missing form labels. Depending on the platform you are using to generate your forms, you may be able to edit the forms directly to add any missing labels. In other cases, it may be necessary to involve a developer or content management system administrator to add the necessary labels to make your forms accessible.
Empty Buttons
Buttons are a key visual and functional element of modern websites. It is important to note that not everything that is styled like a button visually is actually a button in terms of its code and functionality. True buttons use the button HTML tag and function differently than a link that has been styled to look like a button.
In HTML, a button is an element that signals a triggerable action such as downloading a file, submitting a form, or opening or closing something on the page. Buttons commonly use JavaScript code to add functionality to the element – meaning there is no href attribute like in a hyperlink and without the JavaScript the button would not do anything.
If a button is flagged as empty, that means it contains no text describing its function. To correct this, you will need to add text within the button tag that clearly indicates the button’s purpose. If the button contains an image instead of text, you will need to add descriptive alt text to the image. I encourage the use of text-based buttons wherever possible because they are more accessible overall.
Missing Language
All HTML documents are required to have the language attribute. Users select a default language when configuring their screen reader. If the language of a webpage is not specified, the screen reader assumes the webpage is the default language set by the user. Language settings can become an issue for users who speak multiple languages and access websites in more than one language. It is essential to specify a language and ensure that it is valid so the website text is pronounced correctly by the screen reader.
If your higher education website is flagged for missing the language attribute, you will likely need the help of a developer to add the attribute to your HTML code. Many college and university sites now offer web content in multiple languages. If this is the case for your institution, it is important to set the correct language for each page.
How To Get Started Fixing Accessibility Issues On Your Higher Education Website
Now that you are familiar with these six types of common accessibility errors, you can begin reviewing your school’s website for them. If you don’t already have an accessibility checker tool, we recommend you download and start using WAVE by WebAIM. Take some time to analyze your web traffic before beginning your accessibility review. Focus your initial review on the top ten to twenty of your web pages based on traffic from the past year. Once you have identified and remediated any issues on these top pages, you can begin a more systematic review of your whole site.
You will likely discover that the errors you find fall into two categories: content/page-specific errors and global/code-based errors. Fixing global errors will have a big impact on your overall accessibility because addressing those errors will resolve them across multiple pages on your site. However, this type of error will likely require the help of a developer to remediate.
Content-related errors are often page-specific. A content editor within the CMS can typically resolve these errors. However, this does entail reviewing and fixing these errors on a page-by-page basis, which can take quite some time. Ultimately, all of this effort is worth it because you will be improving the quality of the user experience and increasing the connection and engagement of your website visitors.
- Web accessibility is about ensuring everyone can use your website well. There are many reasons why this is important, but the most important reason is because it is the right thing to do.
- Accessibility errors can make it impossible for some of your site visitors to find the information they need, or to complete a task required of them.
- Improving the accessibility of your site improves its usability for all site visitors.
Check out our blog Web Accessibility 101 for Higher Education to learn more about the importance of ensuring your college or university website is accessible to all users.
Stay tuned to the Carnegie blog for more information and tips about improving the accessibility of your higher education website. If you’re in need of some assistance, our web design and development teams are here to help. Reach out to us to start a conversation.