Skip to main content or search

Accessibility for the Masses

Friday March 17, 2006 / 10 Comments

I was recently reminded while working on our panel for SXSW that accessibility isn’t just about screen readers, markup guidelines, or alt tags. Unfortunately, that’s about as far as most of us ever get with accessibility. It’s good that most of us are making an effort, but it’s time to start consistently thinking bigger.

Screen Readers

This is generally the dominant audience that we think about with accessibility, and while it’s an important audience, there are plenty of others out there that can have difficulty with a site even if it is perfect on a screen reader. Following the level 1, 2, and 3 guidelines is a good start, but it’s only the basic foundation.

Keyboard (and Presumably Voice) Navigation

Another common accessibility challenge is for users who cannot use a mouse. Either they have lowered mobility or they may not have arms or hands. Whatever the reason, the ability to navigate by keyboard is extremely important to this audience. While most browsers do a decent job of allowing users to tab through the page, sometimes it takes a bit more to really make your site accessible for these individuals.

I won’t pretend to be an expert on how to accomplish this as it’s an area that I, myself, am just starting to dive into. However, it’s worth mentioning and reminding everyone that it’s something to consider when building for accessibility.

Low Sight

This is an area that can be fairly contentious, but we should all be striving to enable our visitors to view our site at whatever font size is comfortable for them. This means using fewer graphics with small fonts, sizing fonts without using px, and making sure that the design scales gracefully. Not everybody wants to have to go find their glasses to read something online briefly.

We all complain about how stupid businesses are for not putting their customers first, yet, so many of us refuse to take the time to put our visitors first and enable them to view our sites the way in which they are most comfortable.

Other Devices

Clearly we all want our information to be available to as many people as possible. That means we want our sites to be accessible by as many devices as possible. There are numerous ways to handle this, and I don’t want to dive in too deep with the details, but just wanted to remind everyone that accessibility isn’t just about disabilities. Can someone view your site on their phone, PDA, PSP, or other portable device? Are there people that would need to do so?

Examples

Since Google maps were an important part of what we were doing for the panel, we had additional accessibility challenges. While we didn’t have time to implement them, I found the process of thinking about them to be a truly eye-opening experience.

While working on the panel, I spoke with Derek Featherstone looking for some inspiration on how we could really improve the accessibility of our implementation beyond the basics. Naturally, he had plenty of ideas, but his input helped me refine my ideas and really think about accessibility and how to enable visitors.

Text Equivalents

Clearly, using a map is creating an experience that relies heavily on vision in order to benefit or gain value from a site. With Plazes, the map consolidated some of the most important information. Naturally, without a plain text equivalent, the experience would be inherently inaccessible and virtually worthless to anyone who couldn’t view the map version.

However, we’re not just talking about alienating users who can’t see. Individuals on pocket devices probably aren’t going to be receiving the full experience either. So, how do you translate a map into plain text?

While we didn’t get a chance to implement it, the decision was to provide distance and direction to the place relative to your position. With some basic calculations, we could simply insert text with each friend that said “4.3 km northeast at Starbuck’s.” So even on a PDA you could still uses Plazes to see if you have friends nearby and find out where they are.

Keyboard Navigation

Another feature, while not extremely easy to use on Google Maps is the ability to navigate with the keyboard and view the details of the given location. Unfortunately, it was slightly more challenging for us to maintain this functionality given our timeline, but the desire and thought was there.

Take a moment and try to use Google Maps without a mouse. It’s a bit more challenging, isn’t it? If you can’t click on a location and view the details, the experience becomes virtually worthless. Enabling users to access and view your data regardless of their input devices is another great way to improve accessibility. So, next time you build a site, try navigating with just your keyboard. After you’ve “walked” a mile in someone else’s shoes, you’ll have a new perspective.

Summary

Accessibility isn’t simply about blind users or going through a checklist. It’s about understanding the challenges that others face and realizing that “others” is actually a large group of people that includes those with disabilities, as well as those with different devices. This was the first time I really started thinking about accessibility from a higher level, and I found it challenging and rewarding at the same time. Having a higher level understanding of accessibility is imperative for us to move forward. Using alt attributes just isn’t enough.

Featured Stuff - Resources: Wireframes & Page Description Diagrames

Omnigraffle and Visio versions of the wireframe templates and stencils I use on all of my projects. There’s even a few examples included for good measure. More about Wireframe & Page Description Diagram Stencils and Templates


I agree on all counts except for pixel font sizes. IE6 is the only browser left with a large market share that actually has a problem with this. IE7 promises to fix it, so in the meantime I’d hope that people are migrating away from version 6, towards Firefox or something that actually works.

Nathan Smith

You have some really good points here and I’m saving this for later. I agree that people tend to think more about handicaps than the wide range of devices, though I think a huge obstacle (at least for me) is not having the ability to test for different environments. I’m sure there are a good number of really cool designers who have a PDA, browser phone of some kind, a Mac and PC each equipped with every version of browser, and a screen reader to boot, but most of us have to use what we’ve got and it’s tough to incorporate too many accessibility points that can’t be tested (I get tired of calling my friends to test my sites for me). =D

Natalie

Nathan – I might be misunderstanding you, so please correct me if I am, however, until IE 6 is gone, I don’t believe pixels have a place in our CSS. The fact of the matter is, no matter how much we’d like to look toward the future, we can’t do so at the expense of the present.

Natalie – I agree completely. I never said it was going to be easy. :) Frankly, at this point in time, I’m satisfied with simply generating awareness of the issue. We can’t solve all the problems overnight, so baby steps will have to do.

Garrett

Wait, does that mean, that people can use all those alternative devices, but they cannot use anything else but IE?

Rimantas

The low-sight area is one I think is especially important as it’s probably the largest audience with accessiblity issues.

A good solution to the old cross-browser text sizing issue I’m sure a lot of CSS stylers are aware but it’s worth pointing to again I reckon:

Cross browser happy accessible font sizing

Until IE6 goes away I think we’re going to be stuck with this, and I reckon it’ll be around for awhile after IE7 is released judging by the high number of corporate networks still using IE5 or 5.5!

Another issue with text scaling I’ve run into is ensuring the text doesn’t run up to inaccessible background colours for it’s colouration in CSS compatible browsers.

This can easily happen with navbars when the tabs (for instance) use a graphic or colored background and the text is white, and at larger font sizing it runs over a white background, or simply slips under a DIV area.

With complex graphical designs this is an easy pitfall to run into, and helps make the argument for simpler design.

rich

“” Keyboard (and Presumably Voice) Navigation “”

We are working on something that sort’a does this.. hopefully, we can deploy a small desktop app to make the navigation and interaction smoother. We call it audibletype!

www.audibletype.com is a web based voice recognition system. The system allows for transcription of audio and video files to search engine friendly text! The system will transcribe your audio or video file for you and provide time indexing so that you can quickly navigate trough the relevant data. Audibletype is also working on an open-api so that others can develop and build “widgets� to take full advantage of the technology and service. It also comes with tools so that you can make good use of your content. You can even send it back to your blog.

Audibletype is currently inviting beta-testers to participate in our UI development phase. Check it out at www.audibletype.com

audibletype

There seems to be a lot of confussion surrounding the sizing of text.

IE 6 will not only be around, but remain a significant player, for some considerable time to come. This could easily be 2 years or more (look at IE5.5). Like it or not, it’s something we have to live with.

The EM unit is the natural unit for setting the size of fonts. It’s true, the Windows version of IE does not scale text sized with the EM unit correctly. However, this is easily fixed by placing the following at the beginning of your CSS:

* {font-size: 100.01%;}

You can then safely set your default text size, using EM’s, for the BODY tag e.g. BODY {font-size: .8em;}

No more “small fuzzy text”, when setting IE’s default text size to ‘smaller’.

Toni Ruckwood

Great Accessibility post, it will help assistive technology users. Do you know The Wave testing tool… nice visuals etc. http://wave.webaim.org/index.jsp

Aaron

Another issue with text scaling I’ve run into is ensuring the text doesn’t run up to inaccessible background colours for it’s colouration in CSS compatible browsers.

Keep up the good work. Greetings

Pozycjonowanie

I think there are a good number of really cool designers who have a PDA, browser phone of some kind, a Mac and PC each equipped with every version of browser. Great aritcle.

Tanie linie lotnicze

Comments are closed for this entry.