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
- WAVE Evaluation Tool - WAVE Evaluation Tool Chrome extension
- https://www.experte.com/accessibility - Website for checking multiple pages
- Web Disability Simulator - Simulate some disabilites for user experience review
- Colorblinding - Colour blindness tool Chrome browser extension
NVDA - NVDA is open source software, which means the code is accessible to anyone.
WAVE Web Accessibility Evaluation Tool
https://wave.webaim.org/ (Devloper note: Will only work with public facing websites, not localhost)
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.
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
"Link contain no text showing" error in Wave accessibility evaluation tool.
<a href="#" class=""><span class="search-icon"></span></a>
Add a aria-label="Search for..."
"Alt tag is the same as the title"
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.