Slashdot Mirror
Designing Websites for Disabled / Elderly?
dangerz asks: "I'm in a class right now that gives you a client and you must design a site for them for free. My class was split up into a group, and I am the Project Manager / Lead Programmer in the group. Our client is a group for Disabled and Elderly People. Basically, what we need to do is create a site for them to sell their art work. We had a meeting with the board of the organization today where we explained the basics of a website and what we'd need from them to move on. They learned pretty quick, but there are some things they want that we think aren't aesthetically pleasing. Has anyone ever had to do a site where the target audience was elderly or disabled people, and if so, what steps did you take to make sure everything was simple and accessible?"
To whomever can bring me the head of the trollingest troll of them all, thats right, I'm talking about Cyni Lauper. She must pay for her transgresions in BLOOD!
From w3.org:
15.2.4 Font size: the 'font-size' and 'font-size-adjust' properties
This property describes the size of the font when set solid.
Possible values are:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
Elderly people generally can't read small fonts. It's probably their biggest complaint about web sites.
The solution is to use a font size of 1em for your normal text. That way your users will get the font size that they have chosen as their comfortable default.
This is pretty good advice for users of all ages actually.
Some govt webmasters wine about this, but it's really a good thing, given that all should be able to access govt data.
The W3C (the people behind the HTML, HTTP and CSS specifications) have published the Web Content Accessibility Guidelines for exactly this situation.
The most sensible methodology is to write basic, meaningful HTML, and then use CSS, Javascript, images, etc where they will add to the value of the website where you can do so without constructing barriers for certain groups of people. For the most part, HTML is already accessible, and it takes screw-ups to make it inaccessible. Unfortunately, the types of screw-ups that make websites inaccessible are very common (things like leaving out alt attributes on images, trying to fix font sizes, etc).
As for it being aesthetically pleasing, accessible websites don't have to be boring, but if you have to choose one or the other (you rarely do), wouldn't it be better that somebody could actually use a website, rather than it being a pretty-looking, but ultimately useless toy?
As far as structure. Simple Simple Simple. Big bold headers. Big separators. Lots of CLICK HERE links. Most people miss the mouseovers and don't really understand hyperlinking. And make those mouseovers VERY different. Invert the colors of the link when there is a mouseover event. Lastly, aim for 800x600, no bigger. My father uses XP at 8x6 on a 19" monitor and it is too small for him.
Fear Is the Only God
Can't we make adequetely advanced software on their end to interpret any site instead of consigning them to only a select few tailored to them?
An Education is the Font of All Liberty
firstgov for seniors(although not quite as good as seniornet.)
There are also several libraries that have very good senior sections, such as Multnomah County Library, and Vancouver Library
Ahem. I'm no expert, but! I have done commercial web design and coding, and I work with (mentally and physically) disabled people and with disabled seniors. A few thoughts off the top of my head:
/. so I assume you know what that is), making the explicit point that you can vary text size in Firefox just by ctrl+scroll wheel. Tell everyone. It's the better browser. ;-)
1) Keep the site layout simple. I'd go with as much text and as little graphic content as possible, other than actual thumbnails of the art. Two columns at most (say, navigation on left and content on right), and use percentages rather than fixed column sizes.
2) High contrast. Bold primary colours in graphics, black text on white bg (or vice versa, but seniors might like the former better).
3) Use CSS. In fact, use several, and customize them for different types of visual presentation. Like, you could have a high-contrast, white on black, large text version, etc. Make them available in links; it might mean duplicating some HTML if you're not serving it up full of steaming dynamic goodness, but it's worth the effort... and text files are pretty small, relative to graphics anyway.
4) Label your navigation elements clearly, with descriptive text links rather than inscrutable icons.
5) You might think about a link to Firefox (you're on
6) TEST it. Find out what people like, what they don't. Using CSS, all you'll have to change (assuming they're OK with the graphics) is the stylesheet(s).
Good luck, it's nice to see people working to make the web more accessible. Cheers!
Corruptissima re publica plurimae leges.
I'm surprised that no one has posted this yet, but you should look at Bobby. You feed it a URL, it will spit out ways to help you make the page more accessible. It can be set to use Section 508 rules from the US Government or the W3's own recommendations on web accessibility.
I'd also recommend Zeldman's Designing with Web Standards. I provides excellent details for using CSS to control the entire appearance of your site and better support modern web standards. In addition, it has a whole chapter devoted to designing websites with accessibility in mind.
I came across it on stumbleupon a few weeks ago.
Speaking browsers transcode text to speech. It's even easier to go from text to a braille terminal (1).
(1) And yes I've worked with the handicapped.
Big fonts - light and pleasing colours - useful/necessary content
The three fundamental rules for a website. Since it's for they elderly, you might want to use a bigger font. Keeping in mind that many of them could be visually challenged, use good colour combinations and finally, make sure you have all the important content easily accessible. HTML Hell Page might help ya
Actually, the user does have to care about all his viewers. Without some kind of standardization, there would be no WWW. If web designers simply took the time to think about making their sites simple to render in various ways, including screen readers, braille displays and the like, the benefits would flow on to the entire web community as a result of the consistent HTML.
There are quite a few things that really get on the nerves of disabled clients who I work with, which have all been mentioned previously and I want to avoid "Redundant" modding. Flash is the main problem though, particularly when no alternative is offered. Similarly, lack of alternative text information for images and use of image-maps without alt-text can make a site more or less useless.
Real stupidity beats artificial intelligence every time.
-- Terry Pratchett, Hogfather
It may be a little late to post this, but this book (which was mentioned on Slashdot, partly because of the 'goatse'-like cover), 'Building Accessible Websites' is really great. It's available free on-line, and the whole site is a great example of accessibility. (Turn CSS on and off it your browser allows it, Opera does, change the font sizes, etc. It works great by screen reader too.) Fairly practical, much more so than certain 'reccommendations' from accessibility standards groups.
U have had heaps of good tips coming through
Looking from the start of the project
When doing stakeholder interviews it is a good idea to also interview the end users of a site. Speak to elderley and disabled users if they are a main target group and get a feel for the problems they experience on other sites. If this is not possible read up the users - W3C has good overview on the probs they have and the type of Assistive Technologies (ATs) they may use to surf the web. To give you a bit of feel for how your site will be used:
Visually impaired: The elderly with bad vision, or a person with partial sight may use a screen magnifier (AT eg: Big Shot, http://www.aisquared.com/Products/BigShot/BSFreeTr ial/BSFreeTrial.htm) or resize the text to view (so avoid pixels & use ems). If totally blind ( turn your monitor off, to get an idea of how things look) ATs generally used are called Screen readers with Jaws (http://www.hj.com/fs_downloads/jaws.asp) reported to have the highest market share.
Ensure links are meaningful & avoid use of general link names or mutliples of the same name, eg: 'click here' or 'full description of artwork' as screenreader users are able to pull up a list of links appearing on a page to save time navigating. Not much help if all links are the same: "Click here, Click here, Click here'.
Ensure all images have meaningful 'alt' text to describe the images, particularly when using images for navigation. *As this is an art site having an equivalent text description will be very important for images of the art, as you will want to ensure those that can't see an artwork can get a good sense of what is being shown in an image.
In this case use a 'd' link. (See museum site - d link is located at bottom right hand corner of image: www.nzhistory.net.nz/Gallery/centennial/captures/p ionf.htm). This will allow a more detailed description of an art work to be given. You will notice they also have an audio link - this would also be a good design idea as visually impaired users could chose to listen to a description.
If possible present your page using CSS and avoid tables. If using tables refer to W3C for info on how to ensure they are correctly done so people using screenreaders can access content.
Colour (Australian spelling) Blindness is another visual disability that needs to be kept in mind when designing pages. Ensure good contrasting colours, nothing too bright. A good test is to print a page on a black & white printer to see if all elements can be read.
Physical impairment: For elderly people with arthritis (or people with a physical disability) a mouse can be difficult to use so they may use the keyboard to navigate. Disconnect your mouse to see what it is like. Use your 'tab' button to move through pages & 'enter' to select links. Keep this in mind when designing and when finished, use this method to test.
Hearing Impaired : the major problem they will experience is if you have video or other multimedia included as part of your art works. Ensure they have a synchronised alternative such as a caption so they can read what is happening as it occurs.
Finally cognitive impairments. Avoid flashing images, blinking text, etc as this can distract users or be too much for them to deal with.
Testing - There are a lot of automated accessibility test tools out there such as Bobby, WAVE, W3C's HTML & CSS validators which are a good place to start your testing however these should always be supported by human review. When you see a Bobby report you will notice it cannot check everything. For example it will detect alt text but you will need to check yourself it makes sense and matches the image it is attached to.
Also read up a bit on good web design standards (eg: link colours) and usability design principles.
This really is a brief overview to give you an idea. In any case start with the WCAG on the W3C site:
http://www.w3.org/T
The gubment has set up a site for web site design...
www.usability.gov
could be useful
A fool throws a stone into a well and a thousand sages can not remove it.
My grandmother is eighty-six and uses a reguar monitor and keyboard. She doesn't seem to have any problems using a standard monitor and keyboard. If you send her email, you'll get some back and in a pretty short period of time. She spends a lot of time surfing the web for some research she's working on.
And before she goes on her 3-mile walk every morning, she sends my mom email to tell her she was still alive and made it through another night.
Oh, she has had some knee pain problems so she's had one replaced and the other is due soon. The doctor said if all of his patients would walk that far before surgery, the physical therapy would be a lot less painful and much shorter.
Ask them why they want features that you think are aesthetically unpleasing - they're artists, right? Shouldn't that mean they have some aesthetic sense and might be worth listening to?
As far as high-contrast colors that have been recommended - one problem that increases in frequency with age is colorblindness. Not the red/green type deficiencies, but there's a diabetes-related condition that causes a blue deficiency (tritanopia).
For some examples, check out VisCheck. You might also be interested in an experimental proggie I wrote to simulate various color deficiencies and remap the colors - CodeBlind.
I write code.