Accessibility Reminders (WCAG 2.0)

As time progresses and your content changes, there will be some items that may fall out of compliance with WCAG web accessibility standards from simply updating your website. You can perform periodic tests, but what will also help will be to be mindful of these commonly overlooked tasks.

1. Images should have ALT Tags

Alt Text or Alt Tags are the text equivalent for an image. They are NOT the title, caption, description or file name. Alt Tags are hidden data in a web image that describe the photo to machines, readers, and robots.

Your CMS should have an ability to edit the alt tags of your images. Editing it once will affect all instances of the image on your site.

Decorative images like a flower or a background image DO NOT need alt tags. Slideshow images may need alt tags. Decorative flyers and images with informative text on it, definitely need alt tags.

2. Accessibility Check for PDFs

PDFs on your website will also be subject to accessibility standards. The idea behind it is that if they are not “accessible,” then you are depriving that content from certain users with impaired vision.

You can choose to eliminate PDFs, make the PDF content redundant by having an on-site equivalent, or you can perform an accessibility test for your PDF (“Accessibility Checker”) in Adobe Acrobat. This test has very similar standards to web standards in terms of forcing a certain structure.


3. Use Headings for Structure

On your pages, heading 1 (h1) is the title and should be seen once. Heading 2 (h2) can be used as section titles to break the article into parts. And heading 3 (h3) can be used within the heading 2 to break that heading 2 section into parts.

You should not have gaps in headings (example: heading 3s exist, but there’s no heading 2).

Your page structure, with headings, will look something like this (notice the hierarchy:

Title (h1)

Section 1 Title (h2)

Text here.

Sub-section A Title (h3)

Text here.

Sub-section B Title (h3)

Text here.

Section 2 Title (h2)

Text here.

The hierarchy helps both people and machines see the structure of your writing much better.

Note: I realize the above makes my page accessibility non-compliant. 

4. Form inputs should have labels

When you have forms, the fields will need labels. You may be able to edit these from your form builder system. If not, you will need to do it manually (details of the rules here).

5. Color Contrast Needs to be High

Your website should be styled to have a color scheme already and contrast should have been taken care of earlier. If you do, there should be a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA between the text color and background.

This is important if you have changes in color for contextual and aesthetic reasons  (both are non-compliant). This is also important to test if you have background images or gradients, which most machines cannot detect.

For example:

(please highlight the below text if you can’t read it)

This background can’t be calculated by many contrast tools.

This background image may also not be detected by contrast tools.


You can use this contrast checker.