WordPress content entry ADA

Author: Mason Arnold | Date Posted: Apr 4, 2019

What is ADA compliance?

For those unfamiliar with the Americans with Disabilities Act, it is a government regulation passed in 1990 and was originally intended to apply to physical spaces and allow those with handicaps reasonable accommodations to access those spaces. At that time, the internet as we know it was still in its infancy so minimal guidance was given as to how sites should be built and maintained in order to allow access for disabled individuals. Since then a series of high profile lawsuits has led regulators to re-visit the language and general guidance to allow for a more accessible web experience.

Does my website need to meet these regulations?

If you are a business that exists to benefit the public, a local or state government agency, or are a private employer with 15 or more employees, you should be compliant with the ADA regulations. A good rule of thumb to follow is that if your physical location requires ADA compliance, chances are you’ll want to protect yourself by assuming your web presence does as well. And, a better rule of thumb to follow, whether you’re legally required to or not, abiding by these regulations creates a fair online experience for all users – disabled or not. For all other organizations, the law, as it stands, is a little bit unclear, so to be sure to avoid potentially expensive legal repercussions, it’s best for all commercial websites to meet these regulations.

In regards to WordPress, what is template and page level Compliance?

As you may already know, WordPress themes are structured in such a way that allows the user to create pages based off of a series of templates. The templates provide a basic structure and a set of components. When building a sites templates we do so using ADA best practices and test for compliance at the code level. So when adding content it is crucial to ensure it is done properly to maintain ADA compliance at the page level. While a template can always remain compliant, if page content is entered incorrectly it will become non-compliant and leave you vulnerable to ADA compliance issues.

How do I maintain compliance?

Let’s say you have a brand new site that has been handed off to your team and is compliant at the template level. While adding content here are some best practices to keep in mind.

Some common offenders at the page content level are:

  1. Images with no Alt text
  2. Bold and Italic tags
  3. Incorrect header nesting

Images

When adding images to the media gallery make sure to fill out the form on the right hand side including the Alt field.

Wordpress image ada alt text

There are two main types of images used on most websites.

Types

Informative – represent concepts and information – Alt Text – Short description conveying essential information

Functional – Image used as a link or button – Alt Text – Describe the functionality or link destination

 

Bold and Italic tags

Before the release of WordPress 5.0 and the gutenberg editor there was no native ADA compliance features in the wysiwyg editor on the WordPress dashboard. Any sites pre-dating these updates would have populated the code rendered in the browser as non compliant. If you test and receive these types of errors, simply highlight the bold or italicized text. Click the “B” and or “I” button at the top then click again and it will automatically assign the correct html tag.

Worpress wysiwyg toolbar

Header nesting

A common misconception and bad habit I have come across while performing ADA audits is improper header nesting in an attempt to achieve a certain type of visual appearance. While this might make your site look the way you want it can bring it out of compliance and depending on the large the site is be an extreme undertaking to correct.

  • Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
  • Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example. It is ok to skip ranks when closing subsections, for instance, a <h2> beginning a new section, can follow an <h4> as it closes the previous section.

ADA workflow diagram

How do I find out if my site is compliant?

A quick way to test your site is to use AChecker, just copy and paste the page URL to be tested into the address bar.

 

Space Talk

Ignitro

4450 Belden Village St NW suite 808

Canton, OH 44718

Facebook Twitter Linkeding
1-844-IGNITRO

(446-4876)

© Ignitro 2019  | Privacy Policy | Blog