No, really. You can make a start with web accessibility by using free accessibility tools.
We’ll show you how you can check a page on your site for web accessibility problems for free, and explain some fundamental concepts that you might not know.
What you’ll need to follow along:
- the Silktide accessibility checker, a free Chrome extension
- an example web page to check, we’ll use our testing website fake-university.com
What this article will help you check:
- Over 200 individual WCAG accessibility checks
- Color contrast checker
- Alt text
- Headings
- Screen reader simulator
- Focus order
- Landmarks
- Impaired vision simulator
- Color blindness simulator
- Dyslexia simulator
What is web accessibility?
Good web accessibility makes your website as easy to use as possible for everybody. This includes people with visual impairments, who might rely on assistive technologies like a screen reader to read the page contents.
People with a motor impairment might use a keyboard instead of a mouse to navigate a website.
Other people might prefer to use a mobile device for all their web browsing, so your websites should be responsive and compatible.
Some people might be in a situation that makes it harder to see their device, like bright sunlight.
The solutions to these problems (ensuring keyboard compatibility, mobile responsiveness, and readability through sufficient text contrast) benefit everybody.
Ultimately, web accessibility means web usability. So the more usable your website is, the more people can use it and get the information they need, or make the purchase they need.
By checking your web accessibility, you’ll find and fix these usability barriers that prevent people from completing the tasks they need to on your site. This reduces your support burden and increases your conversion rates.
In brief: web accessibility laws
All public sector bodies and, depending on your location and industry, most private sector bodies are subject to web accessibility legislation.
In the United States, the Americans Disabilities Act (ADA) and Sections 504/508 of the Rehabilitation Act mandate a certain level of website accessibility. It varies, but generally, the laws are working towards compliance with WCAG 2.1, Level AA.
In Europe, the European Accessibility Act and the EU Web Accessibility Directive cover the public and private sectors, again mandating WCAG 2.1 Level AA as the compliance threshold.
There are compelling reasons why you should get your website’s accessibility up to scratch.
Let’s look at how you can check your web accessibility for free.
Step by step: check web accessibility for free with Silktide’s accessibility checker
Now that we have some background, let’s dig into some practicalities of checking your web page’s accessibility.
1) Install the Silktide accessibility checker
Navigate to the Silktide Accessibility Checker on the Chrome web store and click the “Add to Chrome’ button.
Next, click the jigsaw in the Chrome extensions bar and pin Silktide so you can easily access it.
2) Run the accessibility check
Choose a page you want to test for accessibility problems and open it in your browser. We’ll choose our testing website, fake-university.com.
Click the Silktide Chrome extension icon, and the accessibility checker tool panel will open.
There’s a range of free accessibility tools available that help you check different aspects of your web page. The Silktide free accessibility checker contains over 200 WCAG (Web Content Accessibility Guidelines – video) tests in an easy-to-understand format. You can work through each and we’d recommend starting with the Accessibility checker.
- Accessibility checker
- Color contrast checker
- Alt text
- Screen reader simulator
- Focus order
- Landmarks
- Impaired vision simulator
- Color blindness simulator
- Dyslexia simulator
3) Work through each section in the accessibility checker
The accessibility checker gives you over 200 free accessibility checks. After a brief scan of your web page, you’ll see the panel populate with a list of problems in order of severity.
Before we delve into each issue, take a look at what’s included here. At the top of the panel, you’ll see a dropdown menu with the option to preview the web page on desktop, tablet, or mobile devices. This gives you a quick overview of how your site displays on different devices.
Below this are the filters for the types of check and the WCAG standard.
- Automated: Checks which Silktide carries out with a distinct pass/fail
- Assisted: Checks which Silktide can alert you to check manually, but does not give a definitive pass/fail
For now, we’ll leave everything as it is and choose one of the checks to look at. Each issue type can be expanded with a click, and you’ll see the problem highlighted on the page
In our case, we’ll look at the list of color contrast failures.
An example: Color contrast check
For our test website, all the links in the footer fail color contrast requirements, with a much too light gray color on the light grey background.
So the accessibility checker highlights each of these on the page for you and explains:
- what the problem is
- why it’s a problem
- how to fix it.
The left-hand panel gives you the explanations and the guidance you need. We’ve made a big effort to make everything easy to understand because WCAG is a tough subject.
In this case, the suggestion is to darken the footer link text.
This is important because people with moderate visual impairments, or those looking at their screen in bright sunlight, won’t be able to read the links.
Another example – “Read more” links
Screen reader users may skip through your website listening only to the links. If each link has the same text but points to a different destination, and also has non-descriptive text like ‘Read more’, this leads to a poor user experience.
In an example like the screenshot below, which lists multiple blog posts in a grid each with an identical ‘Read more’ link text, the screen reader will read out “‘Read more – Link’, ‘Read more – Link’, ‘Read more – Link'”.
Listening to that, you would have no idea where each link leads.
The problem is solved by using descriptive link text or context-giving ARIA labels, which are not visible but are read out by screen readers.
These are just two of many examples. Each check in the Silktide Accessibility Checker has a description of the problem and how to solve it, so you’ll be able to learn about these problems as you work through each page.
4) Check color contrast
High-contrast text is easier for people to read. WCAG gives some guidelines as to how contrasting it must be.
You can check any two colors by hex code.
You can type them in or use the color pickers to choose two colors from anywhere on your screen.
5) Review your image alt text
Alternative text (‘alt text’) is used by screen reader users to read out descriptive content of the contents of an image. It’s incredibly useful, and also necessary in some cases.
For example, let’s say you have a graph on the page, but no supporting text content. The image contains useful information (the graph data) that can’t be accessed by someone who can’t see it.
The alt text tool in the Silktide Accessibility checker lets you easily see where the images are on the site, which ones have alt text and what it is, and also which ones are missing alt text entirely. It also alerts you to missing alt tags, which are required in HTML for images, even if the image is decorative.
Silktide helps you decide whether the alt text is decorative, useful, or irrelevant, with the support help content shown on the left menu. Because everything is laid out visually, it’s easy to see what’s happening on your page without looking at the code or in your CMS for each image.
6) Review the focus order for keyboard navigation
People can navigate through a website using their keyboard. A combination of TAB and SHIFT + TAB lets you move forward and back through the page.
Your website must be built so that when navigating with a keyboard, the order is logical.
The Focus Order check gives you a visual representation of how your website’s navigation order is laid out, without you having to manually tab through the whole page. You need it to be consistent and logical. Also, you must ensure nothing is missed out.
Our test website has some pretty egregious focus order errors, one of which is highlighted below. The image shows what looks like three images. However, there are actually 6 images, which you can tab through with a keyboard. The order of tabbing does not follow what’s on the page visually.
This is a direct copy of a real website we found in the wild. Don’t try this at home!
7) Review landmarks
Landmarks on a web page are like signs in a building that help everyone find their way around. Imagine if you walked into a library and there were no signs for the different sections. It would be tough to find the books you want, right? Well, landmarks do the same job but for websites. They help organize the website so that it’s easier for everyone to find what they’re looking for, especially for people who use special tools to read the screen because they can’t see it.
Just like how signs in a building are made for everyone to understand, landmarks on a web page need to be set up so computers can understand them too. This helps people who use keyboards to navigate through a website easily, jump over parts they’re not interested in, and find the sections they want.
Silktide highlights the landmarks on a page so you can quickly understand where they are.
7) Use the screen reader simulator
The screen reader simulator is designed to give you a basic understanding of how a screen reader might work. You already have a ‘real’ screen reader built into your phone.
Ours is not designed as a replacement, but simply a tool for beginners to understand how they work (and how they might work on your web page).
Start by opening the screen reader panel and navigating through your page using the left and right arrow keys.
You’ll hear each element being read out. It probably won’t be long before you hear something that doesn’t make sense, or even not hear something you were expecting to.
Now, consider the impact of missing buttons, poorly described alternative text, or missing context, and you’ll understand how important it is to make your website compatible with assistive technologies.
Open the ‘How to use a screen reader’ panel. You’ll see a range of additional keyboard shortcuts. These let you navigate each heading, element, landmark, link, and more.
We encourage you to try the screen reader on your site, especially if you’ve never used one before.
8) Use the impaired vision simulator
We’ve included several simulations of visual impairments, ranging from myopia to loss of peripheral vision.
To access these, click the ‘Impaired Vision’ tab and on any simulation. You can adjust the amount using the sliders.
This is important as it helps you understand how people with moderate to severe visual impairments might view your website.
9) Use the color blindness simulator to assess contrast issues
Color blindness affects 8% of all men and about 0.5% of women. It is a common condition that affects the way that people see colors. Globally, over 350 million people are affected by color blindness. We recommend that you test your website while simulating monochromatic vision to make sure it’s accessible to everyone.
To get started, open the Color Blindness Simulator panel.
From the list, choose the simulation you want to test. For example, the loss of green is the most common, but you might want to also check ‘color greatly reduced’ for a more extreme loss of all colors.
Remember, choosing to distinguish elements by color alone is a WCAG failure.
10) Use the dyslexia simulator to assess readability
Dyslexia is the most common learning disorder in the world, affecting 10% of the global population. It affects the way that people read and write.
The letters on a page may appear jumbled, and this causes a greater cognitive burden. Making your content more readable can help, so consider simplifying your text, writing shorter sentences, and using sans-serif fonts.
To use this check, open the Dyslexia Simulator tab. You can adjust the severity (the speed at which the letters on the page jumble) by using the slider.
Congratulations! You’ve got a more accessible web page for free.
If you’ve worked through every step of this guide and used the accompanying help content in the Silktide accessibility checker, you should be in a good position to make changes to your web page.
Of course, the accessibility checker is great for helping you manage a single page at a time, but Silktide also has a full suite of accessibility tools in a single platform, that monitors your entire site for ADA, WCAG, and accessibility compliance problems.
Check out more details about the full Silktide platform here.
If you want more free accessibility resources, we have a range of free accessibility books, a collection of educational videos on our YouTube channel, and an accessibility newsletter.
