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 novel, 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?
Got it? Now imagine that you can’t use a mouse. Or are colorblind. How does your website look now?
These are questions every writer with a website should ask her/himself. 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 article. Why, you ask? Because you’re missing a HUGE segment of the population (some put the estimate at tens of millions) 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 those millions of non-traditional users, it 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 using headings (e.g., H1) and providing alternative text for images.
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”>
<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)
Headings: When I first created my author web page, www.dvberkom.com, I didn’t have a clue about CSS (Cascading Style Sheets) and laboriously changed font size by hand as I created the pages. Didn’t use the H1 attribute. Didn’t use any kind of text attribute other than the default. If you design your webpage this way, a visually-impaired user will have to listen to everything on the page. And I mean everything.
The text-reader needs a way to differentiate the various areas on the page, or it thinks it’s all important. Yes, I know. YOU think everything is important, but put yourself in your visitor’s shoes. When you go to a web site, do you want to find the information you’re interested in with the least amount of navigation? Sure. So does everyone else. Visually-impaired users are no different.
If you use headings, the text-reader is able to skip to each heading without having to read all of the text in between. This way, if the visitor wants to find out about your new release, s/he can do so without having to listen to everything prior to that information. What if this is the second time the visitor has come to your website? Would you want to have to listen to all the stuff you’ve heard before, just to get to the piece of information you need?
Didn’t think so.
Here are some other issues to take into account when you assess your website: (Note: While there are many ways to make your website more accessible, more in-depth techniques are beyond the scope of this author and article. I’ve included links below if you’d like to learn more.)
• Avoid page elements that flicker. “Elements that flicker between the rate of 2Hz and 55Hz may cause seizures in individuals that have photosensitive epilepsy.” (http://www.doit.wisc.edu/accessibility/online-course/standards/flicker.htm ) This means that cute little animated cartoon .GIF and marquis-style banners.
• Create accessible .PDF files with Adobe Acrobat, and revise existing PDFs for accessibility. (http://www.adobe.com/accessibility/products/acrobat/overview.html)
• Include captions/transcripts in multimedia: e.g., videos on YouTube, presentations, etc.
• Make your website navigable for non-mouse users (include the option of using the keyboard to navigate your site)
• Offer a “Skip Navigation” option at the top of the page for those interested in jumping directly to the main content
There are several more unobtrusive ways that you can design your web pages so that everyone can enjoy what you have to offer. While my website is far from completely accessible, I’ve begun taking the baby steps to create a site that will hopefully include, rather than exclude, non-traditional web users. Creating an accessible website isn’t just good business, it’s an opportunity to foster inclusiveness and good relationships with potential readers.
For more information:
Online accessibility courses (FREE):
http://www.doit.wise.edu/accessibility/online-course/
http://jimthatcher.com/webcourse1.htm
Check your web pages for Accessibility: The following are links to accessibility toolbars to check your website.
Web Accessibility Toolbar for IE:
http://www.paciellogroup.com/resources/wat-ie-about.html
For Firefox (web developer extension):
http://www.chrispederick.com/work/web-developer/
Web Accessibility Initiative: http://www.w3.org/WAI/
World Wide Web Consortium (W3C): http://www.w3.org/
About Section 508 Standards for Web Accessibility:
http://www.access-board.gov/sec508/guide/1194.22.htm
A version of this article first appeared on the Sisters in Crime blog, May 2011.
I am in the process of creating a new website on WordPress.org. with a new url that I hope is more SEO friendly. I am following a tutorial I bought and I think some of this is embedded into it. If not I am up a creek because this is beyond me. Wow! Back to kindergarten.
LOL. Yeah, that’s how I felt when I first found out about all of this accessible stuff. It gets easier as you work with it, I promise.
I will try this for my site step by step and let you know how I came out,
Awesome, arawdog1! Keep us posted 🙂
Thank you for this advice, I will save this tutorial along with many others from IU for future reference. Unfortunately I am absolutely clueless so basically I’m screwed! Maybe by 2014 I may have mastered the bare minimum! 🙂
LOL avcarden! Clueless was my middle name when I started creating my website. If I can do it, I guarantee that you can, too 🙂 Thanks for posting.
Thank you for your eye-opening (no pun intended) post! I paid attention, and will now put it into practice!
You’re welcome, Newt! Glad you got something out of the post. BTW, I love puns—especially when they’re unintended 🙂
Thanks, DV! I’m glad others are getting something out of this. 😉 Right now I’ve got a blog. I suspect if I ever create a full-blown website, I’ll hire somebody to do it. If I ever get that far, I’ll point them at this post.
You’re welcome, Lynne! It just seems like a no-brainer, doesn’t it? And it’s pretty simple, from a website building standpoint.
Thanks for stopping by!