I was recently reading a couple articles about some potential accessibility issues within the video game Bioshock 2. The articles point out color contrast issues with an in-game puzzle, that could leave color blind users out in the cold.

Though I knew I’d regret it, I checked out some of the comments after the posts.

Some random snippets:

what really grinds my gears is how all of a sudden the whole world needs to help people to do stuff they are inherently challenged to do. whats next? an adapter to use a wheelchair on the balance board?

from “What BioShock 2’s Hacking Looks Like if You’re Colour Blind“

It amazes me how many people with a defect think that the rest of the world should cater to them.

from “What BioShock 2’s Hacking Looks Like if You’re Colour Blind“

isn’t this like a one armed man moaning about not being able to play golf?

from “What Colorblind Hackers See In BioShock 2“

This is more of a problem for people that are blind. I mean, come on, how are they supposed to play this? They should be catering to blind gamers as well. And what about those born without opposable thumbs. It’s not fair that my manatee can’t play play this game either.

from “Bioshock 2’s No Friend of the Colorblind“

I realize that Internet forums and comment threads have and forever will be peppered (or dominated in some cases) by people who live to get a rise out of people. Some are just plain ignorant; others are just trying to rankle by saying outlandish things. I’ve been around the web world long enough to have seen countless examples of both.

Still, there’s still a lot of voices out who just don’t get it or care. Their worlds aren’t “inconvenienced” by blindness, or deafness, or motor skill impairment.

Is it feasible to make every web site or every video game 100% the same experience for the disabled and non-disabled? Of course not. Is it asking too much to add avenues to them that make the experience better? In a lot of cases, of course not.

From adding captions to providing color blind-friendly color contrasting settings to keyboard equivalents, there are many ways to improve the accessibility of video games, without expecting drastic concessions from the developers.

For web sites, we’ve discussed many times how simple changes can go a long way. Effective alt tags, proper tabbing navigation…the list goes on.

It may amaze the one poster that “people with a defect think that the rest of the world should cater to them,” but I’d like to see if he or she would maintain such a cavalier attitude if a disability struck.

Tags: bioshock 2, color blindness, color contrast, Video Games

I’m in the very early stages of putting together accessibility improvements for an e-commerce web site. The site is several years old, and while it isn’t a complete accessibility disaster, there are many ways it can be improved. The markup was constructed decently enough, but it’s safe to say that accessibility wasn’t so much as even a fleeting thought.

My efforts are part of an overall project to improve and refresh the look and information architecture of the web site. From both a design and user experience perspective, we’ve advocated refreshing the site through gradual enhancements, instead of a massive, all-at-once redesign.

I’m excited at the chance to steer some real accessibility improvement on this project. This is a chance to get in there and make immediate improvements.

Some of the things I aim to do right out of the gate are:

These are easy “quick wins” that can be done without massive amounts of effort.

Not every accessibility undertaking — or redesign/refresh overall — needs to be a huge undertaking. For one, there may not be a budget to completely overhaul a site. Also, such overhauls can potentially be too sudden and startling a change for visitors who have been there before.

You don’t have to wait for the big, all-encompassing project to make improvements. You can tackle it piece and piece and, incrementally, improve the accessibility.

As I knock off each of those bullets above as well as whatever else I find, the site will become better and better for those who visit via screen readers, keyboard navigation or whatever means they need to. The site will become better and better, period.

Tags: accessibility, alt tags, color contrast, header tags, keyboard navigation, screen readers, usability, user experience

I’ve had the opportunity recently to do some basic accessibility testing on some sites, and thought I’d share just a few of the tools I use to make certain aspects easier. There are many out there, with varying degrees of usefulness. This list barely scratches the surface.

Firefox Accessibility Extension 1.4.5.0
This toolbar gives you a handful of features that aid in accessibility testing. You can run a report that notes accessibility failures. You can easily identify important elements of a page such as title, headings, frames, and links. It gives you image options such as viewing alt tags in context, or viewing the page without images altogether.

There are also built-in validation offerings, as well as color contrast findings and keyboard navigational aids. It directs you to options such as the Cynthia Says Web Content Accessibility Report and WebAIM WAVE

Web Developer 1.1.6 add-on for Firefox
Another Firefox extension that enables you to check out aspects of accessibility is Web Developer for Firefox. You can easily disable elements such as CSS and images, as well as run automated tests such as Validate CSS, Validate HTML, and Validate Section 508, which utilizes Cynthia Says.

Juicy Studio Luminosity Colour Contrast Ratio Analyser
There are numerous tools out there for testing color contrast, but I find myself in the habit of using the one at Juicy Studio. In determining if text on backgrounds (colors or imagery) meets the minimum WCAG 2.0 requirement of 4.5:1 (3:1 for larger text), all you have to do is enter the foreground and background colors and you’ll see how you’re doing.

GrayBit.com
This is an interesting tool that renders a site in grayscale. By pulling color out of the equation, it enables you to get a raw sense of visual contrast.

Of course, none of these really do everything for you. Looking right in the code of a page, or carefully navigating through with your own senses offer invaluable insights as to how well a site has been set up.

Tags: accessibility tools, color contrast, firefox

As I eluded to in my post about getting accepted into the Guild of Accessible Web Designers, I had to make some edits to this site to strength its overall accessibility.

Some of these changes stemmed from WordPress limitations and others were just things I missed or wasn’t aware of. All in all, though none of the changes were out-of-this-world complex or obscure, it was an excellent learning experience for me. While this site’s accessibility no doubt isn’t “perfect” yet (is such a thing possible?), I feel better knowing that I’ve made definitive strides forward.

Here are some of the changes that were recommended to me by GAWDS:

Skip Navigation option
This is perhaps less of a must-have on a site like mine without header navigation, but it is advisable to provide an option at the top of your site for skipping straight to the main content.

Screen readers read from top down, and as such, when a visually-impaired navigator hits each page of a site, he or she has to hear the navigation spoken aloud before getting to the meat of the page. Providing the ability to skip past that to the meaningful content makes the experience much more straightforward and less tedious.

What I did: I added the “Jump to Content” anchor link you see at the top right of this page.

Proper Header Order
Correct usage of header tags (<h1>…<h2>…<h3>…etc) provides greater accessibility on a couple fronts. One, screen readers like JAWS offer a key command for reading off headers in order. They also announce the number of headers up front.

The WordPress template I’m using followed proper procedures like having only one <h1> tag, and subsequent <h2> and <h3> tags. However, there were a few instances, based on certain content showing in certain situations, where <h2> was missing. Skipping from an <h1> to an <h3> can cause confusion for screen reader users.

What I did: I straightened out some of the inconsistencies to ensure that on all pages of this site there is one <h1> followed by <h2>’s. I didn’t find the need to go beyond <h2>’s.

Link Focus
For those navigating through a site via a keyboard, making it obvious what link they are focused upon is good accessibility. The unformatted dotted-line box around the focused-upon link isn’t the most visually discernible, across the major browsers.

What I did: I chose a distinctive orange color to clearly denote what link you are focused on when you tab through the site.

a:focus, a:active {
text-decoration : none;
background: #ffce00;
}

Color Contrast
When you have text on top of a background image or solid background color, if there isn’t a strong enough contrast between the respective colors, certain visual disabilities such as color blindness may prevent users from properly differentiating the elements.

WCAG 2.0 call for a minimum contrast ratio of 4.5:1 (3:1 for large text).

What I did: Using an online contrast ratio calculator, I followed the most stringent Level AAA WCAG requirement by ensuring that my “the art of web accessibility” header text was at least a 7:1 ratio from the blue cloud background image.

Likewise, I made sure that my aforementioned link focus background color adhered to a 7:1 ratio from the text on top of it.

Ambiguous Linking
Last and certainly not least, the WordPress usage of “No Comments” or “X Comments” linkage for all blog posts is a link that provides no clear-cut direction as to where it will take the user. Links on the same page should also be worded uniquely and specific to the target.

When you see “No Comments”, you don’t intuitively know that clicking on it is your avenue to posting a comment on a specific topic, much less when there are 5 identical “No Comments” on the same page.

What I did: Given the handy code below, I changed the offending link in the Main Index Template so that, as you can now see on any post on this site, it reads something like “Comment on X topic”. That way, it is more obvious from the link that clicking on it takes you where you can post a comment on the specific post “X topic”.

<?php if('open' == $post->comment_status) : ?><p
class="comment_link"><?php comments_popup_link('Comment on
'.$post->post_title, '1 Comment on '.$post->post_title, '% Comments on
'.$post->post_title,'postcomment','Comments are off for
'.$post->post_title); ?></p><?php endif;?>

I made a few minor tweaks here and there, but these suggestions from GAWDS were very helpful and set me in a good direction for making this site closer to practicing what it preaches.

Tags: color contrast, gawds, guild of accessible web designers, h1, h2, h3, header tags, link focus, skip navigation, WCAG, Web Content Accessibility Guidelines, WordPress