Empower Your Website: 4 Essential Tips – Web Accessibility Checklist

There are some primary checks to carry out when formulating a web accessibility checklist. When crafting a website, it’s essential to take pride in our work and inquire whether the site is accessible to individuals with disabilities.

Applying accessible code and accessibility checks shouldn’t be done once a site is finished but throughout the whole course of the journey from start to finish. It’s difficult right but you can learn accessibility in different stages – Start your learning with these helpful tips for at least knowing how to test your website.

Consider the following on your website:

1. Design your website with colour in mind to ensure colours meet AA standards.
2. What functionally does your website have. Ensure you apply and test accessibility with these modules.
3. Is the site readable, logically structured and using HTML5 markup to give semantic meaning.
4. Is the content structured with headings and text
5. Is there a clear layout and easy navigation as UX is important.

Once some pre-thought has gone into the site, next step – create a plan of action to fix the issues.

We will cover the following tests:

• Keyboard testing. Do all the functionalities work with just a keyboard only?
• Automated accessibility checks in the browser – use pre-designed tools
• Assistive technologies – does your website perform as it should with a screen reader?
• Does your website work still even when zooming in and out?

Keyboard testing your website

All essential functionality must work with only just a keyboard. This is the primary factor in your web accessibility checklist.

This is simply because not everyone can use a mouse, and the basis for an accessible site should be for someone to be able to use the site just with the keyboard to tab through links, buttons and be able to use functionality.

What should you test for?

• Is the first tab a skip link to the main content, and does that work?
• Is the tab order sequential, logical, and as expected?
• Can you see where you are while tabbing through the website? Is there a clear visual change when you focus on a link, button or input?
• The menu: can you access the menu items, can you open a hamburger menu, tab around and close it again?
• Can you operate radio buttons, checkboxes, and dropdown selects in a form?
• Can you operate the next and previous buttons in a carousel?
• Can you open and close items in an accordion?

Keyboard checks for a modal (pop-up window):

• If a modal opens, can you access links on it? Does the modal get keyboard focus, or does the focus stay on the page itself?
• Can you access the close button (often an X) and close the modal?
• Can you close the modal with the Escape key?

Then run the same tests Do the same tests in a “mobile view”.

Automatic accessibility testing

There are several tools you can use to test for accessibility issues.

axe is one of the most complete and best maintained free browser add-ons at the moment.
Many accessibility check tools like HTML Code Sniffer and Google Lighthouse also run Axe as their engine.

HTML_CodeSniffer is a client-side script that checks the HTML and detects accessibility issues. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce customised coding standards by creating your own “sniffs”.

Headings Map browser add-on gives you a visual representation of the heading structure of a web page. It also indicates when the heading structure is not semantic and is missing levels.

Recently, browser vendors extended their accessibility information in the inspector. Like:  Firefox Developer Tools and Chrome Dev Tools.

There are multiple tools available for testing accessibility issues.

One notable tool is axe, which stands out as a comprehensive and well-maintained free browser add-on currently. Additionally, many other accessibility check tools such as HTML Code Sniffer and Google Lighthouse utilize Axe as their underlying engine.

The tool Code Sniffer – a client-side script, assesses HTML content to identify accessibility concerns. This JavaScript-based tool doesn’t rely on server-side processing and can be customized by developers to enforce specific coding standards through the creation of custom “sniffs.”

For a visual representation of a webpage’s heading structure, the Headings Map browser add-on is particularly useful. It not only displays the hierarchy of headings but also alerts users to instances where the structure lacks semantic meaning or has missing levels.

Moreover, browser vendors have recently expanded accessibility features within their developer tools, including Firefox Developer Tools and Chrome Dev Tools. These enhancements provide developers with more comprehensive insights into accessibility issues directly within the browser inspector.

Assistive technologies testing

Learning to use a screen reader can take some time, but it’s not rocket science and it’s well worth the effort. Screen reader testing gives you an understanding of how your code sounds not only how your code looks.

Good, free, screen readers for accessibility testing are: VoiceOver for MacOS,  and NVDA for Windows.

Use VoiceOver with Safari on MacOS and NVDA with FireFox on Windows. This compatibility may change as overall browser support for screen readers improves over time. JAWS For windows is also one of the most popular screen readers for windows users, but this is not a free product to fully use.

What elements should you test for accessibility?

In short:

• Check the content story: does it make sense reading from the top down?
• Check the headings list: does it represent the content and is all related content below the heading in the DOM?
• Check the link list: do links texts make sense?
• Check whether dynamic changes are announced.
• Check the images and if they are read out aloud, which can be done via alt tags.
• Check the navigation is logical and makes sense from the screen reader.

Zoom testing your website

People with visual impairments will find it hard to read your websites text if the text is either:

• Text is too small
• Conflicting colours – making text hard to read.
• Coded in pixels – making it less flexible for mobile devices.
• Unresponsive website
• Clickable buttons are not large enough

If your website can zoom to 200% without obvious responsive and text issues, then that’s great. Test your website for the zoom text and zoom for the whole page as this is what an impaired user would have to do through an assistive technology, so ensure you think about the fonts you use, the colours and the way your website is coded. Ensure you

Summary

As for the main takeaways:

• Always verify your code through testing, both during development and afterward.
• Remember, you are not the user; try to empathise with individuals who use the web differently from you.
• Empower your users by providing control and avoiding making decisions on their behalf.
• Lastly, learn HTML5, prioritizing the use of semantic (meaningful) HTML5 tags to structure your website’s pages, especially for accessibility purposes.

By prioritizing accessibility, you not only enhance the user experience but also make it fair for all of your users. Make your website accessible to everyone, revolutionizing the way users interact with your online business.

For any projects you need for your business, ensure you think of accessibility from the outset because its just as important as any other part of your website. Integrate accessibility into your workflow. Create a web accessibility checklist today to help you formulate a plan of action.

If you would like a full accessibility review, please email us at [email protected]

Accessibility