How to test the accessibility of your website?

If we were all in the same room right now, I would ask everyone present to speak up if they have ever tried to navigate the web using a screen reader for the blind, or seen how it works. Such a discussion could reveal many interesting insights about user experiences and the limitations they face, some of which we may not think about or even be aware of. While it is not surprising that the way content is consumed by people with disabilities is “different”, these differences are often surprising, and the range of people who have or may have problems navigating the virtual world is incredibly broad.

For example, visually impaired people often read black text on a yellow background better than black text on a white background. Blind people often do not use search engines on websites, but navigate directly to specific links using web browsers. It is therefore important that the structure and links on a website are well organised. People with motor impairments may use alternative pointing devices such as trackballs, touchscreens or eye-tracking devices. Websites need to be responsive and easy to use without precise mouse clicks.

The concept of accessibility in the context of the WCAG goes far beyond the “disability” that may first come to mind. To understand some of the barriers and the diversity of users, I encourage you to play and explore Cards for Humanity.

One of the fundamental principles and main goals of technology development is to streamline processes and various aspects of human activity – to make life easier. However, the same technology that helps some people can be a challenge for others.

It is often said that accessibility is not about the imperfections of people but the imperfections of websites – “people don’t have disabilities, websites do”. So how can we check what limitations of our websites prevent them from fulfilling their important function and adapting to the unique needs of users?

Read article: How to understand the European Accessibility Act (EAA) and what it means for you?

There are several methods and tools you can use to check whether your website is accessible according to the WCAG (Web Content Accessibility Guidelines). Here are some steps to help you:

• Wave: This is a free and one of the most popular tools for analysing websites for accessibility. It was developed by WebAIM (Web Accessibility In Mind).

• Axe: Another popular tool that integrates with browsers such as Chrome and Firefox and provides detailed reports on accessibility issues. It is developed by Deque Systems, who regularly update Axe to ensure compliance with the latest versions of WCAG and to incorporate new technologies and best practices. The premium version of Axe includes an option to guide the user through the testing process (test scenario).

• Lighthouse: A Google tool that can be used as a supplement to the overall testing process. It focuses primarily on evaluating the site for performance, loading speed and SEO, whose guidelines often overlap with WCAG and share common standards.

Automated tools identify problems and suggest fixes. They generate detailed reports and visually present test results, including information about the location of problems and an assessment of their severity. These tools can be easily integrated into and run directly from browsers, and are available as extensions for Chrome and Firefox. Wave handles dynamic content well. However, like most automated solutions, there are certain aspects where these tools are not sufficient to professionally evaluate a website. They can only provide a preliminary analysis, but their undeniable advantage is that they are readily available. Therefore, if we want to check our site quickly, it is worth considering them. However, some servers or CAPTCHAs may block such tools.

None of today’s widely available automated tools can detect all issues, such as navigation logic or content clarity, and they may mistakenly flag errors that are not errors. Automated tools sometimes lack user context and the real feelings associated with navigating the site. Real users may experience problems that tools do not detect. Automation focuses mainly on the technical aspects of accessibility, not on the actual usability of the site for its users. Therefore, to get a complete picture of the site’s accessibility, such tools should be supplemented with other methods and manual testing, including testing with users with different types of disabilities.

NOTE: Testing native applications is a significant challenge for automated testing.

Some elements can be tested manually, such as checking keyboard navigation or scrolling on a phone.

• Keyboard navigation: Ensure that all elements of the site are accessible using a keyboard. Check that you can navigate the site using the tab key and that focus indicators are visible. Depending on the industry, try to learn about the service, place an order, go to the shopping basket, or perform another action.

• Screen readers: Test your site with screen readers such as NVDA, JAWS or VoiceOver to see how it is read.

Here is a detailed guide:

Installation:

1. Download NVDA from the official website.
2. Install NVDA by following the on-screen instructions.

Test:

1. Launch NVDA after installation.
2. Open your web browser (preferably Firefox as NVDA works very well with it).
3. Navigate to the page you wish to test.
4. Use your keyboard to navigate around the page. Common keyboard shortcuts:
   – Tab: Moves to the next interactive item.
   – Shift + Tab: Goes to the previous interactive item.
   – Insert + arrow keys: Navigate through the text.
5. Check that all elements are read correctly, that links and buttons have logical descriptions, and that the structure of the page is understandable.

Installation:

1. Download JAWS from the official Freedom Scientific web site.
2. Install JAWS by following the on-screen instructions.

Test:

1. Launch JAWS after installation.
2. Open your web browser (JAWS works well with Internet Explorer and Chrome).
3. Go to the page you want to test.
4. Use your keyboard to navigate through the page. Common keyboard shortcuts:
   – Tab: Moves to the next interactive item.
   – Shift + Tab: Goes to the previous interactive item.
   – Insert + arrow keys: Navigate through the text.
5. Check that all elements are read correctly, that links and buttons have logical descriptions, and that the structure of the page is understandable.

To enable VoiceOver on MacOS:

1. Open System Preferences.
2. Go to the Accessibility section.
3. Select “VoiceOver” and enable it.

Testing VoiceOver on MacOS:

1. Open the Safari browser.
2. Go to the page you want to test.
3. Use the VoiceOver keyboard shortcuts to navigate:
   – Ctrl + Option + arrow keys: Move through various elements on the page.
   – Ctrl + Option + Space: Activate items.
4. Make sure that all elements are read correctly, that links and buttons have logical descriptions, and that the page structure is understandable.

Enable VoiceOver on iOS:

1. Go to Settings.
2. Select “Accessibility”.
3. Go to the VoiceOver section and enable this feature.

Testing VoiceOver on iOS:

1. Open the Safari browser.
2. Go to the page you want to test.
3. Navigate using VoiceOver gestures:
   – Swipe right/left: Go to the next/previous item.
   – Double-tap: Activate items.
4. Check that all elements are read correctly, that links and buttons have logical descriptions, and that the structure of the page is understandable.

Use tools such as Contrast Analyser to check that the text and background colours have adequate contrast.

• WebAIM Contrast Checker: An online tool that allows you to quickly check colour contrast: WebAIM Contrast Checker.
• Accessible Colours: Another online tool to help you choose appropriate colour combinations: Accessible Colours.

Testing colour contrast with tools such as Contrast Analyser is a simple but effective way to improve the accessibility of your website. Regular testing and adjustment of colours will help you meet and maintain WCAG standards and improve the visibility of your site.

This is the best and undoubtedly the most interesting way to gain knowledge, and is an essential method for gaining the most qualitative insights.

If you are not already doing so, you can employ people with different disabilities to test your website. This is the most effective way to identify the real problems that users may encounter. Observing their behaviour and how they explore the platform can provide you with ground-breaking insights.

An audit involving users with different disabilities is the most effective way to identify real accessibility issues on your website. Here are specific steps for conducting such an audit effectively:

Define the audit objectives:

• Define which aspects of accessibility you want to test (e.g. navigation, forms, multimedia).
• Define success criteria: Define the criteria against which the website will be judged (e.g. compliance with WCAG 2.2 Level AA).

Select participants:

• Include people with a range of disabilities: e.g. blind, low vision, deaf, hard of hearing, people with motor impairments and cognitive disabilities.
• Contact non-governmental organisations: Work with NGOs that work with people with disabilities to find participants for the audit.

Prepare test scenarios:

• Create detailed test scenarios: Cover typical tasks that users perform on your website (e.g. registering, shopping, searching for information).

Prepare the test environment:

• Ensure that the test environment is well prepared and that participants have access to any necessary assistive technology (e.g. screen readers, magnifiers, speech recognition software).

Instructions to participants:

• Explain the objectives of the audit and the test scenarios to the participants.
• Provide technical support if any problems arise during the test.

Collect data:

• Observe participants as they complete tasks and note any problems they encounter.
• Record the test sessions (with the participants’ consent) to thoroughly analyse their experience.
• Conduct post-test interviews to gather additional information about participants’ difficulties and suggestions.

Analyse the results:

• Analyse the data collected to identify key accessibility issues and their impact on users.
• Focus on the issues that occur most frequently and have the greatest impact on the user experience.

Writing the report:

• Prepare an audit report that includes:
  – A description of the audit methodology.
  – Test results, including problems encountered and their impact on users.
  – Recommendations for addressing the issues.
  – Examples of good practice and suggestions for improvement.

Present the results:

• Present the audit results to the development team and stakeholders to ensure that everyone is aware of the issues found and the corrective actions planned.

• Real data: Provides real data on user experience that is difficult to obtain with automated tools alone.
• Identifies critical issues: Enables the detection of issues that may be missed by automated testing.
• Improve usability: The information gathered helps to create more user-friendly and accessible interfaces.

Contact us to conduct an audit and adapt your platform to the latest regulations, enhancing its accessibility and functionality. Learn more about our online platform audit service or discuss your expectations with us.

Fill out the form, and we’ll show you how to improve your website and provide a better user experience.