Accessible On-Page Elements: Step 4 of 5 Toward WCAG Compliance

Step 4: Accessible Off and On-Page Elements (Your SEO was right.)

How many times have you read, “SEO is not important” or “SEO is a waste of time and resources?” Each of the following elements SEOs regularly remind site owners are fundamental to search visibility, are also crucial to accessibility. The following elements need to be unique to each page, and need to make contextual sense.

Let’s get started adding: 

1. Meta Titles (Under 55 characters): Meta titles should be short, sweet, to the point, and unique to each page with the primary keyword to the left or first in the text. This placement makes it easy for people using screen readers to understand immediately what the page is about. Meta titles also appear in the tab in browsers, not to mention their importance related to SEO – these usually show up in search results as links or headers in search features where the page is returned for a given query.
2. Meta Descriptions (Under 155 characters): These should also be concise and reveal and provide more context for what the user will find on the page. For each page, these should also be unique.
3. Alt Text: Provide descriptions for all images, accurately detailing what the image is. Add captions for images as needed. The W3C has some guidelines to help you understand if alt text is necessary and provides examples of how to label images correctly. Examples of types of images, and links to help you learn more:
   1. Informative images graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
   2. Decorative images provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
   3. Functional images – The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
   4. Images of text – Readable text is sometimes presented within an image. If the image is not a logo, avoid using text in it. However, if images of text are used, the text alternative should contain the same words as seen in the image.
   5. Complex images (graphs and diagrams) convey data or detailed information. For these you’ll need to provide a full-text equivalent of the data or information provided in the image as the text alternative.
   6. Groups of images – If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
   7. Image maps The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.
4. Alt txt errors to avoid 
   1. Avoiding long text alternatives for images that are links can slow down navigation.
   2. Avoid describing images that are not editorially significant or functional as this can make listening to pages cluttered and overload the user.
5. Proper H1 – Check each URL for proper headline hierarchy – make sure they are in the correct order. For example, an H3 shouldn’t come before the first H2. These are important elements in proper markup/document structure, SEO, and in WCAG – not just a handy tag to make fonts look pretty. Keyboard-only users skip through page content by headlines and if the page’s headlines are out of whack, so is the user’s experience.

Text Links (aka anchor text) or as we like to call it, “The Death of the ‘Click Here’.” From an SEO perspective and a UX perspective – especially for those using a screen reader – it’s a worst practice to use “click here” as anchor text. Here’s an example:  a user is trying to hop link-to-link listening to a screen reader, and all they hear or read is “link click here, link click here, link click here.”

“Click here,” “learn more,” etc. do not meet the WCAG requirements. The WCAG guidelines recommend instead that, “Text links must make sense.” (And all of the SEOs rejoice.) A good anchor text/text link example is, “Download the WCAG Compliance Best Practices PDF” which would be read as, “link Download the WCAG compliance best practices PDF.”

Just one final step left – Step 5: Audio, Video, Forms and Design. Get familiar with what’s needed to make these site and app elements accessible to all your visitors, or review the other sections of the guide below:

The AIMCLEAR Guide to Web Accessibility and WCAG Best Practices

• Introduction

A Guide to Help Make Your Content Accessible

• What is WCAG and why is it important?
• WCAG Section 508 & The Laws

5 Steps to WCAG Compliance and A Better User Experience

• Step 1: Web Accessibility Statement
• Step 2: Preliminary WCAG Tests and Checks
• Step 3: Going Mobile
• Step 4: Accessible Off and On-Page Elements (Your SEO was right)
• Step 5: Audio, Video, Forms and Design

Summary and Next Steps

• Start Making Your Web Sites & Apps Accessible