Today we will be helping you to make your website more accessible by breaking down the process into simple to follow steps.

How to test your websites accessibilty

The Best method for testing the accessibility of your website

  • Simply using your keyboard, can you navigate the site?
  • Can you tab through in the proper order
  • Can you tell where you are focused?
  • Do form controls & links work as expected?

The Testing process

  • Manual keyboard testing (Tab controls)
  • Screen reader testing (Listen for correct results)
  • Semi-automated testing with WAVE (Use plugins like Colorblinding to check for contrast issues)
  • Implement an automated tool like AXE Core
  • Use real humans

Testing tools & resources

Only a human can assess true accessibility. But tools can help to evaluate issues. Using JAWS or NVDA software try navigating your website (Using TAB to go forwards & SHIFT + TAB to go backwards). If you hear unexpected things you know you have a problem that needs to be fixed!

Chrome browser extensions

Screen Reader

NVDA - NVDA is open source software, which means the code is accessible to anyone. 

Manually review

https://www.w3.org/WAI/WCAG21/quickref/

WAVE Web Accessibility Evaluation Tool

https://wave.webaim.org/ (Devloper note: Will only work with public facing websites, not localhost)

Automated testing

AXE Core
https://github.com/dequelabs/axe-core
https://github.com/dequelabs/grunt-axe-webdriver

Markup & semantic HTML tips for accessibilty

Review your documents structure, if you remove CSS will it render logically? This is how screen readers will consume content.

Using semantic HTML. Semantic HTML means using correct HTML elements for their correct purpose as much as possible. Semantic elements are elements with a meaning; if you need a button, use the <button> element (and not a <div>).

Use of headings should be in order per HTML5 section

<h1> One single h1 per page which provides a clear title related to the main content
<h2> Should have a parent h1 heading and so on. Never skip a level in a section.

https://www.w3.org/WAI/tutorials/page-structure/headings/

Set the content body first so that any side navigation is tabbed through afterwards. Use flex order if required.

Accessible Rich Internet Applications (ARIA)

ARIA (Accessible Rich Internet Applications), is a specification from the W3C and created to improve accessibility of applications by providing extra information to assistive technologies, such as screen readers, via attributes which could be added to HTML It does not add new functionality and is meant to act only as an extra descriptive layer for screen readers, If the HTML mark-up alone isn’t sufficient to convey the meaning of the page structure & nonstandard elements are used ARIA roles and states & properties can be used.

ARIA attributes are predefined in the spec and are divided into two categories, roles and states & properties.

For example you can use aria-label to attach a label to an anonymous html element, where a label isn’t practical.

Common accessibilty problems and how to fix them

Problem:

"Link contain no text showing" error in Wave accessibility evaluation tool.

<a href="#" class=""><span class="search-icon"></span></a>

Solution:
Add a aria-label="Search for..."

Problem:
"Alt tag is the same as the title"

Solution:
If the information conveyed by the title attribute is relevant, consider making it available somewhere else,
in plain text and if it’s not relevant, consider removing the title attribute entirely.

If you’d like to know more then please get in touch to see how we might be able to help you improve your website for all of your users needs. 

Get in touch

Contact Get in touch