Website accessibility taken to the next level

The Blind Webmistress Project

All of the techniques we learned for the blind webmistress are represented in this page. Check the code!

I never imagined that our quest for accessibility would lead us to design a website that a blind webmistress could take care of, but it was a project that caught our enthusiasm from the start. We met the blind web mistress in the course of searching for blind and otherwise disabled web users to test our website design techniques. We were surprised to hear her describe how she'd found a website template and modified it with her own content. She had been downloading various scripts and animations to spruce up the appearance of her website and she had put together a pleasing, harmonious color scheme. She had done it all in Dreamweaver and Jaws, a popular text reading tool used by blind computer users to "listen" to the web. We heard her describe how she had to parse code line by line, character by character. She used her keyboard as her only input device and had somehow learned how to use Dreamweaver by tabbing through menus.

She can write code with her eyes closed.

We were blown away by her moxy. Unfortunately, the blind webmistress could only proof her website using Jaws, so several of the elements on her site weren't positioning themselves properly, and there were some readability issues that needed to be addressed. We saw that her site had several basic page designs and we saw that the code was outdated, very code heavy and utilized an obsolete table layout. She needed to be spending her time marking up content, not wrestling with old HTML. All of her JavaScript's and animations had ballooned the page length, making it a vast expanse to navigate audibly. Also, it was important for us to make the site accessible to other blind users.

Enter standards based web design to the rescue.

We'd gotten to a high level of accessibility compliance by following the rules of standards based website development and decided to use our website as the base line. The blind webmistress was kind enough to review our website in detail. She gave us very high marks and had only one criticism: our site is a two-column with header and footer, and we use the space below our vertical navigation bar to feature our validation and compliance buttons. We also use to it brag. Since our pages parsed in the order they were written, that is header, side nav then main content followed by footer, the blind web user had to listen to all that redundant, self-congratulatory junk before they got to main content. She recommended a "skip navigation" that might bring her directly to main content at the page top. It was fun to hear her speaking in terms of how the site "looked" to her and how she could "see" the image alt texts.

And just a few special features

We also tried to gussy some other things up. First, we tried to make our image alt text as robust as possible. Just to give you an idea, our logo alt text is "The dataSpheric logo has a very normal font appearance except for it's central S which is shaped like a globe or a sphere. The logo appears on an orange background that makes you think of citrus fruit." I figured that would do it for "equivalent information". We took care to place inline navigation, with anchors to page top at each paragraph ending. We also figured we'd go to town on the comment tags to try to make page code as navigatable and explanatory as possible.

Finally, we integrated the skip navigation as requested. We selected a yellow block of color near our page top as our skip device and placed a small text navigation within it, the same yellow as it's background and with a very small font so that increasing font size on site would be unlikely to "break the box". For content I grabbed some public domain stuff by Ben Franklin and marked it up, probably a mistake in retrospect as Franklin's writing itself can barely be considered accessible in this day and age. Oh well. We then asked the blind webmistress to review the site front end and to have a look at the code as well.

And it worked nicely.

We heard pretty immediately that the blink webmistress had switched over to NoteTab Pro as an HTML editor, and that it was far superior as a companion to Jaws. She reported that we was able to read and navigate using the comment tags although we'd over done it a bit. Enough is enough, she just needs to know where the content areas are. She "saw" and appreciated our alt text which was thrilling. She said that the page "looked very clean, very well organized." The skip navigation had done it's job, she could now conveniently navigate each page and the whole site with ease and in the same basic manner as sighted people. We were pretty happy about the whole thing.

Now with a bit of fine tuning on the comment tags, the blind webmistress can easily locate content areas that she has to be concerned with on the page. Standards based code allows her to reduce the amount of tags that she needs to maintain a site to around 10 or so. It also allows us to build pages with the least amount of code, and the fact that we separate most visual design elements into style sheet means our web pages are as short and therefore navigatable to the blind user as can be achieved. Our usual XML compliance and standards techniques therefore brought us to within inches of this level of accessibility, very little additional work was required.

Simplicity pays off.

The blind webmistress has professed her fondness for our two column with header and footer but the one thing I feel is lacking is some kind of a tangible model of the site layout to impart a closer proportional model of the site layout and it's basic components. We'll be creating one just for her soon.

It's difficult, but we'd encourage more webmasters to have their sites tested and improved with the input of disabled persons. It's a requirement of WAI-WCAG AAA rating and it's a great learning experience. We have the highest admiration for the blind websurfers, coders and programmers we've met. In the case of blind users and developers, we're reaching across many of the digital divides that have separated us and are truly creating a web that equalizes us in terms of accessibility and participation.

Of course that's not saying we don't have a long ways to go. There's many other points to accessibility, notably to persons with disabilities other then blindness, that we haven't covered with this experiment and our site can easily be criticized along some of these lines. Even in the confines of the blind category, we haven't touched upon Braille output or input devices as we know nobody that uses them.

• dataSpheric accessibility home
• Website accessibility testing
• Section 508
• Arizona P130
• dataSpheric Accessibility Directory