Is Your Web Content Accessible?

Web content accessibility is one of the most overlooked and undervalued aspects of web design. On the other hand, search engine optimization continues to be a top priority for any serious web developer. But what most people don’t realize is that making your site more accessible will give it a boost in the SERPs as well. This article will not only explain why, but will also offer web accessibility tools that can be effective for SEO.

According to Wikipedia, web accessibility is an approach to web design that aims to make websites “usable by people of all abilities and disabilities.” For the most part, this refers to people who are either visually or hearing impaired or are immobile in certain parts of the body necessary to operate a computer. Consequently, these people must use special software, such as screen readers and magnifiers and speech recognition software, to help them utilize the Internet. It is up to the web designer to code pages so that all users can navigate through them.

It’s also important to remember that people with disabilities aren’t the only ones who may have trouble navigating a website that isn’t completely web accessible. As you know, people are now connecting to the Internet via many different types of devices that, in turn, employ a variety of user agents to access web content. Internet users often find themselves constrained by their environment (e.g. noisy surroundings, bad lighting, etc.). Employing accessibility standards will not only provide a better user experience, but will also help a search bot crawl your site. After all, a search bot is basically a user that needs enhanced accessibility.

All of the web content accessibility guidelines discussed in this article can be found in version 1.0 on the W3C website. However, criticisms have been made against this version for being out of touch with current technology. And though version 2.0 is now complete, it has been accused of being unorganized and difficult to understand.

Because of this, Joe Clark and his team of developers created the WCAG Samurai errata for WCAG 1.0. They claim to provide a more coherent and up-to-date guide that is more practical for common web design. Check out all three and decide for yourself which is best. Using them will also help clarify some of the things being talked about in this article.

The following sections will go over some of the more important ways to enhance your site’s accessibility that are also conducive to good SEO.

For some reason search bots just can’t seem to crawl anything but text. In the same way, for example, a blind person can’t see any of the images being displayed on a web page and a deaf person can’t hear the sound coming from content with audio. Thankfully, all seem to understand words and their meanings, whether they are read, heard, or felt (Braille). So one of the first things a developer needs to do when optimizing a web page for search is make sure there is plenty of readable text. In fact, the first guideline mentioned in WCAG 1.0 is “Provide equivalent alternatives to auditory and visual content.”

When dealing with images that are an integral part of the page content, definitely include descriptive alternative text and titles. Alt text is alternative information that clearly describes the image when it can’t be seen or displayed. An image title acts like a title (go figure!) and should advise the user about the element’s function. By the way, alt text is crucial for search crawlers. Last year, Google said it mainly uses alt text to determine what an image is.

Some pointers:

  • For an image of text, the alt text should say exactly what the image says.

    • When the typography or format of the text is what’s important, be sure to explain that in the alt text.

  • Use CSS to make images of list bullets.

  • Do not use alt text for images that are not integral to the page’s content.

If your page has audio or video recordings consisting mainly of speech or dialog, then you should provide a complete written transcript. This is the best way to get search crawlers to understand the content of your page. It can also provide more content to a page that is lacking. However, remember that a transcript is not a substitute for captioning. Also make sure that you provide an audio description for video that cannot be understood from the main soundtrack.

* A summary should also be provided for tables and charts, especially when they rely mainly on visual content (e.g. Line and bar graphs).

Another good tip is to make sure your link anchor text is descriptive and useful. Because most blind users browse a web page by tabbing through each link, it is important to make sure your page isn’t full of “click here” links that offer no description. Obviously, this also helps search bots understand what the linked page is about. If you simply must use non-descriptive link text, then at least add the “title=” attribute to provide further clarification.

In order to comply with any version of the WCAG, all web pages must have valid HTML and CSS (you cannot use Frameset). Again, it’s easier for search bots to crawl a site that’s text-based rather than one that uses images to convey information. It’s also a good idea to use heading elements (H1-H6) to define the page’s HTML semantic structure. Although this doesn’t do much to boost your page ranking, it will give your keywords prominence (assuming you put keywords in your H tags) by structuring the content based on how you want the bots to crawl your site. Headings also help people who use screen readers to navigate through a page.

One of the first things they should teach you in SEO 101 is to disable all JavaScript and CSS because browser-enhanced functionalities are difficult for search bots to access. WCAG 1.0 asks you to make sure your page content can be read without style sheets, and that pages are usable when scripts, applets, etc. are disabled or not functioning. You don’t have to provide alternative presentations or alternate pages.

Developers should always identify the predominant natural language used in a document. This can be done through markup (in HTML use lang=” ” and in XML use xml:lang=” “) or through HTTP headers. It will help search bots find keywords in a specified language. You should also define abbreviations and acronyms where they first occur in a document using the “title” attribute of the ABBR and ACRONYM elements. If anything, it will help improve your ranking for that term.


Here are several tools that will check the accessibility of your web page as it relates to SEO:

The Functional Accessibility Evaluator gives a summarized analysis and a detailed page report for any specified web page. The tool analyzes the page based on:

  • Navigation and Orientation

  • Text Equivalents

  • Scripting

  • Styling

  • HTML Standards

Wave let’s you type in the URL of a page you want to check; it will display a graphical representation with the issues marked where they are found on the page. Just hover your mouse over the icons and indicators to reveal the specific issue.

 

Lynx Viewer provides a text-only version of a specified web page. You can then see whether your page has enough content when the scripts and style sheets are disabled. However, the one caveat is that you must be the developer of the page you wish to view. Check their how-to page for more information.

The Image Analyzer checks the width, height, alt, and longdesc attributes of every image on a web page to make sure there are no accessibility issues.

The Durham University website has a number of useful web accessibility tools. Alt Text Checker focuses only on the alt attribute for each image on a web page. It juxtaposes a text version of the image with the actual image so you can see its context in plain text. The Link Context Checker shows all links out of context. You should be able to identify the link target just by reading the link text.

Firefox has a couple of useful web accessibility extensions as well. The Mozilla/Firefox Accessibility extension is a handy toolbar that helps developers check their structural and styling markup as well as headings, titles, frames, and many of the other elements we have discussed so far. Web Developer FireFox extension lets you disable scripts and styles, display alt attributes and form details, and provides other useful features. Fangs will show you how your web page looks when rendered by a screen reader. It also provides good header and link analysis.

In conclusion, there are many other tools out there, so please don’t rely solely on the ones mentioned in this article. Hopefully you’ve gained a better appreciation of web accessibility, even if your main goal is to improve your search rankings.

Google+ Comments

Google+ Comments