5 Common Web Accessibility Issues

Accessibility! Accessibility! Accessibility! Here at Web Services, you may notice we chat often on this topic, though that is only because it plays such a key role in the web world. Across the Carleton domain, we want to ensure everyone has the same user experience. Below are five common accessibility issues found on websites. Have a look at this list and see if your site is free of these issues.

1. Missing Alt Text on Images

Alt (alternative) text describes the appearance of an image on a page. It is important to note that all images should have alt text, even social media posts. Including alt text is crucial for web accessibility, as some individuals use screen readers and rely on alt text to understand visual content they may not be able to see.

2. Weak Colour Contrast

Using poor colour contrast between the background and text colour can make it difficult to read website content, especially for individuals with low vision. As a general guide for contrast, black on white is recommended. In some cases, coloured text is needed, such as the use of hyperlinks to display proper site content. If this is the case on your site, we recommend using a colour contrast checker such as AIM’s contrast checker or you can google “colour contrast checkers.” This tool will assess whether your website’s colours are within the right ratio.

Note: Web Services takes care of this at the template level.

3. Missing Form Label

A form label is an HTML element used in forms to describe what the various fields and controls in the form are for. Form labels ensure that users of assistive technology such as screen readers will know what information they should enter in the field. All fields in a form should be properly labelled.

Note: Web Services takes care of this at the template level.

4. Non-descriptive Link Text

Link text should describe the link text’s destination. This helps all users get to link destinations and information faster, especially those using screen readers. Instead of using generic link text such as “click here” or “read more”, which lacks description, title the link with details on where the user will be directed to such as “read more about accessibility” or “browse more blog posts.” This helps those using screen readers to identify the link’s destination.

5. Improper Use of Headings

Proper heading hierarchy is key for organizing the structure of your site. Headings should follow the order of <h1> (heading 1) the most important, to <h6> (heading 6), the least important. An incorrect heading order error means your heading structure has skipped over a level. All pages should follow the proper heading hierarchy, this ensures that users using screen readers will understand the flow of the page.

If you have reviewed this list, and you are still unsure if your website displays accessibility errors, you can request an accessibility scan. You can also explore our Web Accessibility Checklist, as well as more accessibility resources on our site.