Whether it’s a website, a web application or even a public convenience place, it should be accessible to all without discriminating people with disabilities. Thus, whether developing websites, web application or a building, keep in mind that besides the normal people, individuals with special needs would also be using it and thus provisions should be made to accommodate their special need.

Ignoring people with disabilities is prohibited by law and they can be sued for discrimination lest they comply with the accessibility laws of their land. One of them being the fact that one in 4 adults (26%) in the US have some type of disability out of which 4.6% of people are with a vision disability. Law offers equal opportunities to all!

What is ADA?

The ADA (Americans with Disabilities Act) is a law that came into effect on July 26, 1990 and it stipulates the standards that all electronic and information technology must be accessible to people with disabilities and it prohibits discrimination with the people with the disabilities.

The ADA guidelines apply to state as well as public entities with places of public accommodation including the internet and thus the websites.

Americans with Disabilities Act (ADA) compliant website means it is designed keeping in mind the standards set for the Accessible for people with special needs and disabilities. It means that your website must be accessible to all visitors including the visitors with disabilities.

There was a famous case (NAD v Netflix) where it was held that ADA applied to website-only businesses such as Netflix so that people with disabilities could benefit as well. National Association of the Deaf (“NAD”), America’s leading civil rights organisation for deaf and hard of hearing individuals, filed a case against Netflix seeking compliance with ADA law. Netflix wasn’t providing closed captions for most of the “watch instantly” streaming on their platform.

While looking for ADA compliance, you will come across WCAG and Section 508 guidelines. These all are basically standards set to make information or places easily accessible to differently abled people and doesn’t discriminate with them. 

WCAG (Web content accessibility guidelines) guidelines (WCAG 2.0 and 2.1) are web content accessibility guidelines created by W3C (World Wide Web) consortium for World Wide Web. These are international standards categorised into three level of compliance: A (minimum level of confirmation), AA (should support), and AAA (highest compliance).

Section 508 are the amendments included in the US Rehabilitation Act of 1973 to mandate compliance of websites, documents, and applications developed US with federal funding or US government agencies.

Section 508 is a legal requirements where as WCAG 2.0 are a set of guidelines produced by W3C governing body.

Let us focus on what are the ADA guidelines and how your website can be made ADA compliant. There are lot of information, systems and plugins that can make your website ADA compliant.

However, no automated system or plugin can make a website 100% ADA compliant without manual efforts and without the knowledge of the ADA and content accessibility guidelines. Here are some of the simple steps and best practices to help get started on the right accessibility path.

To meet ADA Compliance, most websites should confirm level AA of the WCAG 2.0 / 2.1 guidelines. These are listed below for being handy to our readers. WordPress CMS users can get great help in complying with the guidelines by installing certain plugins that can correct many of the technical accessibility issues with WordPress themes and designs.

Skip links – a must

Implement ‘skip links’ in the contents for navigation using the keyboards. This helps skip to other sections on a page. We can add skip links and define user-defined targets to move or scroll.

Have meaningful Hypertext for links

Instead of normal hypertext such as click here, continue reading or read more, add more meaningful hypertexts to avoid confusion on pages with many links. Add meaningful links as a page with many links will have as many read more or click here creating confusion for text readers.

E.g instead of Read more use something like “continue reading <post title here>“

Outline of elements on focus

Add outline to elements so that they get highlighted when on focus. As modern designs does not provide a design for links except normal highlight/styling on mouse-over, many keyboard users find it difficult to know where they are on a page. So, when an element changes on getting the focus, keyboard users know where they are while navigating a page.

With the help of CSS, designers can change the text outline, change the background color, make high contrast visibility or even change the text color as you can see in the below images.

Toggle for Text size & Color

One of the most important design considerations we have to focus on is providing the option to change the size of text along with providing option to control color contrast. Sometimes it is difficult to view texts due to background color not too different from the text color. Option to change color contract of a page adds to content accessibility. Additionally, giving the control to increase/decrease the text size adds to browsing experience.

Use “longdesc” for Images

For images, sort text ‘alt’ attribute isn’t enough to add long descriptive information describing the image. The HTML ‘longdesc’ attribute comes to the rescue where more essential information can be added describing what the image is about. In the WordPress Admin, the “Description” field when adding a image is “longdesc” attribute.

The longdesc can also contain URL of a page which contain the long description of the images.

Add Language Attribute

As mentioned earlier, add a language attribute to your website or to a specific page if the content is in different language than the rest. For e.g for a English content website, add French language attribute on a page if it has French content.

E.g. <html lang=”en”> or <p lang=”fr”>Le Bon Ce paragraphe</p>.

Add Descriptive Error Alerts

Add descriptive error alerts for forms and other input elements so that people with disabilities understand the error.

E.g Fields when left empty, show alert such as “The Name field is empty, it is a mandatory field and it must be filled before submission.“. OR “Date you have entered is in the wrong format. Please correct the format and submit again.“

Use plugings, browser extensions, & tools

You can check the level of your website’s accessibility by using tools such as WAVE (free) or test the accessibility using browser extensions.

As for a WordPress site owner, you have an advantage as their are plugins that makes your website compliance to certain degree. Although accessibility is at the core of the WordPress CMS application, however when the CMS is customised, theme or plugins integrated, it may break the accessibility rules. 

Some of the popular plugins are listed below-

• WP ADA Compliance Check Basic – (free with limit to 15 posts/pages or paid license per website)
• Web Accessibility – (paid plugin starting $49 per month based on page views with free trial)

Read the accessibility guidelines on how you can make your WordPress website accessible and comply with the ADA guidelines.

Besides the moral, ethical, and legal reasons to comply with ADA, Section 508, and WCAG guidelines, there are other strong reasons to comply with them too.