Accessibility Wrapped 2023!

This is a list of the top web accessibility achievements at a very granular level. Looking through the list you might think this is a list of problems and mistakes. But let’s turn that frown upside down: the fact is that the web maintaining community at Carleton does not create the issues on the vast majority of its pages. So think of this as a breakdown of all the issues that – 99% of the time – you all are avoiding when you are creating web content.

(This top ten is based on based on several dozen accessibility reviews Web Services has conducted in the last year.)

1. Text in images.

This is the conveying of textual info built into an image.

Definitely one of the worst barriers to maximum accessibility, it means that people who employ screenreaders to access web content cannot be exposed to any of the information in the image. Nor can any user copy and paste the text to send to a colleague, for example. The density of text in images can also be very limiting for neuro-atypical users. Well done on avoiding this one in 2023!

Text in images is also a great example of how we interpret disability on a scale. Many of us who would not say they have a visual disability nonetheless find it hard to read the tiny text on an image. Learn more about accessible images on our training and resources website.

2. Headings aren’t true headings

Sometimes “headings” are created by bolding the text that forms the label for a new section of the page.

When this happens it means the page possesses none of the structure required to help users who have severe visual disabilities from being able to navigate the site easily, hopping quickly from section to section until they locate the area of information they are seeking. Make sure you only create true headings by using the correct tools in the backend of your website. You can find out more about headings if you have any doubts – but on the whole people are doing a great job with this!

3. Non-nested hierarchy of content.

Related to #2, within any page in the Carleton template where sub-headings are employed, the levels of headings must exist within the proper hierarchy. Headings are designated in order down the hierarchy – Heading 1 being the title of the page, level 2 headings coming next, with level 3 headings existing only within the heading 2 section. In the abstract it looks like this:

Heading 1 Places to eat [The Page as a whole]

Heading 2 On-campus

Heading 3 Mike’s Place

Heading 3 Oliver’s

Heading 3 The Garden Spot

Heading 2 Off-campus

Heading 3 MacDonalds

Heading 3 Burger King

Again, most sites are doing this properly. You can find more info on our site.

4. Heading hierarchy skips a step

To be fully accessible to people using a screenreader that hierarchy must be consecutive and can’t skip a step. The error occurs when, for instance, there is the page title (a level one heading) followed by a level 3 heading. Always check the hierarchy is consecutive. Visit the previous link to learn more.

5. Email addresses or URLs are written out and used as the text for a hyperlink.

The best practice is to use a call to action when creating the text for a hyperlink to another page or to compose an email, e.g., Email Web Services or Learn about Web Services. If the link test is, instead, the URL or email address then that will be read out by a screenreader. For example, the https://carleton.ca/webworkshops/accessibility-training/module-2-text/hyperlinks/

would be read out (“Aitch-tee-tee-pee-ess colon back slash back slash….. etc etc”) That is slow and frustrating for users with visual disabilities, especially on a page with a dozen links! Accurate link text also improves SEO. Find out more on our hyperlinks page.

6. Alt text missing from images

Alt text is a description of an image on a website which tells people who cannot view the image what it contains. If it is missing then the image is skipped entirely. Often people forget to add this crucial piece of information. It should be descriptive without being overly detailed. If a person appears in the photo, mention their appearance including their hair, clothing, ethnicity, etc. Read about alt text usage here.

7. Alt text present where none is needed

We hear so much about alt text we assume it is always required. It is not, and is a problem when added unnecessarily. For example, images which are purely decorative should not have alt text. If an image is of a very generic object and does not add anything to the knowledge or experience of the viewer then alt text can be skipped. This is a useful guide: often if that image is redundant for a user who has a severe visual disability it probably doesn’t offer much of value for others who can see it. People (including us in Web Services!) often describe this as the hardest aspect of accessibility to comprehend. You can find more guidance about this on our resources site.

8. Linked image missing alt text

Having said that, there is an instance when an image must have alt text: when the image is being used as a link to another page. This alt text, in addition, must inform the user what the user will experience by clicking on the image. For example, alt text on an image that is to be clicked to go to a registration page should read something like “Register now for this event”.

9. Inaccessible PDFs

In the same way that web pages containing sub-headings much be built with a hierarchy in mind, so must PDFs. There are other rules that apply – if your department creates a lot of PDFs it is worth learning how to build PDFs with a proper title, the correct structure, images with alt text etc.

10. Inconsistent formatting

For all users (but notably visitors who are considered neuro-atypical) a consistent set of visual cues when they visit a Carleton web page is very important. It is quite easy to learn what a level 2 heading looks like, or the appearance of a hyperlink on one of our pages. When items such as headings or links are created in a completely different way, or if some text is bold and some underlined, we lose that visual cue.

Additionally, some means of formatting make things harder to read. A good example of this is the underlining of text. If you are dyslexic, adding underlining to text can make words harder to read.

Note: there are also some common accessibility issues that creep in by accident. These include empty heading tags and empty hyperlinks. These are accidental and so while we can warn against them and advise care, accidents are called accidents for a reason. However, in the new cuTheme template there are new measure which guard against these slips from happening.

Even better news is that we have a great suite of online training and resource modules around accessibility. It is a great place to start learning about accessibility and how to make your content as accessible as possible. You can start learning more about accessibility today.

Web creators often make slip-ups in creating more accessible content. The important thing is that at Carleton we never have to convince people that accessibility is important – in some ways, it’s the other way around: the community is constantly asking us for more info on how to make their content more accessible. We are trying to learn as much as we can and we are very happy to be on this journey with people so dedicated to the effort.