Getting Started With Accessibility

What is Accessibility?   #

Website accessibility refers to the design and development of a website in a way that makes it usable for people with disabilities. This includes people with visual, auditory, motor, and cognitive impairments, as well as users who rely on assistive technologies such as screen readers.  

Website accessibility involves a range of techniques and best practices to ensure that all users can access and interact with the website, including providing alternative text for images, designing large links and buttons, creating a logical heading structure, providing keyboard navigation, closed captions on videos, plain English writing, and colour contrast.

The goal of website accessibility is to make the website usable for as many people as possible, regardless of their abilities or disabilities, and it’s essential for providing equal access to information and services for all users. 

We use WCAG 2 Guidelines to ensure our websites meet accessibility standards. 

Features That Affect Accessibility #

Colour contrast is necessary for accessibility because it ensures that text and other visual elements are distinguishable for users with visual impairments, particularly those with low vision. Adequate color contrast between text and background makes it easier for users to read the text, which can help users with visual impairments to access the information on the website.

Additionally, color contrast also helps users with cognitive or learning disabilities, as it can make it easier for them to follow along with the information presented on the website.

Furthermore, color contrast is also important for users with color vision deficiencies, as they may have difficulty distinguishing between certain colors, and high contrast can help them to distinguish the information.

Essential for : 

• People with low vision or visual impairment
• Certain people with colour deficiencies who may struggle to distinguish between certain colours

Useful for :

•  Ederly people as the colour contrast sensitivity in our eyes declines with age 
• People with temporary disabilities such as cataracts
• People in different lighting conditions

Writing in plain English is necessary for accessibility because it makes information more easily understood by a wider audience, including people with cognitive or learning disabilities, as well as people who speak English as a second language.

Plain English is characterized by its use of simple vocabulary and grammar, and by avoiding technical jargon and complex sentence structures. This makes it easier for people to understand the content and follow instructions.

Additionally, plain English can help users with visual impairments, especially if they are using screen readers, as it can help the software to read the text more accurately and fluently, which can help users to understand the content better.

Moreover, plain English can also be beneficial for users with low literacy levels, as it can help them to access information and understand it more easily.

Essential for : 

• People with learning disabilities who may not be able to understand complex vocabulary
• People with a cognitive impairment who may struggle to focus on dense passages of text
• People with autism who may take phrases and expressions literally
• People with dyslexia
• People with lower literacy levels

Useful for :

• People who use English as a second language
• People who are reading in a rush
• Everyone

Closed captions on videos are necessary for accessibility because they provide a written transcript of the audio content of a video, which allows users who are deaf or hard of hearing to understand the video’s content. Additionally, closed captions can also be beneficial for users who speak a different language than the audio, or for users in a noisy environment where it is difficult to hear the audio clearly.

Closed captions also provide an alternative way to understand the video’s content for users who have cognitive or learning disabilities, as it can help them to follow along with the video and understand the content better.

Furthermore, closed captions also provide SEO benefits as it allows the search engines to understand the content of the video and make it more discoverable.

Essential for : 

• Deaf people
• People who have hearing impairments
• People with cognitive impairments or learning disabilities, who may use captions to help them understand the video 

Useful for :

• Elderly people affected by hearing loss
• People with Attention Deficit Hyperactivity Disorder, who may use captions to help them focus
• Users who experience migraines, who may prefer to watch videos without sound
• People watching videos in a loud, public environment or in a silent place like a library 
• People who use English as a second language

Keyboard navigation is necessary for accessibility because it allows users who cannot use a mouse or other pointing device to interact with a website. Users with motor impairments, such as those with spinal cord injuries or tremors, may have difficulty using a mouse, and keyboard navigation provides an alternative method of interacting with a website.

Additionally, keyboard navigation is also important for users who rely on assistive technologies, such as screen readers, as it allows them to navigate and interact with a website without a mouse. Screen readers often use keyboard commands to move through the content of a website, and a website that is not keyboard-navigable can be difficult or impossible to use with a screen reader.

Furthermore, keyboard navigation also allows users to easily navigate through the website without having to take their hands off the keyboard, which can save time and make the website more efficient to use.

Essential for : 

• People with motor impairments who rely on a keyboard, instead of a mouse, to navigate throughout a website page
• Blind and visually impaired users who rely on screen readers 

Useful for :

• People with hand tremors
• People with injuries such as broken arms
• People who are multi-tasking
• Users who prefer keyboard shortcuts
• Users with no access to a mouse

A logical heading structure is necessary for accessibility because it helps users navigate a webpage and understand its content, especially for users who use assistive technologies such as screen readers. Screen readers can read the headings on a page in a hierarchical manner, which allows users to understand the organization of the page and quickly jump to the sections that are most relevant to them.

A logical heading structure also helps users with cognitive or learning disabilities to understand the content of the page, as well as users with visual impairments, as it can be used to create an outline of the page’s content.

Additionally, it helps search engines understand the organization and content of a web page, which can improve SEO, and make it easier for users to find the information they are looking for.

Essential for : 

• People with motor impairments who rely on assistive technology
• Screen reader users
• People with learning disabilities
• People with screen magnification software

Useful for :

• Everyone
• People using mobile or tablet devices with smaller screens

Large links and buttons are necessary for accessibility because they make it easier for users with motor impairments to interact with a website. People with motor impairments may have difficulty clicking small or closely spaced links or buttons, and larger links and buttons can help reduce this difficulty.

Additionally, large links and buttons can also be beneficial for users with visual impairments, especially if they are using a touch screen device or a mouse with low precision. It can also help users with cognitive or learning disabilities, who may have difficulty understanding where to click on a website.

Overall, large links and buttons can help make a website more usable for a wider range of users, including those with disabilities.

Essential for : 

• People with motor impairments
• People who are blind or visually impaired 

Useful for :

• Eldery people
• People using mobile or tablet devices

Descriptive alt text for images is necessary for accessibility because it allows people who use screen readers to understand the content of an image. Screen readers are software programs that read the text on a website aloud for people who are visually impaired. Without descriptive alt text, screen readers would not be able to convey the meaning of an image to these users. Additionally, it can also help people with cognitive or learning disabilities who have difficulty understanding images 

Essential for : 

• Blind or visually impaired users
• People who use assistive technologies

Useful for :

• Improving your websites SEO 

How to Check Your Website’s Accessibility  #

The easiest way to test a website’s accessibility is by using 3rd party software such as the Wave Web Accessibility Evaluation Tool, AXE DevTools or Google’s Lighthouse.  A useful tool for contrast checking is the WCAG Contrast checker.

What is Wave?

WAVE (Web Accessibility Evaluation Tool) is a free online tool that allows you to check the accessibility of a website by analyzing its HTML code and identifying any potential accessibility issues.

WAVE works by analyzing the website’s HTML code and providing an overlay that highlights any accessibility issues it finds, such as missing alternative text for images, poor colour contrast, and missing form labels.

The tool also includes an evaluation report that provides detailed information on each issue found, including the location of the issue in the HTML code and suggestions for how to fix it.

How do you use Wave?

WAVE is very easy to use, you simply enter the URL of the website you want to test into the tool, and it will analyze the page and provide a report of any issues it finds.

The screenshot below shows how Wave displays any errors or alerts. 

Wave provides feedback on how you can improve your pages to enhance accessibility. Wave also provides help with how to fix any errors. See screenshot below for example. 

What is Lighthouse? 

Google Lighthouse is an open-source automated tool that helps developers and designers improve the quality of web pages. It audits webpages for performance, SEO, Progressive Web Apps (PWA), and accessibility. It’s built into the Chrome browser and can be run as a command-line tool or as a browser extension.

The accessibility audit within Lighthouse is a set of automated tests that checks for common accessibility issues on a webpage. It analyzes the page’s HTML and JavaScript, and checks for issues such as missing alternative text for images, poor color contrast, and missing form labels.

The accessibility audit will give a score based on the number of issues found, and also provide suggestions on how to fix them.

Google Lighthouse accessibility is useful for developers and designers to check the accessibility of their web pages, and help identify and fix any issues that may be preventing users with disabilities from accessing the website. Lighthouse can be integrated into the development workflow and can be automated as a part of a Continuous Integration process.

How do you use Lighthouse?

There are several ways to use Google Lighthouse accessibility:

 • Chrome DevTools: Lighthouse can be run as an integrated feature of the Chrome browser by opening the browser’s DevTools (by pressing F12 or right-clicking on the webpage and selecting “Inspect”), then clicking on the “Lighthouse” tab and selecting the “Accessibility” option.

 • Chrome Extension: Lighthouse can also be run as a browser extension for Chrome, which can be downloaded and installed from the Chrome Web Store. Once installed, you can run the accessibility audit on any webpage by clicking the extension icon in the browser’s toolbar.

 • Command-Line Interface (CLI): Lighthouse can also be run as a command-line tool, which can be installed globally via npm by running the command npm install -g lighthouse

From here you can select what tests you want Lighthouse to run and whether you want the categories to be tested on Mobile or Desktop. 

For this example we will select Desktop and run only the Accessibility audit. To run the test Press the Analyze Page Load. Please note that whatever page you are currently viewing is the page that will be audited.  

When the test is done Lighthouse will give the page a score out of 100. Lighthouse will also provide context on the issues that affected the score and how to fix said issues.  For every issue there is a web.dev document explaining the issue and how to fix it.  This is why Lighthouse is the best tool to use for auditing your website’s accessibility.   Please see the image below for an example of a completed Lighthouse audit. 

What is WCAG Contrast checker?  

WCAG Contrast Checker is a tool used to check the contrast ratio of text and background colors on web pages, to ensure they meet the accessibility guidelines defined by the Web Content Accessibility Guidelines (WCAG).

How do you use WCAG Contrast Checker?

To use the WCAG Contrast Checker extension:

1. Install it on your browser from the relevant store (e.g. Chrome Web Store).
2. Navigate to a web page you want to check.
3. Click on the extension icon in the browser toolbar.
4. The extension will display the contrast ratio between the text color and background color and indicate whether it meets the WCAG standard.

The X indicates that the element does not pass WCAG standards and needs to be changed. WCAG Contrast Checker has a convenient built in colour wheel that allows you to pick a coulor that passes the contrast check. Once you find a passable colour simply copy and paste the hex code and edit your CSS file.

What is AXE DevTools?

AXE DevTools is a browser extension that integrates with the developer tools in popular web browsers such as Google Chrome and Mozilla Firefox. The extension allows developers to run accessibility tests on their web pages in real-time and get instant feedback on accessibility issues, making it easier to identify and fix accessibility problems early in the development process. AXE DevTools can help developers create more accessible websites and ensure that their web content is accessible to a wider range of users, including those with disabilities.

How do you use AXE DevTools?

To use AXE devtools, follow these steps:

1. Install the AXE browser extension in your browser.
2. Open the browser’s dev tools by using F12 or right clicking on the page and selecting “Inspect”.
3. Click on the “AXE” tab in the dev tools panel.
4. Click on the “Scan all of my Page” button to start the accessibility analysis.
5. Review the results of the accessibility analysis, which will highlight any accessibility issues found on the page.

After the test is finished AXE will display the total amount of issues detected as well as give you additional information on where the issues are and how to fix them.