Thursday, March 31, 2011

Is Your Web Page Accessible To All? Part 1 of 2 Parts

By D. V. Berkom

[Originally published on the Seattle Examiner writing careers blog.]

Imagine a potential new reader who happens upon your beautifully-designed website, whether by way of that blog post you wrote about your fabulous just-released work, or because someone they know told them about you.

Become that reader. See your website as though for the first time. Notice the colors, the perfect fonts, the just-right images … Now, close your eyes.

What do you see?

Now imagine that you can't use a mouse. Or are color blind. How does your website look now?

These are questions every writer with a website should ask herself.

If you used a web designer, hopefully she understood the implications of accessibility and developed your site accordingly. If, however, you created your own website (like I did) and only vaguely understood what "accessibility" actually meant in relation to HTML and Cascading Style Sheets (yup, me again), then you need to read this blog post.

Why, you ask? Because you're missing a huge segment of the population (some put the estimate at 60 million-plus in the United States alone) who may enjoy learning more about you and the stories you create.

And, it just makes sense.

Listen, we're writers. We write stories. We love it when people are able to access our work. We love it even more when we get feedback. Why not use the following simple tips to make your website more accessible to another large segment of Internet users?

Not only will these techniques make your website more accessible to non-traditional users, they will make it more accessible to an aging population, improve your odds with search engines, and improve readability and navigation on e-readers and smartphones.

(Note: I'm making the assumption that if you've developed/designed your own website, you have at least a tentative understanding of HTML and will be able to follow the references in this article. If not, you may want to search HTML tutorials for more information on HTML and web design.)

Two of the most overlooked and easiest ways to make your website accessible are providing alternative text for images and using headings (e.g., H1).

Alternative Text (alt-text) for Images: Providing alt-text for your images just means using a description in your code for the images on your website. This includes not only .jpgs and .gifs and .pngs, but image maps, spacers, and even images used for navigation like bullets or buttons.

When a visually-impaired web user navigates to your site, they'll more than likely be using a screen reader or talking browser, and the image text will be read to them. In Dreamweaver, the web design program I use, you can find the alt attribute at the bottom of the screen in Properties, to the right of Src.

If you're writing your own HTML, the alt="description" goes after the image source (e.g., image description

Look at the top (or side) of your home page. Do you use images for links (buttons) to different pages of your website? If so, you'll want to provide alt-text for these elements, or the text-reader won't recognize the navigation.

If the image is a link to something, you'll want to convey the reason for the link. For instance, say you have an image that links to your About page. You would use alt= "About" in the code. You don't need to include "link to…" in your description. The text reader will let the user know when a link is encountered. Keep your description simple, preferably not more than a few words.

Now, look at your home page again. Are there images that are basically decorative and do nothing more than add a visual element to the page?

Images that aren't necessary for navigation should probably not have a description (although, there are good arguments for the other side so if you want visitors to know you have a picture of, say, a pug on your page, go ahead and use the text alt="pug". Your call.) Otherwise, use alt="' (pair of quotes). This will indicate a non-essential element, allowing the text-reader to skip the description, saving your visitor time.

If you have an image map, each area should have its own description. Again, if you're using Dreamweaver, each 'hot spot' has a box at the bottom of the design screen where you can enter alt-text. For those of you creating your webpage from scratch, the HTML would be similar to this image map for an imaginary web site for bath products:

<
div align="center"><img src="images.jpg" width="496" height="451" border="0" usemap="#Map">

<map name="Map">

<area shape="rect" coords="102,9,193,148" href="loofah.htm"
alt="Sponges"">

<area shape="rect" coords="199,11,288,148" href="soaps.htm"
alt="Glycerin soaps">

<area shape="rect" coords="395,373,481,445" href="fragrance.html"
alt="Essential Oils">

map>


Notice the text after alt= describes the image's link in simple terms. No need to go overboard and explain, for instance, that the loofahs are from an island in the Caribbean, hand-picked by sexy surfer-boys. (Hey- it's my imaginary web site )


To be continued...


D.V. Berkom is the author of the Kate Jones Bad Spirits series. The newest installment in the series, Dead of Winter, will be available in May. For more information, you can see her real-world website at www.dvberkom.com.


2 comments:

Helen Ginger said...

Thank you D.V. I, too, used Dreamweaver and put in alternate text. But I'm going to check to make sure I've used it in every instance.

A friend of mine works in the Governor's Office here in Texas. She's with the Committee on People with Disabilities and is always promoting that people should make sure their websites are accessible. I'm going to send her the link to your post.

DVBerkom said...

You're welcome, Helen. Thanks for your comments. When I discovered how easy it was to change my website to make it more accommodating/accessible, I started telling everybody within earshot that has (or is thinking about having) a website. If people are made aware of the information, most want to do what they can to be inclusive. Every little bit helps!