Accessible Web Design Checklist for WordPress

Why is website accessibility important?

Approximately 1.85 million Ontario’s have a disability. This includes 15% of the overall population which has a disability and 40% of those over the age of 65. This number is currently reaching 1 in 5 Ontarian’s as the population continues to age.

Making your web site accessible is not only the right thing to do but also impact your businesses bottom as your website can now reach a larger audience. By improving user experience to meet accessibility standards this can assist users to overcome barriers caused by a poor user experience.

While those with disabilities also include mobility issues, this article will cover those who are affected from using the internet or reading screens and how it relates to web design.

What is AODA?

On June 13, 2005 the Accessibility for Ontarian’s with Disabilities Act (AODA) was implemented to provide standards to assist those with vision, hearing, intellectual, learning and mental health disabilities. The goal was to make Ontario accessible for all people with disabilities by the year 2025.

What is WCAG 2.0?

AODA’s Accessibility Standard for Information and Communication states that websites must meet certain technical criteria according to the Web Content Accessibility Guidelines 2.0 (WCAG 2.0). This is the most widely accessibility guideline in the world and is managed by the W3C Consortium.

There are 3 levels to WCAG 2.0 which include:

Level A – This is the minimum level for a website to be considered accessible. It addresses basic accessibility issues such as providing HTML alternative text to images. This level is not limited to only one disability and includes visitors using screen readers. It typically involves the lowest impact on presentation and design.

Level AA – Addresses more advanced issues including visual presentation of images and text. This would require more advanced changes to the design and layout to adhere to specific populations. By 2021, it is expected to at least meet Level AA. This can include consistent navigation throughout the website, content is organized under clear headings and that text and background have a minimum level of contrast for legibility.

Level AAA – This may address issues for a specific population of users and may be more expensive to address depending on the website platform, however these issues are usually low impact items. This level allows for the greatest number of those with disabilities to access a website. Level AAA criteria may include sign language translation for pre-recorded videos, have content at a 9th grade reading level and have user data saved for re-authentication.

How to make your WordPress website AODA compliant

1. Make Sure Your Website Is Keyboard-Friendly

Since most assistive technologies rely on keyboard navigation it’s important to make sure your website is keyboard-friendly. This includes adding the ability to tab between fields on forms and areas of the page including links and content. Your job should be to ensure that all areas of the page are accessible via the tab key.

2. Add ALT Text To All Images

When adding images to your website be sure to assign alternative text. ALT text acts as a replacement if an image fails to load.

The benefits of ALT tags not only assist those who may be visually impaired but also improve a websites SEO, therefore it’s in your best interest to make adding ALT tags a habit during your web design.

3. Use a WordPress Theme That is Accessible Ready

There are several premium themes available online that are designed by WordPress developers and meet WCAG standards. With the proper use of select WordPress themes you can build a website that is already accessible-ready.

Some accessible WordPress themes have passed the WordPress Review Team’s accessibility review which include: Avada, X Theme, Twenty Nineteen, Apex, Dox, Icelander, Founder, Monument Valley, Muse, Talemy and Morning.

It’s best to review each WordPress themes features and design to see which is best suited for your project.

4. Using Content Headings (H1, H2, H3..)

When structuring the content on your website it’s important to use headers. This will make content on your website easier to digest and understand, plays a big role in SEO and can improve your websites accessibility.

Using the correct heading levels can assist those using screen readers interpret content and navigate specific sections on your page.

Headings should be used as a hierarchy on every page to include: 1 H1 tag per page, followed by subheadings using H2 and nesting all additional heading levels.

5. Choose Colors Carefully

“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.”

Different people perceive colors in different ways and on a spectrum. It’s important when selecting colors in your web design, to make sure that visitors can distinguish elements on the page.

It’s important to make sure that both text and background don’t blend into each other. This is important so that text stands out and is easily legible.

Avoid clashing colors, colors that are too similar which would lead to eye strain. There are several tools online, including WebAIM and Contrast Checker which give you a score on your color choices.

6. Make Video & Multimedia Elements Accessible

Avoid auto-playing media such as video, sliders, animations, carousels and audio. This can make your website inaccessible and interrupt screen readers. Especially for those who have hearing, cognitive or physical disabilities.

Make sure that these media elements have control features so that visitors can start, stop, pause, restart or hide content.

One key requirement for videos to be AODA complainant is to provide a textual alternative to non-text content. This can enhance multimedia such as videos, podcasts and audio files.

In order to meet WCAG standards be sure to include subtitles, captions, descriptions and transcripts for video files. This will also help improve your websites SEO as crawlers can better understand media content.

7. Avoid content that flashes

According to WCAG guidelines it’s important to remove any content that flashes as this can trigger seizures for those with photosensitivity.

Use Photosensitivity Epilepsy Analysis Tool (PEAT) to analyze your website.

If you have any flashing content on your website, make sure it doesn’t flash more than 3 times per second.

8. Use Contextual links with Anchor Text

Add descriptive links with anchor text in order to comply with AODA and WCAG 2.0. This can provide visitors more information than links such as “Read More” or “Click Here”.

Placing descriptive keywords in anchor text is not only effective for SEO but also effective for accessibility especially for those who use screen readers.

9. Use a Clear Typography

Small changes can make a big difference in improving accessibility in addition to improving overall user experience such as font choice.

Choose a clean typeface that is easy to read like a San Serif font which can aid those who are visually impaired.

AODA recommends having a body font of 16px which is becoming a common trend with most websites. Nobody wants to read text that is smaller than 10px so small font sizes should be avoided.

If you decide to embed text in images, be sure to use a large cont size and contrast text & background colors.

Font size controls can be added to your website which can provide visitors the options to increase or decrease font sizes.

10. Specify Page Language

By specifying your websites default language can help visitors and crawlers understand your websites language. This is a require by WCAG in order to make your website AODA compliant.

Setting the default language will allow screen readers to properly pronounce content on your website.

This is something can can be added to your website by adding an HTML tag. Specifying the default language will also help Google crawlers understand your websites language and geotarget location(s).

Web Design Accessibility Tools

  • A-Checker – Web Accessibility Checker
  • Tenio – Run an automated scan of your site using the Tenon.io web accessibility service.
  • Contrast Checker –  This tool is built for designers and developers to testcolor contrast compliance with the Web Content Accessibility Guidelines ( WCAG ) as set forth by the World Wide Web Consortium ( W3C ).
  • WAVE – Provides site-wide monitoring and reporting of accessibility over time.
  • Photosensitive Epilepsy Analysis Tool – PEAT can help authors determine whether animations or video in their content are likely to cause seizures.

Final Thoughts

Having your website accessible can not only increase your websites visibility, improve SEO & conversions and provide a larger reach.

It’s important to take the time to review your website to ensure it meets AODA standards so that those with disabilities can access your website..

References:

https://www.microassist.com/digital-accessibility/wcag-2-0-conformance-levels/
https://www.wuhcag.com/wcag-checklist/
https://www.w3.org/WAI/standards-guidelines/wcag/