Learn about Accessibility

Entrepreneurs and Small Businesses don't always have the financial resources to revamp their whole website to implement WCAG 2.0 Level AA standards. Compliance can take a fair amount of knowledge and effort however there are things that you can do on a day-to-day basis to improve the accessibility of your website. The crazy thing is, most if it is pretty common sense.

Take the 15 week accessibility challenge. Once a week, take an hour to look at your website and ask yourself how you could make your website more accessible to not only visually impaired folks but to people with physical impairments too. Then spend 15 minutes or so each day making small changes. Do this for 15 weeks and then take a look at everything you've accomplished.

Search engines, like Google and Bing, are blind! After completing your challenge, you may even find that they will do a better job of sending you qualified customers, not just a bunch of people. Who knew that SEO and WCAG were so closely related!

Week 1: Inventory

It's time to make a spreadsheet of all the pages on your website to help you keep track of your progress. If your sitemap contains every page on your website, feel free to use it. Alternatively, tools like Xenu Links Sleuth will not only make you a pretty complete site map, but it will also let you know about any broken links on your site at the same time.

Week 2: Clean Up

The first step is to take a look at the content of your website. Specials that you ran 5 years ago probably shouldn't be there anymore. That teleseminars you held last month, not relevant. The more you can clean up, the more the search engines are going to be able to focus on the valuable content on your site and the less you will need to make accessible.

Start with your home page and then work your way through the more popular sections of your website. Put yourself in your clients shoes and ask yourself:

• Is this content relevant to my target market? If it isn't, it is probably just annoying people who are here to do business with you. Consider removing it.
• Is this information current? Nothing annoys me more than finding expired deals on the web. It makes me want to go back and google for some other deal that is current.

Don't forget to fix broken links discovered last week. Nothing annoys a customer more than finding just the right link on a web page just to discover that the promised land (or page in this case) has gone missing. If that was you, how would you feel?

By the way, you can sometimes find the content that broken links used to point to by entering the address in the WayBack Machine at the Internet Archives. This is a website that tries to archive the Internet on a regular basis. Naturally it doesn't include everything but when it does, you'll see what the linked page used to look like and hopefully use a search engine to find its current incarnation and address. Have some fun while you are there and see what your website looked like 10 years ago, or what Yahoo looked like when it first showed up on the web.

Week 3: Recycle and Re-use

Your home page is the most valuable landing page on your whole website. Should the products or services that bring in the least revenue really take up real estate on your home page? Push the less popular content down and bring the more popular and valuable content closer to the front of your website.

I know it sounds more like a shuffling of information however one of our objectives with this project should be to increase traffic to your website. Valuable content that is buried ranks poorly with search engines because they believe, just like people do, that it should be easy to find what people are looking for. When you move a web page, don't forget to setup a 301 redirection so that people with bookmarks and search engines will be able to find the new location of your content.

From an accessibility point of view, this will mean less clicks to get to the content.

Week 4: Putting Words to Images

Guess what? That is what people who are visually impaired and search engines have to do in order when it comes to images on your website... unless you add ALT tags to all the images on your site. An ALT tag is meant to provide an alternative description for images. Think about how search engines would delight if they could figure out what all those photos of products are on your website. If you are using a Content Management System (CMS), it should be easy to edit each image and add an alternative description.

Note that this is not the same as the TITLE which should not be used for this purpose. Consider that a screen reader will read  both the ALT and the TITLE. If you put the same content in both tags, the screen reader will read them both. How annoyed would you be if everything you read on the web was written twice?

If you have text in a graphic, consider replacing it with HTML that a screen reader can read. If it just isn't possible, make sure that you have a good contrast ratio between the foreground and the background. I have seen so many websites that are difficult to read, even if you can see perfectly. Why annoy your customers if it can be avoided? The Colour Contrast Analyzer  (Download) will help you with this task. Hang on to this tool when you are done. You'll need it in the future, both for new content and to analyze the colour of text on the background of your page.

What about decorative graphics? Although they don't require alternative text, they still require an empty ALT="" tag which will prevent screen readers from even acknowledging their existence. Otherwise you can end up hearing "image, image, image, image"... lots of meaningless dribble.

Week 5: Meaningful Headings

Did you know that search engines put more importance on the content of the headings that on the content? If your headings <h1..h6> are filled with meaningless dribble like "Check this out", you've only been hurting yourself my friend.

Go through your website and:

1. Make sure that all your headings are in the right order. Many people use headings to vary the size of their text, jumping from H3 to H1 to H6. Believe it or not, these things actually have a purpose beyond changing the size of your text. Headings should always follow in their proper order. H1, H2, H3...H6. You can jump back to H1 but never skip a level going the other way. If you need to adjust the size of the font, use CSS. A great tool to help you out with this is the WCAG WAVE tool.
2. Make sure the text in your headings convey an important message. Include your important and most relevant keywords. Search engines will love you for it.

Visually impaired folks will to. For example, did you know that most screen readers offer people an option of just skipping through the headings without reading the text to help them find the part of the page that contains the information they are looking for? For example, pressing ALT-2 repeatedly will take people through all the H2 headers in a given H1 section.

Week 6: Meaningful Links

Besides headings, search engines like Google really value linked text. To a search engine, the text contained in a link tells the search engine what the link leads to. For example, if you have links that say "click here for more information", the word "here" tells the search engine nothing about what it will find if it follows the link. Same goes for the word more. If you want a highly valued link to be meaningful to a search engine, put more information into the link. For example, "Learn more about our models of family home." Search engines will understand that this link is taking them to models of family homes.

For the visually impaired, they can press the TAB key to move directly from one link to the next. Imagine doing this and all you hear is "more, more, more, more, more". It would be meaningless to you and it is meaningless to search engines.

You may need to re-write some of your content but, in the end, it will be well worth it. Don't forget the links in your menus and images too although these last ones should have been taken care of last week.

Week 7 & 8: Tables

This week you actually get two weeks to complete this work because tables are no easy matter. First and foremost you shouldn't be using tables to format the look of your website. Tables should only be used to format the presentation of information. Sure you could argue that the presentation of a web page is the presentation of information but you and I both know that you know what I'm talking about here: the presentation of data on a web page.

This part can be simple but it can also get pretty complicated depending on the complexity of your tables, if you even have any.

Tables should contain TH tags to identify row and column headings. If, after changing your TD's to TH's your headings end up centered, bold or otherwise incorrectly formatted, you'll need to use CSS to fix them.

I am including here an example of a simple table. Hopefully it will provide you with the information you need in order to properly format your own tables.

Examples of WCAG 2.0 compliant tables.

Week 9 and 10: Forms

Depending on your website, you may just have one "Contact us" type web form or you may have many. While not overly complicated to fix up, it may require a little more of your time so I've given you a couple of weeks to figure it out.

Basically, your captions need to be connected to your fields so that a screen reader can tell what each field on your form is for.

In addition, your fields need to be enclosed in either a <div> or a <frameset> tag. I tend to use the <div> solution as the <frameset> tag puts a border around your field. The <frameset> tag should also be used to group related fields. For example, you might have one section of your form for name, title, company and another several fields for the address.

Here is a sample of an accessible compliant form:

Also be sure that pressing the tab key through fields flows in the right order.

If you have an image as a button, make sure it has its ALT text set.

By the way, links like << < and > >> are meaningless to a text reader and a search engine. Consider replacing them with text, or images with ALT text.

Week 11 and 12: Test your Text

We are back to checking text. Using Internet Explorer, change the font size to Largest and then to Smallest. You'll find these settings in the Edit menu under  Text Size. Firefox has a similar option.

If all of the text changes size when you do this, it passes the test. Any text that doesn't change size is probably set to a specific pixel size. You'll need to change this by modifying CSS sheets, CMS settings or right in the HTML code. A PX to EM conversion chart will help you make the changes so that the default Normal size text looks exactly as it does on your website today. In some cases, you may need to play with the value as some CSS settings can indirectly affect others.

Make sure that the default text size is at least 1rem and that the colour of the text has sufficient contrast with its background using the Colour Contrast Analyzer.

Read the content of your website, out loud if you have to. Make sure that there are no spelling or grammar mistakes, that up to 20 percent of your text contains keywords people will be looking for, and that the content is clear, relevant and to the point.

Rewrite it if you have to.

Week 13: Multimedia

Have you ever listened to music and wished you had the words so you could sing along with it? Then you can understand how search engines feel. They understand text, not audio or video. For this reason, you will need to create transcripts of any audio and closed caption for your video. Transcribing is pretty straight forward. There are many applications available on the Internet that can reduce the speed of sound so that a competent typist can keep up most of the time.

Once you have the text, creating Closed Caption XML files is pretty straight forward, especially if you use Subtitle-Horse.

Week 14: Flash

Are you still using Flash on your website? In case you missed the memo, Flash is out, HTML 5 is in. Your site may be heavily reliant on Flash which is doubtfully compliant for menus and presentation, or just a little such as for embedded video and audio players. A relatively easy fix is to replace the media player on your site with one that comes as close as possible to being WCAG compliant like JW Player. Documentation for the player will also explain how to add closed caption for your videos.

Did You Know? Mobile devices made by Apple such as the iPhone, iPod Touch and iPad, are not able to display flash applications. Yet another great reason to ensure that there is an alternative transcript available for your video and audio content.

Week 15: A Sustainable Plan

Congratulations! You've made it through almost 15 weeks of improving your website in just 15 minutes a day. Believe it or not, these small changes (ok, maybe some were bigger than others) has taken your website and made it very close to being WCAG 2.0 compliant. This is huge compare to where your site was just 14 weeks ago.

To ensure that you don't need to go through this 15 week exercise regularly, this week it's time to write down some standards and guidelines that you will follow now and in the future. All you need to do is to ensure all new content is compliant with the level of standard you have set and you review the content of your site regularly.

Simply continue to put aside an hour or two each week and just browse your own website, looking at it from your clients perspective. Check it for broken and redirected links regularly and make constant and never ending improvements. Chances are, if you make it easier to use in any way, you'll end up making it easier, friendlier and more professional for all your visitors as well as search engines.

Who knew that SEO and WCAG were so closely related!