Wow.. tables for layout, alt text for images, making sure you have descriptive links, using style sheets to try and apply flexible content design - there seems to be alot of rules to make a site really accessible for all. Nah! That's just trying to find the easy way out - anything worth doing is worth doing right, yes?

There are even ways to affect the choice of voice a person's screen reader will use when they come to your site. But that is on the real far side of designing with accessible technology in mind (and your preference for a sexy voice reading your page design back to you is really more a relative thing than an objective choice isn't it?)

But now that you've started down the road to make your site a wonderfully accessible one, how do you let the world know about it?

Icons!

Yes, there are insignia that you can place on your page, where your heart desires, to indicate that the page has been able to pass a certain standard of quality.

Web Standards Symbols

Indicates that the page has passed the W3C testing for compliance with Cascading Style Sheet structure. Remember from the previous article on compliance, CSS is the part of the site that controls how things look (what colour, what size, where does it sit on the page, etc). No matter what you're doing, accessible or not, your site should be passing this or else your pages may not be displaying text properly to even non-assistive technology users!

Indicates that the page has passed testing for compliance with HTML standards (version 4.01 in this case - other versions are also out there, but most aim for this now). This reflects the structure that holds your text and images and includes the code used to create web site links and email links. Like the above, even if your site is not specifically accessible ready, it should be passing this test. If it's not, ALL your site visitors could be getting errors or improperly displayed content from your site.

Indicates the page is meeting level 1 of the Web Content Accessibility Guidelines. Your site might already be able to achieve this without any edits depending on how complex your content is. But at the very least, as you update or create your site, this level is what you "must" aim to be compliant with. Its the minimum conditions that should allow for someone that uses assistive technology to be able to use your site, but they might still encounter some difficulties.

Indicates the page is meeting level 2 of the WCAG. Not bad! You're doing a good job because your pages are now in a state that supports assistive technology very effectively. Most sites can achieve this level readily enough but not the next one (level 3) due to the preference to use tables as a design layout tool (instead of using rules in a style sheet).

Indicates the page is meeting level 3 of the WCAG. Amazing! You're at the top of the design latter now, and are sending content that, theoretically, should be accessible to almost everyone.

But wait - you're not done! Setting up or updating your site to meet these standards is one thing. Maintaining these standards compliance levels is another matter. If you are only one of multiple people who can edit content on your site, you (or someone there) has to take on the role of keeping an eye on the overall design. You can be fine today, but someone posting up pictures (and forgetting to use alt text) can create problems in your design tomorrow.

It has to become habit to be aware of accessibility. We're not use to that yet, but like the whole movement to quit smoking, the population as a whole will start to catch on and make this thought part of their routine.

How Do I Add These Images?

While you can link to the above images from the World Wide Web Consortium's main site, you're probably best to save a copy to your own website. It will mean that they load as the same pace as the rest of your page, rather than be held up if the W3C site is really busy sending content out to lots of other users.

To save a copy (grab it from us above), right click overtop of any one of the images above, and then choose the option that reads "Save Target As...". You'll have the choice to browse to a location on your computer to save the image to, and what name you want to save it as.

Now to add them to your pages, with a link back to the WC3 host site itself, you would use this code.

<a href="http://www.w3.org/WAI/WCAG1A-Conformance"
title="Explanation of Level A Conformance">
<img height="32" width="88" src="http://your.web.site/wcag1A"
alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0">
</a>

What the heck is all that?

The first part from <a href to the end of the word Conformance> is what makes the image a clickable link to the W3C website itself. If the visitor clicked on it, it would take them to a page explaining what Level 1 of WCAG meant.

The <img part to the </a> part describes to your browser where to find the image (which should be your own website), how big the image should be in pixels, and provides the alt text that a screen reader will speak aloud to a user.

If you're not a web designer, it might seem like alot of stuff just to show one small icon on the page, but in the world of computers, you have to tell computers every step of the way, lest they be easily confused!

[ Back to Accessibility Index ]
[ Back to DREN Home Page ]