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_newAfter 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
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:- Run the aXe extension.
- Check for any issues refering to Alt text
- Right-click on the image you want to check, select inspect or inspect element (depending on the browser)
- While hovering over the image with your cursor, you will get a preview which will show whether or not the image has alt text.
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.
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."
alt="A group of marathon runners."
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:- Run the aXe extension.
- Check for any issues relating to headings or heading order.
- 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.
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:- Run the aXe extension.
- 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).
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
Links
On the web, links enable users to navigate from one webpage to another. However, for users with disabilities or impairments, accessing website links may pose a challenge if they are not clear and descriptive.
Therefore, it is essential to ensure that links are visible and have meaningful and descriptive text that accurately conveys the information that the user will access by clicking on the link. This approach not only enhances web accessibility but also improves the overall user experience.
How to review
Manual review:- Look for underlined text or icons that typically indicate links. Hovering over the text or icon might also change the cursor to a hand symbol, further suggesting a link.
-
Inspect a webpage link by right-clicking and selecting "Inspect"
(or "Inspect Element"). Locate the element and check for an
a
tag with anhref
attribute that shows the link's URL.
Alternatively: If you're on a Mac and are feeling confident, you can use the voiceOver rotor menu to quickly show a list of all links.
- Press Control + Option + U to activate the Rotor Menu.
- Alternatively, you can customise this key combination by going to System Preferences > Accessibility > VoiceOver > Rotor.
Best practices
- Review each link to ensure its text clearly describes where the link goes.
- Use unique text for unique links and consistent text for links to the same destination.
- Indicate links that open in new tabs with an external icon and announcement.
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:- Make sure every input field has a label indicating the information users should enter.
- 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.
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:- Right-click on the image you want to check, select inspect, or inspect element (depending on the browser).
- While hovering over the an element with your cursor, you will get a preview, which will show the dimensions of the element.
- 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.
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:- Open your browser's settings. Look for the zoom option, which is typically available in the menu or settings panel.
- 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.
- At a 400% zoom, check if all the page content fits within the viewport and is usable without needing to scroll horizontally.
- 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.
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:
- Web Accessibility Initiative (WAI): Explore the WAI resources, including tutorials, guidelines, and best practices, to gain a comprehensive understanding of web accessibility. Web Accessibility Initiativeopen_in_new
- WCAG 2.2: Learn about the Web Content Accessibility Guidelines (WCAG) 2.2, the international standard for web accessibility Web Content Accessibility Guidelinesopen_in_new
Free online courses:
- W3C's Introduction to Web Accessibility: Gain fundamental knowledge about web accessibility and its importance. W3Cs Introduction to Web Accessibilityopen_in_new
- edX's Web Accessibility courses: Lots of courses you can take, including a really good introduction course. edX's Web accessibility courseopen_in_new
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.