AODA Compliance
You may have heard that you need to make your website accessible for AODA compliance (The Accessibility for Ontarians with Disabilities Act). Web accessibility obligations came into effect under AODA on January 1, 2014.
Web Accessibility makes the web usable for everyone. It removes barriers for those with limited mobility, learning disabilities, hearing disabilities, those who are colour blind, have low vision and seizure disorders.
Even if you aren’t required under the legislation, making your website accessible is the right thing to do.
[clickToTweet tweet=”Make the web usable for everyone 10 tips to build an Accessible #WordPress Website #wpa11y pic.twitter.com/R4qlzUl6ZB” quote=”Make the web usable for everyone 10 tips to build an Accessible WordPress Website”]
10 steps to make your website Accessible
1. Start with WordPress and an accessibility-ready theme.
Not all themes in the WordPress repository will meet the requirements. Only those tagged accessibility-ready have been reviewed to meet accessibility standards. Begin with one of these themes and you’ll be starting with a great foundation. These themes include proper ARIA roles, controls, forms, heading structure, use of colour, skip links and use of media.
2. Use the WP-Accessibility plugin by Joe Dolson.
This WordPress plugin fixes many common accessibility issues in WordPress sites. If making your WordPress website accessible matters to you, you need to use this plugin. Read the full list of features on the WP Accessibility Plugin page on WordPress.org.
3. Use of colour
Colour must not be the only way of conveying information or instruction. If your website is using colour alone to show links, those who are colour blind won’t able to differentiate between regular text and link text.
Styling links with underline or a bottom border is a simple way to make your website content accessible.
About 8% of the male population has some sort of color blindness. The colorblind have a narrowed color perception… colors lie closer to each other, especially shades of colors. [source: wearecolorblind]
To be accessible to all, websites need to have enough colour contrast between text and its background. Text that is larger is easier to read at lower contrast. Which means that you have a wider range of colour choices for page titles that use a larger font than body text.
This means you need to be careful when you change colours, fonts and font-sizes used in your accessibility-ready WordPress theme.
4. Ensure Keyboard navigation
Test your site using just the tab and return keys. Can you navigate through your site without using a mouse? Focus ensures that users can tell where the cursor is on the page when using the tab key to navigate.
Use the <button> element properly. A div, a span or a link with CSS styling to make it look like a button isn’t a button. The <button> element is accessible by keyboard navigation.
5. Create a Readable Page
Write in a way that’s easy to understand. People read online differently than they do in print so readability is important for all users, not just those using assistive technology. Some visitors to your site may have a cognitive disability or English may not be their first language.
Readable page copy is scannable:
- short sentences and paragraphs,
- bulleted and numbered lists,
- use italics to draw the eye to key points.
Allow users enough time to read and interact with content. Provide pause/play controls on sliders that include text. Letting users navigate between the slides at their own pace.
To avoid confusion, reserve the use of all caps for acronyms. Screen readers will read all caps as individual letters such as SEO, CSS or HTML. For example, if you write “about us” in all caps, a screen reader will likely read it as “About U.S.”
6. Use heading tags appropriately
Heading elements, allow screen reader users to navigate to specific sections of the page.
- Use Heading title tags (<H1> to <H6>) correctly to logically organize your page structure.
- H1 is your page/post title.
- Use H2’s and H3’s sequentially—treat an H3 as a sub-heading of the H2 that came before
- Select the appropriate heading for the structure of the document not for the way it looks on the page.
7. Image alt attributes
Include alternative alt text on all images or mark the image as decorative. The WP-Accessibility plugin provides a tick box making it easy to mark an image as decorative. If you fail to add alt text the WP-Accessibility plugin will let you know.
Get in the habit of using the alt field to describe the image for a person who can’t see it. Alt text needs to convey in words what the image conveys to those who can see it. Don’t stuff the alt field with keywords. You can leave the Image Title attribute blank.
8. Link Anchor text
The way to make a link accessible is to make the link text relevant and descriptive. By link text we mean the words used in the hyperlink. Words used should properly describe the link, don’t use “click here”.
9. Contact Form Plugins:
There are a number of popular WordPress contact form plugins offering varying degrees of accessibility. I expect that these will continue to improve as time goes by.
- The Contact Form 7 plugin can be used with the accessible defaults plugin
- Gravity Forms may be used along with the WCAG 2.0 Form Fields plugin
Don’t use Captcha code to validate forms. And don’t use colour alone to indicate required fields or error identification. Indicating required fields with the colour red alone is useless to users who can’t see red.
10. Accessible Audio & Video files
To make your website accessible don’t ignore audio and video content.
Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard. Additionally, all videos must have options for closed captioning and transcripts for the hearing-impaired.
Recommended WordPress Accessibility Plugins
- the WP Accessibility plugin
- WP Tota11y an accessibility visualization toolkit and
- Access Monitor for testing. Access Monitor runs an automated scan of your site using the Tenon.io web accessibility service.
Make WordPress Accessible
Each new version of WordPress brings accessibility improvements.
There is a great team of volunteers working to make WordPress more accessible. If you want to be part of this project visit – https://make.wordpress.org/accessibility/ and follow the #wpa11y hashtag on twitter.
As WordPress dominates the web, the web will become a more accessible place for everyone.
