Accessible Websites 101: What to look for, where to start, and why it matters

As a website owner, you might not know where to start with accessibility. While many accessibility improvements will require a developer or a designer to update, there are quite a few that are content-based and likely within your scope to implement.

This is a beginner’s guide to walk you through a couple ways to test your website and some best practices for content creation.

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) Opens in new window are the standards that are 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 Opens in new window .

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 screenreader.

Lighthouse

I like Chrome’s Lighthouse Opens in new window . 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” 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 Opens in new window .

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 screenreader. 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 screenreader.

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 webpages are set up.

If you think of a basic website back in 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 of 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 are 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 webpages, 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 be tempted to 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 it’s tempting to describe every image on your site. But this is not recommended. This only 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 screenreader 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 Opens in new window by Axess Lab

 4. Links

Best practice for links is to tell your user where they are going and how they are getting there. So describe the link, don’t use “click here” as tempting as it may seem.

Click here

Why? Screenreaders can highlight a list of links on a page for the user to navigate through. A list of “click heres” 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. 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 Opens in new window and WebAim Contrast Checker Opens in new window 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 your reading level 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 Opens in new window 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.

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 Opens in new window is a great place for more resources.