[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.,
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">
<area shape="rect" coords="102,9,193,148" href="loofah.htm"
<area shape="rect" coords="199,11,288,148" href="soaps.htm"
<area shape="rect" coords="395,373,481,445" href="fragrance.html"
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.