The Missing Gray Hat SEO

Simple ideas to improve your site’s accessibilityA lot of websites today have accessibility problems. Development tends to cater for the mainstream of desktop users without thinking of the impact that coding choices may have on users who find it more difficult to access and use your content. Many of the most common problems are minor, and can be easily fixed, and by taking some easy measures you can significantly improve the accessibility of your site without impacting on the look and feel or functionality.

So, inspired by an earlier post, here’s a few tips to make your site more accessible. The tips are not presented in any order of importance, and this is not an exhaustive list. But, if you implement just some of these changes, your users will profit - and because accessibility helps search engines too, your rankings could get better too.

A. Alt text and alternate content

The first step is easy. Every image and object on your site should offer alternative text which describes or replaces the object itself. Make sure the alt text is informative, its role is to be a text equivalent of the contents of the image. Some very simple examples:

<img src=”taj-mahal.jpg” alt=”A photograph of the Taj Mahal”>

<iframe src=”weather-forecast.html”><a href=”weather-forecast.html”>Find out the current weather in Agra.</a></iframe>

If the image or object contains information which is not represented elsewhere on the page, then you must ensure that you convey the information in a non-visual way too. So if you show a graphic of a pie-chart showing important information, you should also offer the same information in a data table.

This brings us on to:

B. Transcripts of video content

There is more and more embedded video content on the web. But this can be a huge barrier to many. A real example: a local politician’s website during an election campaign had three videos explaining their priorities. But if you couldn’t access the videos, there was no alternative source. I couldn’t view them, and I ended up voting for someone else.

As this is supposed to be a simple guide, I won’t go into questions of captioning or codecs. But if you add a text transcript of the contents of the video, or even a summary of the important points, you will not only help users who can’t access the video but you will also help users who just want to quickly scan the information. It will also allow the text to be indexed by the search engines. Everyone wins!

C. “Click here!”, or descriptive link text

One trick used by screenreaders is to read out a list of links on the page. The user can then quickly jump to the information they need. However, doing this takes the links out of context, so you must take action to ensure that each link makes sense on its own. An example:

BAD: <p><a href=”/taj-mahal.html”>Click here</a> to read more about the Taj Mahal.</p>

GOOD: <p><a href=”/taj-mahal.html”>The Taj Mahal: History and Architecture</a>.</p>

Using descriptive anchor text makes the links more valuable to search engines too, for much the same reason: it adds context to the link.

D. Space between links

It is very hard for accessibility software to read the contents of the page when there is no space between adjacent links. It becomes unclear where one link ends and another begins. This can happen in a badly-designed menu. The solution is to ensure there is always more than just white-space between each link. This can be done with a visible separator (a hyphen or dash), or by placing the links in a list and using CSS to style them how you want.

BAD: <a href=”1.html”>Page 1</a> <a href=”2.html”>Page 2</a> <a href=”3.html”>Page 3</a> <a href=”4.html”>Page 4</a>

GOOD:

<ul>

<li><a href=”1.html”>Page 1</a></li>

<li><a href=”2.html”>Page 2</a></li>

<li><a href=”3.html”>Page 3</a></li>

<li><a href=”4.html”>Page 4</a></li>

</ul>

E. No javascript: links

There’s nothing wrong with using Javascript to enhance the usability of a website, but make sure that links are not dependent on Javascript. If you want to display some product information in a pop-up, use a plain link and override it with your popup action.

BAD: <a href=”javascript:popup(/weather-forecast.html)”>Agra weather forecast</a>

GOOD: <a href=”/weather-forecast.html” onclick=”popup(/weather-forecast.html);return false;”>Agra weather forecast</a>

F. Use the lang attribute

A very easy tip: make sure you declare what language you are using for the content of the page. If the whole page is in one language, just declare it on the HTML element:

<html lang=”en”>

If you have one part of the page in a different language, use the lang attribute to identify the section:

<p lang=”fr”>Ceci est en français</p>

G. No gratuitous animation

In 1998 this used to include the use of cheap animated GIFs of rotating globes or dancing babies. In 2008, this includes Flash animations and advertisements which fly around the page. Why is this an accessibility tip rather than a design tip? Because distraction makes the comprehension of the content of the page much harder for many users.

H. Don’t depend on color

One of the most common accessibility problems is color-blindness. Red/green is particularly common, but other variations exist too. So, make sure your design does not depend on color to convey meaning. Do you have a pie-chart with red and green segments? Ask yourself whether your site would work in black and white: ensure you are using colors with a significantly different contrast so that users can differentiate them without seeing the colors themselves.

I. Captcha alternatives

More and more forms use a Captcha system to reduce spam, but this can stop genuine users with visual deficiencies from submitting the form. You must either replace or offer an alternative to a visual Captcha system. “Logic” systems which ask a question only a human could answer are becoming more popular, but that can reduce accessibility for those with cognitive disabilities. So keep these logic alternative as simple as possible, for example ask to type a particular word.

J. Labels on forms

This is both an accessibility and a usability tip: use label on forms:

<h4><label for=”realname”>Your name</label></h4>

<p><input type=”text” name=”realname” id=”realname” size=”35″ maxlength=”40″></p>

<h4><label for=”email”>Your email address</label></h4>

<p><input type=”text” name=”email” id=”email” size=”35″ maxlength=”40″></p>

<h4><label for=”subject”>Subject</label></h4>

<p><input type=”text” name=”subject” id=”subject” size=”35″ maxlength=”40″></p>

<h4><label for=”comment”>Your message</label></h4>

<p><textarea name=”comment” id=”comment” cols=”45″ rows=”6″></textarea></p>

label associates the text with the appropriate field, so a screenreader user can understand which field refers to which question. label is particularly useful for radio buttons, as in most modern browsers you can click the label text as well as the radio button itself, so it is easier to use for those with motor deficiencies.

K. Accessible Tables

See the following guide: Accessible Tables - What to do and what not to do. If you are using simple tables for layout, it’s not a big problem, but try to avoid using nested tables, as this makes it extremely difficult for screenreader users who have to listen to streams of table cell and row declarations.

L. Page structure: use meaningful headings

These two tips make on-screen comprehension much better, and can help the search engines too. Firstly, make sure you use the right HTML markup for you page and section headings:

BAD: <p><font size=”5″>My page title</font></p>

GOOD: <h1>My page title</h1>

You can use H1 thru H6 to show the hierarchy of the heading of your page. Use CSS to style headings as you like.

M. Page structure: divide up information blocks

Imagine if I had written this post as one solid block of text - no-one would read more than the first sentence. The tips given for content in the original 26 steps guide are equally valid for accessibility - make your content easy to scan, easy to understand. Which brings us to:

N. Simple language

Don’t try to impress your audience with your verbosity. Use simple words. Avoid buzzwords, legalese and technical gobbledygook.

O. Acronym (and abbr, cite, p, li…)

Use HTML elements to give meaning to your text. This is a continuation of using the correct headings, you should also use <p> for paragraphs, ul/li for lists, </acronym> for, well, acronyms: Organizational list HTML 4.01 elements.

P. No meta refresh

Don’t use meta refresh: either for redirects to another page, unless they are non-zero and offer a clear link to the next page for users who have refreshes disabled. Don’t ever use a refresh to reload the same page regularly, as it puts screenreaders back to the beginning even if they haven’t finished reading.

Q. noscript

Use a <noscript> for every significant instance of <script>. The <noscript> section will only be used by those with Javascript disabled. This includes search engine bots.

R. Relative text size

Browsers such as IE6 can’t properly resize text with fixed pixel sizes. So use CSS to specify relative text sizes, such as ems or percentages.

S. Bigger font sizes!

This problem is even more common that color-blindness. Many users over a certain age cannot read small text without great difficulty. You may be comfortable with sub-10 pixel body text, but your users will abandon your site in droves, even if you have implemented relative font sizes as suggested above. Make your body text bigger, and use larger fonts such as Verdana rather than Arial to improve legibility.

T. Alternate stylesheets

With CSS, you can offer alternative designs for users with specific issues. Alternative stylesheets can be called by a simple Javascript function which uses a cookie to preserve the user’s preferences. You can offer your page with larger or smaller text sizes, or maybe a high-contast version.

U. Skip to… links

Once you have split your page into digestible sections, you can use “skip” links for users with screenreaders or for users navigating via the keyboard rathen than mouse. For example, if the menu comes first on the page, you can have a link to skip to the main content - or vice-versa. One little-known point - these skip links should be visible not hidden, specifically for use by those navigating via the keyboard.

V. Page size/weight

Accessibility also means being able to access the page. Try to reduce the page weight (file size) as much as practicable. It will be quicker to download, it will be easier to parse (because you’ve cleaned up your HTML), and it will be easier to understand.

W. Add a sitemap (HTML not XML)

XML sitemaps are useful for automated access by search engine bots, but that doesn’t mean you should abandon the old-style HTML sitemap for regular visitors. A well-organized sitemap can be used as a starting point for accessing content which is otherwise only linked in-page or via multiple clicks in the menu.

X. Check in Lynx

Want to get an impression of how your site might work in a non-visual environment? Download the text browser Lynx and see how your site functions (or not!): http://lynx.isc.org/

Y. User testing and feedback

If you have a site which is in any way interactive (ecommerce, etc.), then conducting user testing, even if on an informal basis, can help you identify problems encountered by real users. At the simplest level, ask family or friends of varying age-groups and technical abilities to accomplish simple tasks on your site. Watch carefully without intervening and take notes, then once the task is complete (or abandoned), collect comments on the user experience.

Z. Accessibility statement

Once you’ve implemented changes to your site, it’s time to write an accessibility statement that users can consult. You can include a list of any accesskeys you have defined, outline what steps you have taken to improve accessibility, whether you comply to any published accessibility standards, and you can even solicit feedback from users on how to make your site even better.