Designing A Website With Blind Users In Mind Options

[ogletree]

First I want to mention I am not a WAI (Web Accessibility Initiative) expert. Everything that I talk about is from experience as a Blind computer user and a as a person who has trained Blind users how to use their computers. I wrote this after I spoke with Greg Niland on the webmasterradio.fm show GoodKarma on 7/13/06.

How to set up a website for blind users
I could not find any current numbers of how many blind people there are in the US and world. The most recent numbers were from the 90's and they said 10 million. Greg and I both agreed this number has to be way larger now maybe around 15 million. There are more and more people getting on the Internet every year and the blind population is no different. With the baby boomers hitting their late 50's there are more and more people with visual impairments. I have no data to prove this but I think the Blind community is more apt to buy stuff online than normal users because we do no have access to transportation like our sighted friends do. Also the Internet opens many door to the blind that were not previously there. When a blind person goes to a store somebody has to tell them what is in front of them and what the prices are. With the Internet we can do this by ourselves.

There are 2 types of blind people. Ones that can read print and ones that cannot. The ones that can not read print need an alternative to the monitor. They have 3 options.

• Text to Speech (screen reader)
• Braille Display
• a person to read the screen to them.

For those who have low vision (like me) there are 3 options

• Screen Magnification software
• Larger Monitors
• Flat Panel mounted on an arm

When designing a website with blind users in mind the main rule is to make sure everything you want to tell your users is in print somewhere. The trend to use CSS have improved the Internet for blind users quite a bit. If you follow good SEO rules and use CSS there is a very good chance blind users can see your site. The first rule that you see in every list is to use alt tags on your images. Describe what you see in the image. You don’t need to describe it in complete detail just describe what it is there for and of course any text that is on it. Next you want use descriptive anchor text. The links in this post our good examples of what to do. The thing to avoid is a link that says “click here”. It is very helpful to have a good sitemap. Not just list of links but links with descriptions next to them. Similar to how directories are set up.

The largest group of blind users will be those with low vision. If you make a site where a low vision person can easily read then you have made a website that normal users can easily read. I have often said that advertisers should hire people with low vision to help with design. Most ads are seen for a very short period of time and from a distance. If you stick a person with low vision in front of your ad and they don’t get it then there is a good chance a sited person that is not paying close attention is going to get it. It is very hard to read a site that has a weird background or text that has very little contrast against the background. Don’t lock down the print size so we can’t use the browsers built in ability to enlarge text. (In IE: View -> Text Size)

Most people don’t know that you can do almost anything on a computer without a mouse. This is what blind people are doing. It is a good idea to learn how to navigate your site without using a mouse. Set up tab orders in your code.

There is a ton of information on the Internet about blind people. I found a bunch of information at The New York Institute for Special Education and The National Federation of the Blind

This is not to just be an information post. I would like to discus the things mentioned in this article.

David Ogletree

[cre8pc]

Wow!

Thank you for your patience with us and thank you for this post. I look forward to seeing discussion on it myself. I think we will learn a lot!

[sanity]

Welcome to Cre8asite David and thanks for such an insightful post.

Can you give us an example of a site that really does all of this well?

[Ruud]

Hi ogletree,

Thank you so much for your post: really good stuff, straight from the horse's mouth, so to say.

Like sanity I wonder if you could point to a site you would give two thumbs up.

As another frame of reference; which theme/skin have you selected here on the forum -- and how does the site perform for you?

You mention low vision visitors and a certain type of ad "blindness". I wonder if a low vision visitor needs more white space? Is a front page like the BBC or the New York Times too busy?

[bragadocchio]

Hi David,

You've provided us with some great points, and your rule about including everything in print is an excellent starting point for a discussion.

I've been posting some images of flowcharts to my site recently, and alt text doesn't provide me with enough room to include what I would like to in print. I guess a longdesc attribute is my best choice for that. Do you come across longdesc attributes often?

I'd guess, like good anchor text for links, good descriptive titles for pages and blog posts are probably also helpful since they often end up as the text for links to those pages or posts in search engines, and other places.

The link to The National Federation of the Blind accessibility page appears to be broken, but I did find an article about accessibility on their site: Making Your Web Site Accessible to the Blind.

I'd venture a guess that you are right that more members of the blind community are buying online. I think that more people are buying online overall because the web makes it so much more convenient for everyone. Kim told us in another post here recently that it's more likely that someone would buy something from a shop that displayed an image of something over a site that didn't. I think it's important that a description of a product is effective regardless of whether or not an image accompanies it.

[ogletree]

I am a low vision user and I prefer sites like Google and digg. I never could get used to slashdot. It is too busy. Low vision users love the white space and good contrast. cre8asiteforums is a nice site. Colors are a bit girly but that is not a blind thing. I can't remember where I read it but somebody was talking how it is bad to use non black text (like grey). I agree with that. When you are trying to get someones attention you don't want to make them work for it. High contrast is always important. It seems like whitespace is a hot topic of late and I'm glad to see people talking about it.

Google is probably the best site for usability. Wordpress blogs that use tableless CSS design work very well (like the default theme or my site www.ogletreeseo.com). It is a good idea to install the firefox web developers plugin so you can turn off CSS and see what screen readers and bots see. Another thing you can do is when you use acronyms like CSS and SERPS you need to seperate the letters with spaces so that the screen reader does not try to read it as a word. This is a pretty extreme measure and I would not do it unless you knew you had a lot of blind users.

www.cre8asiteforums.com is not bad but there are several things that can be done to improve it. Don't get me wrong I really enjoy this site and the actual forum pages rock. I am just talking about the front page here. For starters the front page is too busy. I am really big on keeping front pages simple. You really don't want to shove too much information at people. Most people can't handle more than 3 or 4 presented to them at once. When I visit the front page I'm overwhelmed. There are programs out there that will show you the hot spots where people are clicking. Use that information to decide what is the most important information to put on front page. If people really want to find something they will. I guess I should make another thread with my recommendations. The point is a blind/low vision user will get tired of trying to find stuff in the midst of all the clutter and move to another site. My example of the differences between slashdot and digg is a perfect example. They are both good sites but digg was easier to read and that is the site I use.

This post has been edited by ogletree: Jan 11 2007, 11:30 PM

[AbleReach]

Another thing you can do is when you use acronyms like CSS and SERPS you need to seperate the letters with spaces so that the screen reader does not try to read it as a word. This is a pretty extreme measure and I would not do it unless you knew you had a lot of blind users.

Do screen readers pay attention to the <acronym></acronym> tag?

Aural CSS is not well supported, but it is coming!

Ogletree, thanks for starting this interesting thread. Most of what you write about benefits all users. That's something I find to be very encouraging.

Welcome to Cre8asite

[ogletree]

Yes it does support the <acronym></acronym> tag but it is not turned on by default. The user would have to know what an <acronym></acronym> tag is and then turn that feature on.

This post has been edited by ogletree: Jan 12 2007, 12:26 AM

[AbleReach]

If a site uses <acronym> or some other feature that is not recognized by default in JAWS or Window Eyes, etc., should that be mentioned in an accessibility statement?

[ogletree]

I have no idea. I don't even know what an accessibility statement is. I'm just a blind user that is also a webmaster not an accessibility expert.

This post has been edited by ogletree: Jan 12 2007, 11:26 PM

[SEOigloo]

Welcome, David.
Thank you so much for sharing all of this with us!

Bill - what is a longdesc attribute, please? I am not familiar with this term. Thanks!
Miriam

[Ruud]

longdesc is an attribute which contains a pointer to another document (page) where the image is explained better (see here).

Sometimes the full meaning of an image can be provided by simply giving a short text ALTernative; "Woman on horse", "Rand with yellow shoes", etc. But sometimes a longer description is needed.

[AbleReach]

I don't even know what an accessibility statement is

LOL, ogletree. I know the feeling.
Six months ago I didn't know what they are, either. I came across them while doing research for a site I'm working on. They seem like a cool way to gently build awareness of good coding practices while also helping users.

I started a thread asking for discussion of accessibility statements after finding that they are quite varied.

[bragadocchio]

Hi Miriam,

It's additional text that appears on another page, acting to supplement the information found in the alt text. Here's what the W3C says about it:

longdesc = uri [CT]
This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map's contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an A element, the user agent's mechanism in the user interface for accessing the "longdesc" resource of the former must be different than the mechanism for accessing the href resource of the latter.

One resource I found about it says that it should only be used to provide information about the image that is obvious. Stuff that isn't obvious should be included in the text on the page itself. An example might be the name of an unknown person in a picture.

Another resource stated that it was common to include the image being described on the page the longdesc link points to.

I'm not aware of whether search engines follow longdesc links, and I would guess that they probably don't.

Sadly, it appears that most browsers and screen readers ignore longdesc, too. Joe Clark describes some good practices for longdesc, in a chapter of his book Building Accessible Websites, which is titled The Image Problem.

[ogletree]

Building a website for blind people is not hard. The hard part is building a website for sited people that also works well for blind people.

This post has been edited by ogletree: Jan 13 2007, 11:36 AM

[SEOigloo]

Thank Ruud & Bill,
That's extremely interesting. I had never heard of this.

So, if the SEs don't likely follow them and most browsers and screen readers ignore them, would these really be effective in assisting blind visitors to better understand a website? It seems not. I wish these were better known, as it seems they could be very helpful in cases where, for instance, one was showing an image that diagramed how to do something. Obviously, you'd never put thorough instructions in an alt tag, so this longdesc tag would serve well...but, if they are not well-known....hmm...
Miriam

[joedolson]

The longdesc attribute is not completely ignored - Jaws, at least, reads it, although it also does open the page in a new window - not an ideal solution.

An interesting suggestion for getting around this, from Malarkey is to use a "footnote" method to supply longdesc information - instead of using a URL, providing an anchor:

CODE

<img src="" (etc.) longdesc="#footnote-1" />

As an added bonus, the descriptive information is on the page - so even if the screen reader doesn't acknowledge the longdesc attribute, the information is available somewhere. With appropriate labeling, it'll be usable and accessible information.

[AbleReach]

Good find, Joe! I will be using this.



aside - check out Malarkey in IE vs Moz

[joedolson]

Interesting choice...frankly, I'm sure it's easier to deliver two completely different designs than to try and fix all the IE6 bugs in one!