Land of Opportunity

Web site accessibility design is an after thought for most business blogs. And, that’s being generous, if you get my drift.

Few business bloggers, and even most conventional web masters with traditional websites, have given even scant attention to ensuring their sites are accessible to handicap visitors. Everyone assumes that all visitors will be able to see the flashy graphics, watch a video, hear an audio message, and then move a mouse to open additional eye and ear candy.

Test Your Blog

Here’s a quick test. Turn off the images in your browser, visit your blog or one listed in the blogrolls to your left, and navigate without using your mouse.

How many of you knew to use the tab key to move from link to link?

How many of you knew to hit “Enter” to click on a link?

Did you even know where you were without the images turned on?

Test Land of Opportunity

Now do the same experiment with this page or the home page, or just about any page for that matter.

Hitting the tab key took you first to the Land of Opportunity banner text in the header and a link back to the homepage.

Hitting tab a second time took you to the title of the first post on the page.

Hitting tab a third time took you to the first link in the first post on the page.

Continuing to tab, you sailed smoothly down the page to the bottom.

More tabbing took you down the left navigation pane and through the button farms.

Even more tabbing took you down the right navigation pane until you returned to the logo in the header.

Web Site Accessibility Design

One of the things that most annoyed and concerned me when I started this blog was how little thought had been given to web site accessibility design by the programmers who wrote WordPress and other blog software. While WordPress offers the ability to ensure images are accessible, it seems to lack that ability when it comes to links.

As most blogs consists of text with style controlled largely by style sheets, making a business blog handicap accessible is relatively easy. There are just two tags that you need to ensure are accessible and your blog will largely be handicap acessible from that moment on.

First, images tags need to include alternative text using the alt=”" attribute. When uploading images to WordPress, you’re prompted for a description. Fill it in, as this description is used as alternative text when adding an image. Take some time and go back over your template files and ensure that every image has a completed alternative text attribute inside each and every image tag. This includes all those cute little xml buttons as well. Now whenever images are turned off, instead of empty icons or boxes that say “image”, there will descriptive text. Blind and visually impaired visitors will bless your name as their browsers will read aloud the text you have thoughtfully provided.

Second, ensure all anchor (link) tags include completed tabindex=”" and title=”" attributes. The tabindex attribute controls the order of the tab stops. Generally, handicap folks like to skip over the top and left navigation controls in favor of the article itself. Would you liked to be forced through a button farm before you could access a blog post? I doubt that very much. The title attribute provides context to a link and is read aloud when ever an accessible browser encounters each anchor tag. Your title should provide enough information for a person hearing it to decide if they should click through to the linked content.

Accessibility Design for Business Blogs

When you first go to add the tabindex attribute to your links, its very likely that you don’t know how to go about numbering your tab stops. In that event, I offer a simple accessibility design system that I use both at work and at blog.

Anything that a handicapped visitor might need to access before the main content is numbered with tab stops 1-9.

Content is made accessible by numbering using tab stops 10-800. As I am an old Fortran programmer from punch card days of the 70’s, I like to number my tab stops by tens, so I can insert a link at a future date. Blogs pose an interesting problem in that the a blog’s home page may contain more than one post. If the title is set to tab stop 10 and the links to 20, 30 and 40, then whenever someone tabs, they’ll sail from title to title before returning to the first link in the first post –definitely non-linear. When this type of situation occurs, use the same tab stop number for all links. I chose 10. You can choose 100, 210, or even 333, if you like. Once you decide on this number, you must be consistent and always use it. You can easily lower the number with little effect, so you might start high to begin. I set the title’s default tabindex to 10 in the template form. Everytime I add a link in a post, I set the links tabindex to 10 also. Thus, the links in my content are all set to 10 and navigation is linear and logical.

Navigation is easily made accessible by numbering with tab stops 800-999. In a three column design, such as this one, I number the left navigation elements with tab stops in the 800’s. For the right navigation elements and ads, I assigned tab stop numbers in the 900’s.

Sample Blog Accessibility Design Layout

For those more visual learners, here’s a table depicting the numbering system I use here on the Land of Opportunity small business blog:

By the way, HTML tables are made accessible by including a completes summary=”" attribute summarizing the tables contents.

Testing for Blog Accessiblity

There are a number of online and offline tools for testing for accessibility. My favorite is Bobby. Bobby checks for three levels of accessibiity, as well as, U.S. Section 508 guidelines. U.S. Section 508 g uidelines apply tp website operated for the public by governments, univesities, and anyone operating on behalf of those agencies, including blogs.

Future Blog Accessibility Issues

You probably noticed during your test of Land of Opportunity, that tabbing skipped over some links in the body and the navigation panels. As I learn more about WordPress and Blogsome.com, my blog host, watch for improve,ents in these areas. Also watch for the Bobby icon in the left navigation panel to change to “AA” status as Land of Opportunity small business blog becomes even more accessible.

Don’t forget this is a blog. Why not comment and let others know what you have done to make your blog more accessible? Do you have acessibility issues that you would like to pass on? The comment form is just down screen.