Building a site for the visually impaired

Any tips and advice that you can share?

[Nick_W]

Hi all,

I'm going to build a site about an eye condition that will mean that many if not most of my users will sufferers of this condition. (visully impaired)

Here are some points I think I ought to work on. I'd appreciate any comments/additions...

• Nice html flow -> CSS layout
  
• No font size specification
  
• Choose a style (blaci on white vs white on black)
  
• <label> tags on forms as well as <legend>'s and <fieldset>'s
  
• No images at all
  

Your thoughts would be appreciated ;)

Nick

[feemgh]

I don't know too much about this topic but I found the site detailed below a few weeks ago. I have not had a chance to look at it yet as I have not had time....

Hope it is OK - if not let me know.

[diveintoaccessibility.org...]

I read somewhere that the Royal Society for the Blind (UK) offer good tips etc I don't know their URL but you can probably find it using Google.

Hope this helps

Fee

[Sinner_G]

I don't know if you already thought of it (guess so), but still, remember to test your site with a browser for visually impaired people. I have used Bobby [bobby.watchfire.com] in the past.

I wouldn't say no images at all, if other people will surf your site. Just don't forget the ALT tags.

[BlobFisk]

Some articles on Accessibility that you might find interesting:

Hints for Designing Accessible Web Sites [rnib.org.uk]

Article: colour and accessibility in web pages [lois.co.uk]

Dive into Accessibility [diveintoaccessibility.org]

Useable Web [usableweb.com]

Hope these help!

As well as ALT tags, I always try to use the TITLE tag also.

<edit>typo fixed</edit>

[edited by: BlobFisk at 3:32 pm (utc) on Sep. 23, 2002]

[ken_b]

Hi Nick;

One thing you may want to consider is column width.

The reason for this is that if a reader enlarges the font size it may cause the page to require scrolling sideways to read a line of text, and that makes reading more difficult.

It would be better if the text wrapped at an earlier point in the line.

I just tried this here on this page and setting my font in my browser to "largest" caused me to need to scroll sideways .

[Nick_W]

Good stuff, thanks guys!

The reason I won't use images is really becuase i'm a crap artist ;) Nice excuse to not have to go to through the pain of creating a logo!

(if you've seen any of my stuff you'll know I avoid gfx like the plague ;))

Nick

[ukgimp]

There are a few ideas here in a post from a while back.

Hope it helps a little

[webmasterworld.com...]

Cheers

[jackofalltrades]

a charity i used to temp for have put a lot of effort into an accessible site.

www.update.org.uk

Its Scotland National Disability Information Provider.

there are should be plenty of info on the site re:site design.

Scott

[Trisha]

Skip navigation links are important so that people don't have to listen to their screen readers read out every link.

You may want to consider using access keys also, however there was a recent discussion about problems with using them on the w3c-wai-ig mailing list. A archive of the list is at [lists.w3.org...] (hopefully it is ok to post that link).

I highly recommend Jim Thatcher's book, if you want to learn more.

[Nick_W]

Good one Trisha, yes I generally build skip nav links and will certainly include them here although with the kind of css layout I'll boild the links will be at the bottom of the code.

Maybe I need 'skip to navigation' links ;)

Nick

[dingman]

I used to work with a blind lawyer, and had primary responsibility for his adaptive hardware and software. The tip about making sure navigation information doesn't come first on the page is a good one based on my obervation of and conversation with him.

CSS also offers the ability to modify the speed at which screen readers with speak. It looks tempting, but if my single user sample is representative, you should probably avoid it. The reasoning behind that is that Jim *contantly* adjusted the speaking speed of his synthesizer. Although he's too small a sample to have statistical significance, this makes a lot of sense. Those of us who read visually switch from scanning to skimming to actually reading with great regularity in the process of determining which parts of a page we care about. A visually impaired client does the same by varying the speed of their speach synthesis from something that sounds like fast-forwarding a casset tape to normal speach. If you specify speeds for them, you may just interfere with their normal reading.

Nick, if you like, I'll drop a line to Jim and ask for confirmation of my theory here.

I might also consider specifying large font sizes and high contrast colors if there is a possibility that your user community will include people whose sight is not so severely impaired as to require screen readers and brail displays. Speaking of which, Jim tells me that brail displays often have trouble with characters outside of 7-bit ASCII, so you might want to pay some attention to that.

[Nick_W]

Great points Dingman!

I dont' think you need to confirm your theory. It makes perfect sense and I'm certain you're right ;)

The site will be used (guessing) by both:

• Sufferers of the condition
  
• Carriers and family members of sufferers
  

So the site needs to cater for varying levels of impairment (it's a progressive condition) and normal sight.

With that in mind I will build without specifying a font-size at all. And by providing an alternate to the defaulg black text on white. (the reverse)

I think that's good enough don't you?

Thanks again for all the great input guys, in some ways this is becoming a very exciting challenge to me ;)

Nick

[madcat]

A while back, Ergophobe gave some superb information that's relative...

[webmasterworld.com...]

[dingman]

Thanks for pointing out that thread on color vision deficiencies. I tend to think a lot about accessibility in terms of non-standard browsers and adaptive technology for the blind, but hadn't really given much thought to color as an accessibility issue. I'm mildly disturbed that I only see the difference between "normal" and "red-green colorblind" in one of the three examples on the page Ergophobe linked to. Is there realy a "3" hiding in that mass of dots?

Font-size: browsers do allow the user a lot of controll over default rendering, and people with vision impairments are probably a lot more likely to take advantage of it than other users, so I think Nick is probably right that not specifying the font size is the right thing. Would it perhaps make sense though to put a link somewhere to an explanation of how to do such things in a few common browsers, for those who are perhaps early in the stages of the condition and might not know yet?

-dingman

[Nick_W]

put a link somewhere to an explanation of how to do such things in a few common browsers

Absolutely! I'm planning an articles DB and of course browsers and the web is what I do so I'd already planned some content on that topic ;)

Nick

[ergophobe]

I'm mildly disturbed that I only see the difference between "normal" and "red-green colorblind" in one of the three examples on the page Ergophobe linked to. Is there realy a "3" hiding in that mass of dots?

Oh the pain. Yes, I remember when I discovered that I was color blind....

school nurse: "What number do you see there?"
me: "Huh"

Twenty years later...

Eye doc: "Which one of these numbers looks closer to you?"
Me: "The one on the white background."
Eye doc: "Which one is that?"
Me: "The one on the left".
Doc: "Oh, the one on the Kelly Green background."

Anyway, I'm so glad to see that interest in all sorts of accessibility issues continues and that Nick has launched another great thread!

Tom

[Nick_W]

You're welcome ;) It's an interesting topic that too few webmasters think about..

I have some specific questions if anyone cares to comment:

• A two column layout with a 200px col and the remaining space for the second col be too much? Should I keep it single column because of text resizing?
  
• Definition list: Good for this purpose (as a list of links with descriptions) Looks great in Lynx...
  
• Black text on White, is that enough or should I provide White text on black also?
  
• Should I bold all body copy?
  

Nick

[ergophobe]

For me I think resizeable text and high-contrast colors are the linchpins of visual accessibility.

I don't think there's anything wrong with two columns, as long as there's space to get a decent size text in the smaller column.

I hate with text on a black background unless it's for photo galleries, where I think it gives you a nice "slideshow in a dark room" feel. In general it's harder for the vast majority of people to read, but I suppose it's possible that certain conditions might cause people to prefer it (overly sensitive to light), but that seems like a huge stretch.

Tom

[mack]

ON one of my sites i did this the simple way. PLaces a link saying "visualy impaired" and it sent the user to a version of the site using larger text with a better contrast. word for word the main site and the impaired site where identical so i placed a robots.txt file in the impaired directory to prevent spidering.

[ukgimp]

Should I bold all body copy

Having looked into this and been fortunate enough to have a few registered blind people to talk to that would not be the favoured choice. High contrast yes, but massive text no. Normal text that can be changed in size is key. In fact the one lady I am thinnking of found it really annoying to come across large text, especially as she had a pices of software that enlgarges sections of the page so to her, instead of normal size it is massive

It's been said but think of how the page renders for screen readers. If you do have a lot of "top" space stuff, try using a jump point to the actual content.

[Nick_W]

Yep, already doing that, Skip navigation is the first thing you get after the h1 title.

The sites coming along nicely and I think I'm getting it right, when I've done a bit more I'll sticky any who are interested in commenting/helping on it ;)

Nick

[ken_b]

>> A two column layout with a 200px col and the remaining space for the second col be too much? Should I keep it single column because of text resizing?

I wonder if the first column might need to go as far as maybe 250, but that may be a judgement call.

>> Black text on White, is that enough or should I provide White text on black also?

High contrast is the key I think. Black on white might help some folks who are light sensitive. Too much of a bright white background can cause some problems for some folks.

But you might be able to offset that with a note suggesting they highlight the text. That would also give them a light font on a dark background. I do that fairly often to make reading easier for me.

>> Should I bold all body copy?

No, I don't think so. It's more important that the text be resizeable.

[Nick_W]

I wonder if the first column might need to go as far as maybe 250, but that may be a judgement call.

Yeah, I'll stick with 200px as it is a very non essential piece. Just a "how to get involved" paragraph or possibly a link and teaser to the latest content addition...

Cheers

Nick

[ukgimp]

Black on white might help some folks who are light sensitive

If I was light sensitive I would already have the brightness of my screen turned right down as I would know that most sites would not cater for this so upon ariving at an "inverted" coloured page they would be left very much in the dark. It would be worth asking someone with this sort of disabilty what they would prefer though.

Nick, I would be interested, so sticky me the details anytime.

Cheers

[madcat]

screen readers

Any good ones?

[ukgimp]

Lynx springs to mind

There are a few online viewers that give you a good idea of what your pages look like.

[lynx.browser.org...]

[webaim.org...]

[Nick_W]

Lynx isn't a screen reader though ;)
It's a text based browser, although I think you can get some software to work with Lynx to make it screen read....

Nick

[ukgimp]

Damn fine point Nick :)

[www-3.ibm.com...]

[dolphinuk.co.uk...]

[freedomscientific.com...]

Try these instead

<added>
Good list

[utoronto.ca...]
</added>

[dingman]

I'll sticky any who are interested

Count me in.

a note suggesting they highlight the text.

Maybe the attitude someone with a known visual impairment will bring to that is different from mine, but when I find myself highlighting text just so I can see it, I also find myself muttering imprecations agains the web designer. A couple days ago, my wife and I were discussing that very technique as a way of getting around the fact that a lot of the herpetology sites she has been looking at lately are very amteurish in appearance. We generally forgave that because most of these sites are put together by hobbyists who don't claim to know much about the web and can't afford to hire a professional, but we were hardly impressed that they didn't notice their pages were unreadable
.

[Nick_W]

Well, I went with the white on black added option, I'm a PHP guy so it was a piece of cake to knock up something using sesions so that they can choose...

Also, the 'black style sheet' was just a matter of inversing the colors, so no real work involved and any who want it: Have it ;)

Nick