Website Accessibility 101: What, Where, Why

What is accessibility and why does it matter?

In general terms, website accessibility means having a website that is usable by everyone. This includes people with various visual, mobility, cognitive, physical, psychological and medical abilities, and can be extended to include people with limited access to technology.

Web Content Accessibility Guidelines (WCAG) are the standards used throughout the web to measure accessibility. So far, only Ontario has legislation around website accessibility, but that’s changing and BC will soon have WCAG minimum standards as well.

Here’s a user-friendly primer on WCAG.

1. Run accessibility tests

The first thing I do when addressing accessibility on a website is run an automated test and manually check my site with a screen reader and by tabbing through it.

Lighthouse

I like Chrome’s Lighthouse. It’s a free extension you can add on via the settings panel. To access it, you need to right-click on your site, select “inspect” and choose the panel near the end called “Lighthouse” to run a full test on desktop and see what your accessibility score is.

Here’s a short Loom video showing how to use Lighthouse on a webpage.

Some Notes:

• It’s best to run this in incognito mode as you might have other add-ons, cookies and caches that can interfere with the test results.
• The test only runs on the page you’re on, so make sure to run it on every type of page you have.
• This is a basic test that does miss a lot of issues. It’s a good starting point, but won’t be able to tell you everything about your website’s accessibility. It is very possible to get a 100% score and have many accessibility issues on your site.
• That said, it’s still a good first step – run the test and then set out to fix anything that’s showing up as an error.
• I think it’s important to look at the performance issues it highlights, not just what comes up under accessibility – as site loading speeds affect users with slower internet speeds – which is an accessibility issue, in my opinion.

Voice Over

Macs come with Voice Over, a built-in screen reader.

Check it out in the System Preferences under Accessibility. It comes with a start-up guide and there are many great videos on Youtube to guide you through using it.

Once you’ve got the basics, run it on your website and get to know what your site is like when accessed with a screen reader.

Tabbing

Try navigating your site using only the keyboard. Not all users can use a mouse or trackpad so it’s important to know what it’s like to move through your site by tabbing and using the up and down arrows.

Some browsers, like Firefox, have different settings for tabs, so do a search if you’re having trouble accessing them.

2. Proper use of headings

If you’ve written content on a website, you’ve probably run into headings and you might think you can select the heading based on what you want it to look like. This makes sense if you don’t know the history of the internet and how web pages are set up.

If you think of a basic website back at the beginning of the internet – it’s a page with text and links and maybe a couple of images. These were initially set up to replicate reports.

H1

Reports only have one title. That’s the H1. Every page on your site should have a title and only one title. On the homepage, it’s customary to have the site logo be the H1. This should be built into the code of your site and you don’t have to do anything to set it up. All you need to do is to make sure you don’t put any other H1s on that page.

H2, H3 etc

All other headings are then nested within the page. So the next heading is an H2 and if there’s a heading within that section it’s an H3. If there’s a heading on the same level that’s another H2, and so on.

Benefits of using proper headings

Keyboard Navigation

Creating headings in the proper order allows visitors to your site to navigate with a keyboard – the headings are like a table of contents within the page.

Helps SEO

It also helps your Search Engine Optimization (SEO) as text in headings is registered as “more important” content – so if you include words your users are searching for, they will find your site faster.

Reading Comprehension

People glance over web pages, they don’t read them like a book.

So chunking out your content helps your reader find the content and comprehend it better.

Final thoughts

Don’t use the wrong heading because you like the look of it better. If that’s the case, ask your web designer or developer to troubleshoot this for you.

For example, you can make a class for each heading so you can use the correct one with a class that makes it look like a different one. I often want the look of an H3 when I need to use an H2. If I have the classes set up, I can use an H2 with the class of H3 and solve both issues at the same time.

One of the quickest fixes to your site is to check your headings and make sure they are in the correct order.

3. Images and alt text

Alt text stands for alternative text. This is what loads instead of your image when your image can’t be seen.

When to use alt text

When first learning about Alt Text you might want to describe every image on your site. This is not recommended. Doing so slows down the user navigating through the site via voice and doesn’t help them understand the content.

Only describe images that are considered content. For all other images use alt text = “ ”. This is important because if you don’t put this blank, then the screen reader will read out the image file name.

How to write good alt text

Learning to write good alt text is an art. There are many pointers to keep in mind including:

• No need to say “image” the reader will already indicate it’s an image via the HTML.
• For logos, it’s best to write out the organization’s name and not describe the image.
• Use periods, they add pauses when read aloud.

The most comprehensive resource I’ve found on alt text is Alt-texts: The Ultimate Guide by Axess Lab.

 4. Links

The best practice for links is to tell your user where they are going and how they are getting there. Describe the link.

Don’t Use ‘Click Here’

Why? Screen readers can highlight a list of links on a page for the user to navigate through.

A list of links that say “click here” is not useful and forces them to scroll through the text to search for context and meaning.

Opens in a new window

Also, indicate if the link will open a new window.

It used to be standard practice that links within a site would open in the same window, and links going off-site could open in new windows. There’s debate about this now, as links that open in new windows are good for marketing but no longer give the user a back button. The user can also open links in new windows themselves with keyboard shortcuts.

The best practice is if a link opens in a new window, use an icon that indicates so visually and if you have the ability, add text that is only read out by screenreaders that says “opens in a new window”. You’ll likely need a developer to set this up.

5. Colour contrast

One of the first things that a test like Lighthouse will pick up is whether your site colours have enough contrast to be easy to see and read properly.

There are many places on the internet where you can test your colours for contrast levels. If you can, it’s always best practice to test your brand colours and make sure they pass contrast tests, but if you’re already working within a brand, you might need to make some adjustments in the colours you use on your site so that they pass these tests.

Colour Shark and WebAim Contrast Checker are good resources for this.

6. Form labels

Another place many websites fail accessibility tests is on their form labels.

Elements like searches, contact forms and drop-down filters all need to be properly labelled so that screenreaders can describe what they are interacting with. If you get an alert about form labels on your site, you’ll probably have to speak to your developer to update the HTML.

7. Reading level

One of the priorities listed in WCAG Accessibility Standards is Understandability. “Guideline 3.1: Make text content readable and understandable.”

There are many online resources that can tell you what the reading level of your site content is including the Yoast SEO plugin that many WordPress websites use.

I ran this article through a free online reading level checker which told me this is written in plain English at a grade 10/11 level in one metric and at a grade 5 level using another metric. Both metrics pass for understandability.

8. Don’t rely on accessible overlays or plugins

Many organizations I’ve worked with have tried out overlays and plugins like AccessiBe and Userway to patch accessibility issues, especially if they didn’t have the budget to get a developer in to make changes to their code. Unfortunately, these services are too good to be true.

If you type ‘AccesiBe’ and ‘lawsuit’ into a Google search you’ll see a bunch of articles including:

• Overlay Fails in Lawsuit Test: Website Accessibility Settlement Speaks Volumes (via Level Access)
• For Blind Internet Users, the Fix Can Be Worse Than the Flaws (New York Times)
• Largest US Blind Advocacy Group Bans Web Accessibility Overlay Giant AccessiBe from its National Convention (Forbes

And here’s an open letter from accessibility advocates against overlays like AccesiBe: Accessibility Advocates Sign Open Letter Urging People Not To Use AccesiBe and Other Overlay Products.

More resources

Once you’ve worked through these elements, test your site again and check how much you’ve improved. And keep these points in mind as you’re creating new content, it’ll help make your site accessible from the ground up.

The A11y Project is a great place for more resources.