RSS

Guest post: Is Your Web Page Accessible? by DV Berkom

04 Sep

I’m delighted to bring you this guest blog post, today on developing a multi-user-friendly website by fantasy, mystery and suspense / thriller author and interviewee-to-be (no.166) DV Berkom.

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., <image src=”images/image.gif” alt=”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 website <g>)

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

Thank you DV.

Author of the Kate Jones Bad Spirits series, DV Berkom grew up in the Midwest, received her BA in Political Science from the University of Minnesota, and promptly moved to Mexico to live on a sailboat. Several years and at least a dozen moves later, she now resides outside of Seattle, Washington with her sweetheart Mark, an ex-chef-turned-contractor, and writes whenever she gets a chance. You’re welcome to email her at dvb@dvberkom.com or chat with her on Facebook (http://www.facebook.com/dvberkom) – she loves to hear from readers as well as other writers. For more information, you can visit her website at www.dvberkom.com.

About these ads
 

Tags: , , , , , , ,

10 responses to “Guest post: Is Your Web Page Accessible? by DV Berkom

  1. Paula Friedman

    September 10, 2011 at 11:03 pm

    This is a terrific and valuable guest blog on a highly important topic. I am printing out and saving a copy for assuring accessibility in my future websites. Thank you, DV Berkom–and thank you, Morgen, for all these wonderful guest blogs.
    Paula Friedman
    author of The Rescuer’s Path (Plain View, January 2012), a novel of love and the search for justice

     
    • morgenbailey

      September 10, 2011 at 11:05 pm

      Thank you Paula. Isn’t it great – such detail. :) I’m looking forward to posting DV’s spotlight and interview… that should be fun.

       
    • DV Berkom (@dvberkom)

      September 10, 2011 at 11:19 pm

      Hi Paula,
      Thanks for your comment! I’m so glad you found the post useful. Just think, if everyone with a website became aware of this issue and took even small steps toward accessibility, not only would the frustration level for non-traditional internet users drop in a big way, but it’s a win-win for the website owner, too! More traffic, more happy people, they can’t lose!

       
  2. DV Berkom (@dvberkom)

    September 10, 2011 at 11:20 pm

    Thanks, Morgen, for allowing me to post about something so important and close to my heart!
    Take care,
    DV

     
  3. morgenbailey

    September 10, 2011 at 11:22 pm

    You’re so welcome – happy to have you back to guest blog any time. Just pick your date (from http://morgenbailey.wordpress.com/guest-blogs) and subject. :)

     
  4. cynthia hartwig

    November 27, 2011 at 6:49 pm

    Hi DV. I’m a fellow Seattlite. What got you going on this topic i.e. what’s the back story other than the fact that you’re a mensch? I think this is a great topic and it’s not one I’ve been particularly aware of, which is why I shared it. Thanks for prodding us to do the right thing.

     
    • DV Berkom

      November 27, 2011 at 8:43 pm

      Hi Cynthia- Are you loving this weather? Sigh. Seattle in November…as for your question, I attended a workshop on accessibility a while back and the lightbulb literally popped on.The idea of getting this information out there wouldn’t leave me alone and since I’m a writer and have lots of writer friends with web sites, I figured that would be a good starting point. I mean, how easy is this?

      Being able to include rather than exclude people is the way to build lasting relationships and good will. There’s no downside. This is also a good business practice and tends to resonate with a lot of folks. (e.g., If helping equalize access isn’t enough motivation for you, how about the potential for reaching millions of readers/customers?) You can do good while you gain!

      What’s been really cool, though, is the feedback I’ve gotten from the article (it appears on a couple of different sites). It totally reaffirms my faith in people- that when given the choice and actionable information, a vast majority will do what they can to help.

      Thanks for your comments- they’re very much appreciated.
      DV

       
  5. expatlogue

    April 21, 2012 at 10:30 pm

    Brilliant post! I truly never though of my site in terms of accessibility before. Thanks for opening my eyes.

     
    • DV Berkom

      April 23, 2012 at 4:28 pm

      Thanks for your comments, expatlogue. I’m glad you found the article useful!
      DV

       

I'd love you to leave a comment, thank you!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 6,543 other followers

%d bloggers like this: