WCAG

WCAG stands for Web Content Accessibility Guidelines. The WCAG guidelines were made primarily for creating websites that are more comfortable to use for people with disabilities.  Other than helping people with disabilities navigate your website, a website that is coded to meet the WCAG guidelines will help make your website better for all of your users.

 

Here are a few examples of how coding a website to meet the WCAG guidelines will help your end users:

 

• Visitors browsing your website on a mobile phone while out on the sun will benefit from your website having darker texts that are much easier to read.
• Older people browsing your website will benefit from the darker text and also from the larger font sizes and the ability to enlarge your website for themselves if necessary.
• People with temporary disabilities like a broken arm will be able to browse your website only using a keyboard.
• Describing with text what’s on every image on your website will not only help people with vision impairments that use screen readers for web browsing, but will help your Search Engine Optimization efforts by linking keywords to your photos.

 

WCAG in its latest version 2.1 is unfortunately a very heavy read with more than a thousand pages of technical information so we won’t go into all the details here. We will just focus on 3 things that can help you and are relatively easy to implement.

 

First you should know that there is a growing trend of Americans with Disabilities Act lawsuits that target businesses whose websites aren’t accessible for people with disabilities. You can read more about this legal issue on our ADA Friendly Website page.

 

Also, before you ask – adding an “accessibility plugin” to your website won’t make your website much (if any) more accessible than your website already is, no matter what the company that made the plugin tells you. Accessibility is a complicated issue and can’t be automated, we have not seen any plugins yet that come anywhere close to accomplishing the goal of meeting the WCAG guidelines via a plugin.

 

Image ALT descriptions

Starting with the most important thing; because it’s where accessibility and search engine optimization meet, the “alternative text” or ALT description. ALT descriptions are an attribute you add to the images on your website that describe what each image is about.

 

People with vision impairments who can’t see images on your website depend on screen readers to browse the web. Screen readers are programs that read out loud the content of each page on your website and when encountering a photo the screen reader will read an ALT description if an ALT description is available.

 

Similarly when a Google Bot is indexing your website, without a proper ALT description, Google won’t understand what’s in your photos and how each photo should be indexed and cataloged in the Google database.

 

Because of screen readers and the Google Bot, you should always add clear ALT attributes to your photos that properly describe what is in each photo. Clear ALT descriptions also help the SEO of your website as well.

 

 

When adding an image to WordPress you should fill out the “Alternative Text” field with an image description + add some keywords in the descriptions for SEO purposes.

 

In the example above, instead of a simple description with one keyword like:

 

“a patient holding his mouth while sitting on a dentistry chair”

 

you can write something like this:

 

“a patient holding his mouth while sitting on a dentistry chair after a root canal performed at practice name in city, state”

 

with more accurate keywords and a better ALT description, Google will now have the option to consider the ALT description when deciding where to catalog and index this image in the Google database.

Good text contrast

Contrast in this case is the difference between the color of the text on your website and the background color behind the text. If there is not enough contrast between the text and the background color, your mobile users can have serious problems reading the text when trying to view your website on their mobile device while outside. In addition to your mobile users, normal computer screens used indoors have different color and brightness settings and even in the best of conditions all monitors will not display your website the same way that you see it. Also, people with vision impairments are more likely to struggle to read your page when the text and background color do no have enough contrast between the two

 

In order to simplify things, we recommend that you have a contrast ratio of 4.5:1 between the color of your text and the background color. You can check this ratio and easily adjust your colors using this tool. Unfortunately this ratio heavily limits the colors you can use, but we would recommend using the 4.5:1 ratio in your headings and main content sections.

 

Even if changing your contrast helps a very small number of people that visit your website, using more contrast might bring you a new lead. Can you say the same thing about having less visible texts?

Link and focus visibility

For Accessibility and Usability purposes visitors should have no doubt what’s clickable on your website. For example, on our website every link is either underlined, or every link looks like a button having borders all around the text. We would recommend using the same tactics on your website.

 

Additionally, as you can see in the example above, the link “Keyword Research” looks a little different than the other items in the list, the Keyword Research box above is in a state called “focused”.

 

Since not everyone can use a computer mouse to select what they want as they browse your website. Your website should be coded so the users can use a keyboard Tab key for moving from one link to the next, the currently selected link above being the one link in the “focused” state until the Tab key is pressed and the user moves to the next link.

 

Internet browsers by default always highlight the focused link, but unfortunately many website themes disable the focused link feature which is a mistake. You can easily fix this coding error with a little CSS knowledge, or you can contact the template author or your website provider to make the correction.