Is Your Web Page Accessible to All? Part 2 of 2 Parts

By D. V. Berkom

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

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 web page 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 Internet Explorer (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


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.

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.,

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.

Google Acquires eBook Technologies

By Kathie Felix

Speculation was rampant this week about the meaning of Google’s recent purchase of California-based eBook Technologies for an undisclosed sum.

Limited information on the acquisition was available on the eBook Technologies website:

“eBook Technologies, Inc. is excited to announce that we have been acquired by Google. Working together with Google will further our commitment to providing a first-class reading experience on emerging tablets, e-readers and other portable devices.”

The company’s online background information states that “eBook Technologies supplies a family of intelligent reading devices and licenses technologies that enable automated publishing and control over content distribution.”

Following last month’s launch of the Google eBookstore and its 3 million offerings, many are wondering if Google is preparing to offer an e-reader of its own.

Tell us: What do you think the info giant is up to?

Technology Rocks – As Long As It Works

By Kathie Felix

I’m typing this blog entry on what has become my primary computer – a laptop that I originally bought as a backup system. Recent events have made it clear to me, however, that the day is near that this computer will be getting a backup laptop of its own. (In fact, I probably should have already made the purchase, but I’m holding off until after the holidays when I expect technology prices to drop even lower than the current recession-affected pricing.)

Like most people – except my brother, the computer programmer – I need a good reason to buy a new computer. I love the latest technology and what it can do – and have spent more than 12 years writing about technology for schools and libraries – but I hate to toss aside an electronic device that still has some reasonable use left in it.

Here’s the story:

One day, my laptop suddenly lost the ability to open an email account that contained the incoming news stream for a project at a critical publishing deadline (these things never seem to happen on a leisurely day, do they?).

Like any resourceful writer desperate to make a deadline, I found a way around the problem. I logged on with another screen name on the same service, opened the webmail version of the email service and logged on there with the user name that wasn’t able to access its own email directly. I was psyched when my improvised system worked and I could access the needed email – even though it was a clunky, time-consuming sort of fix.

Once the deadline was met, I sought a real solution from my internet service provider. After receiving the help (a lengthy series of instructions of which buttons to push, apparently read to me from a manual of some kind), I was once again able to directly access the incoming email. Sadly, however, my computer has been on shaky ground ever since that little customer service assist.

These days, the computer’s cursor is a randomly-moving entity that bounces around like the lights on the test my eye doc uses to examine the extent of my peripheral vision. It’s kind of amazing to watch as the cursor types in a straightforward manner, then jumps back several spaces, then jumps up the page, then down the page. It’s also beyond frustrating to endure.

I did some research and the only fix I could find was a recommendation to plug in a mouse – which seems like a touch of overkill on a laptop, as well as a real mobility-limiting move.

One computer expert I know was very matter-of-fact in her assessment of the situation: “It’s broken. You need a new one.”

That sounded ridiculous to me.

So, for the time being, I’m working around the problem – by turning off the touchpad while I type. And, every now and then, I wonder why no one suggested this – simply pushing that little button at the top of the touchpad until the image of the computer next to it turns red (as in “off”).

Whether a writer or a reader, nearly all of us are in a daily partnership with a computer. How’s your relationship with your computer going? Got any tips to share?