sa11y

Easy-to-follow steps for beginners to review website accessibility.

Introduction

Web accessibility refers to the ability of people with disabilities, such as visual, auditory, physical, speech or cognitive, to access and interact with web content. It ensures equal access to information and services, enabling everyone to participate fully in the digital world.

To achieve web accessibility, the Web Content Accessibility Guidelines (WCAG)open_in_new provide a set of instructions for building websites that everyone can use, including people with disabilities. These guidelines are created and maintained by experts in the industry and individuals with lived experience.

The WCAG is based on four main principles:

  • Perceivable
  • Operable
  • Understandable
  • Robust

There are then 13 guidelines associated with testable success criteria for each principle, which are further divided into three levels of conformance, namely levels A, AA, and AAA.

If you're feeling overwhelmed, don't worry - we won't dive into the details too much. You don't need any prior knowledge to get started identifying accessibility issues.

As you go through the page, attempt each review and if you need additional resources or support, don't hesitate to email support@sa11y.comopen_in_new for any assistance.

Be curious, ask questions and have fun!

Getting started

Before we get started, we need to download a tool to run our automated tests. We will utilise aXe by Deque University. It's free and runs on your web browser. Go ahead and download it.

Download aXe extensionopen_in_new

After you have installed it, let's run-through how to use it. First, we need access to the developer tools.

Keyboard Shortcut: Open the Developer Tools by pressing:

  • Mac: CMD + SHIFT + i
  • Windows : CTRL + SHIFT + i
Alternatively: Right-click anywhere on the webpage and select "Inspect" or "Inspect Element" (depending on the browser).
Next, click on the little submenu located in the top right corner of the page and select the aXe DevTools from the list.
Click on the Scan page button and wait for it to complete the scan. Any issues detected will be displayed at the bottom of the page.
Any issues found will be displayed below.
  1. URL that was scanned
  2. Total issues found overview, broken down by severity
  3. Individual issues that you can expand for more details

Images

Ensuring images have descriptive text, also known as alt text, is crucial for web accessibility.

Alt text provides a textual alternative to the content of an image, allowing users who are blind or visually impaired to understand the image's meaning using screen readers or other assistive technologies. It also helps with SEO "Search Engine Optimization" and improves the overall accessibility of your website for all users.

How to review:

Automated review:
  1. Run the aXe extension.
  2. Check for any issues refering to Alt text
Manual review:
  1. Right-click on the image you want to check, select inspect or inspect element (depending on the browser)
  2. While hovering over the image with your cursor, you will get a preview which will show whether or not the image has alt text.
Element preview displays when you hover over an element with your mouse, while the developer tools are open.

Best practices

  • Images that convey information unavailable through other content should have an alt tag.
    Meaningful: Alt="What gets read goes here"
  • Images that provide no information, such as illustrations, must be coded as decorative.
    Decorative: Alt=""
  • The rule of thumb used to determine whether an image is informative is to remove it from the screen: if I am missing information because the image is gone, then it means the image is informative and needs alt text.
  • Check any images with alt text are descriptive and relevant. This requires some manual intervention, but we want to ensure alt text is accurate.

Let's run through an example below.

check_circle Do
When writing alternative text (alt text), it is important to take into consideration the image's context and purpose, rather than just describing its contents. For instance, in the image above, stating that it shows a group of marathon runners would be accurate, but it may also be important to include additional context such as Cathy Freeman's victory, representing Australia at the Sydney 2000 Olympic Games.
Good alt text:

alt="Cathy Freeman in action at the 2000 Sydney Olympics, wearing her iconic green and gold body suit and white cap, dominating the track event with fierce competition in the backdrop."

Accurate alt text:

alt="A group of marathon runners."

Bad alt text:

alt="image2343.jpeg"

Additional resources

Headings and structure

Headings structure your web page content, organising it into a hierarchy and making it easier for users to navigate and understand.

They also play a crucial role in SEO. Ensuring headings follow a logical structure, with proper nesting (H1, H2, H3, etc.), is essential for accessibility.

Users who rely on assistive technologies, such as screen readers, navigate web pages primarily using headings. A logical heading structure allows them to efficiently grasp the page's content and organisation.

How to review

Automated review:
  1. Run the aXe extension.
  2. Check for any issues relating to headings or heading order.
Manual review:
  1. Right-click and inspect the heading text to reveal a preview panel to identify if it has a heading style.

Best practices

  • Ensure headings follow a logical hierarchy (H1, H2, H3, etc.).
  • Headings should not skip levels (e.g., H1 to H3). Headings of the same level should look similar.
check_circle Do
Good heading usage helps organise your web pages information making it easier for all users to navigate.

Additional resources

Colours

Colour contrast refers to the difference in brightness between two colours. Sufficient color contrast is essential for ensuring the readability of text and other visual elements on your website. Users with low vision or colour blindness may struggle to read text with poor colour contrast, making it crucial to verify that your website meets the recommended contrast ratios.

How to review

Automated review:
  1. Run the aXe extension.
  2. Check for any issues relating to colour contrast.

Alternatively: you can use a tool like WebAIM's Contrast Checkeropen_in_new to ensure text and background colours meet accessibility standards. Simply grab two hex values (one for the foreground and another for the background).

WebAIM's contrast checker will provide the contrast ratio between two entered colour values.

Best practices

  • Aim for a contrast ratio of at least 4.5:1 for normal text and large text and 7:1 for small text to ensure readability for most users.
  • Use colours purposefully to convey information, create hierarchy, and enhance the user experience. Avoid relying solely on colour to differentiate information, as users with colour blindness might not perceive the intended meaning.

Additional resources

Form labels

Form labels have a significant impact on making web forms accessible and user-friendly. A label placed next to each input field clearly describes its purpose and guides users through the form-filling process.

Properly labelled forms are crucial not only for usability but also for web accessibility. They ensure that all users can successfully complete forms, regardless of how they interact with a web page.

How to review

Manual review:
  1. Make sure every input field has a label indicating the information users should enter.
  2. When you click on an input field to start typing or focus on it, check that the label doesn't disappear or get covered up. You should always be able to see the label.

Best practices

  • Ensure labels are positioned close to their inputs for clear visual cues.
  • Inputs should not rely solely on placeholder text for labelling, as placeholders are not substitutes for labels and can pose accessibility issues.
  • When an input field is focused, ensure the label does not obscure the input or disappear, which can disorient users.
check_circle Do
Labels should always be close to their repective input.
cancel Don't
Avoid using placeholder text as the label, since it will disappear when the user starts typing.

Additional resources

Touch targets

The term "touch target" refers to the specific area that a user needs to tap to activate an interactive element like buttons, links, or custom interactive widgets.

It is important that touch targets are appropriately sized to cater to users with mobility or vision impairments and to provide an optimal experience for users on mobile devices.

How to review

Manual review:
  1. Right-click on the image you want to check, select inspect, or inspect element (depending on the browser).
  2. While hovering over the an element with your cursor, you will get a preview, which will show the dimensions of the element.
  3. Ensure that the minimum size of any interactive element is at least 44x44 CSS pixels. This size is recommended to provide a comfortable target for finger taps, reducing the risk of errors and making the site more accessible.

Best practices

  • It's important to provide sufficient spacing between touch targets to prevent accidental activations.
  • For essential interactions, consider making touch targets larger than the minimum size. Larger targets are easier to use and can significantly enhance usability for many users.
  • While inspecting elements and checking sizes is helpful, nothing beats testing your website on actual devices. This allows you to experience firsthand how easy or difficult it is to interact with elements on different screen sizes and resolutions.
check_circle Do
Aim for a touch target size of at least 44px to ensure comfortable tapping on smaller screens.
cancel Don't
Small touch targets can be frustrating and lead to accidental taps or clicks on the wrong thing. They also require the user to be more accurate.

Additional resources

Responsive content

Many users rely on zooming in to read text, view images, and interact with page elements. A website that can be navigated and used easily at high zoom levels, without the need for horizontal scrolling, provides a better experience for these users.

How to review

Manual review:
  1. Open your browser's settings. Look for the zoom option, which is typically available in the menu or settings panel.
  2. Increase the zoom level to 400%. This simulates what content might look like to a user who needs content to be enlarged to see it more clearly.
  3. At a 400% zoom, check if all the page content fits within the viewport and is usable without needing to scroll horizontally.
Exceptions to horizontal scrolling: While horizontal scrolling should generally be avoided, there are exceptions:
  • Large tables that contain a lot of information may require horizontal scrolling to view all the data.
  • Photos, maps, charts, and certain games that are designed to be wide may also necessitate horizontal scrolling.
  • Interfaces with toolbars or panels that are an integral part of the navigation or functionality.

Best practices

  • Using responsive design principles to ensure content reflows and adapts to various screen sizes and zoom levels. Use flexible layouts and scalable images to accommodate different viewing conditions.
  • Ensure that the text remains legible at high zoom levels. Avoid fixed font sizes in pixels; use relative units like ems or rems instead, which scale better when zoomed in.
  • Test that all navigational elements, like menus, links, and buttons, are fully accessible and operable at increased zoom levels. Users should be able to access all parts of the site without difficulty.
check_circle Do
When users zoom in on your website to see content clearly, ensure that they can scroll only up and down, not left and right. This makes it simpler for everyone to navigate your website and read its content, particularly for those who find it challenging to read small text.
cancel Don't
If your website doesn't adjust automatically when users zoom in, they may need to scroll both horizontally and vertically to access all the content. This can be frustrating and make it hard for users to navigate your website and recall the information they need.

Additional resources

Next steps

You've reached the end of the site, and I hope it's provided you with the basic knowledge to assess your website's accessibility. Remember, accessibility is an ongoing journey, not a destination. Here are some resources to help you continue learning and improving your website.

Deepen your understanding:

Free online courses:

Additional resources:

  • Intopia's Accessibility Not-Checklist: This guide is well-crafted and simplifies accessibility by breaking down complex concepts into simple terms. It's easy to understand and really worth checking out. Intopia's Accessibility Not-Checklistopen_in_new
  • A11Y Project: Explore practical advice, tutorials, and tools for web developers and designers. A11Y Projectopen_in_new
  • WebAIM: Access a wealth of information on web accessibility, including WCAG compliance testing tools. WebAIMopen_in_new

Remember, don't hesitate to seek user feedback from individuals with disabilities to gain valuable insights into their experience with your website. By continuously learning, implementing best practices, and testing your website, you can create a more inclusive and accessible web experience for everyone.

Have feedback or questions?
If you have any feedback, questions, or encounter barriers, please don't hesitate to reach out. Your input is invaluable in helping make sa11y a resource that is helpful, open, and welcoming to everyone.
Email
This page outlines my general approach to accessibility auditing, which is based on WCAG practices, industry experience, research, and data insights. Although I have tried to simplify the process of accessibility auditing, it is still a developing field with diverse views and methodologies. If you are ever unsure, it is best to refer to WCAG and seek insight from users with lived experiences.