Slashdot Mirror

← Back to Stories (view on slashdot.org)

Designing Websites for Disabled / Elderly?

Posted by Cliff on from the keeping-things-neat-and-organized dept.

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?"

11 of 58 comments (clear)

  1. Font size by driptray · · Score: 3, Informative

    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.

  2. US Govt Section 508 by pease1 · · Score: 4, Informative
    US Government websites have to conform to Section 508 of the Rehabilitation Act. Sounds sort of silly, but it ensures that US govt sites are accessible to all, including the disabled and elderly. You can learn more here. You will find some nice guidelines to follow, save some time and have some evidence to back you up.

    Some govt webmasters wine about this, but it's really a good thing, given that all should be able to access govt data.

  3. Re:Two words: font size by El+Kevbo · · Score: 2, Informative

    NO. Do not use the font tags.

    There are two lists of recommendations which would be helpful for you and your team:

  4. WCAG by JimDabell · · Score: 4, Informative

    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?

  5. Large text and contrasting colors by Unholy_Kingfish · · Score: 4, Informative
    My father is 59, very bad eyes from diabetes, didn't start using a computer until 2 years ago. Observing him, and dealing with his problems, has shown me that simple is the best. Keep the eye candy on the screen to a minimum. Use fonts like Arial which have clean lines. Make sure the text and background contrast very well. Give them a clean black text on white background, over a blue text on gray background. Use basic colors, no light yellow, light gray, ect ect.

    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
    1. Re:Large text and contrasting colors by POWRSURG · · Score: 3, Informative
      The point is NOT to make a web site accessible to people who don't understand web sites! This is like the icon caption: "AOL 4.0: DOUBLE CLICK TO START". Don't do that. It's okay to say "Click here to view the page I have written about foo." instead of "I have written a page about foo.", but please don't take all that advice literally.

      Yes, please do not take this advice literally, as it is wrong. The poster is correct that you are not to build a web site to people that don't understand web sites, but W3C actually recommends the exact opposite of his example of what is ok.

      Also, making multiple links only seperated by spaces is bad. Not just because slashdot's filter (or whatever it is that adds the link domain) probably just garbled that, but those with poor sight cannot tell the difference when one link ends and the other begins (unless slashdot garbles it for them to point out a link is done and where it goes).

      Also, if you come across sites referencing Bobby, please note that for some reason Bobby has decided that if an image is used anywhere in the page it will not pass their test. Previously, they would mark it off and warn testers that they must ensure that colors aren't used to differentiate context. Because of this, there are many sites out there that will claim Bobby compliance when they are not. That said, Cynthia Says provides a similar tester with a few more options. If you use Mozilla, Chris Pederick's Web Developer Extension contains an option under the Validation menu to validate against WAI Accessibility or Section 508 (as well as validate links, HTML and CSS).

      Finally, it's worth noting that some you should check your pages in Lynx Viewer to see how the page would look in Lynx (or just run Lynx yourself). This is useful for when judging your content based on its textual equivalent (which in some instances is what is read off by screen readers). Also add a "skip to content" link whose CSS sets it to display none for graphical browsers (some people suggest leaving this on, but W3C's validator even uses this method so I go with them). If they are having the screen read to them after a while they will no how the navigation system works, and won't need to have all those links read to them and just want to get to the actual content in your page. If you go the full XHTML route, you'll also have accesskeys and tabindexes available so they can tab through your links corretly and can get back to the beginning of your page if you set a named anchor as the first thing they tab to (the second being the skip to content, thus they can simply hit the 'T' key on to take them to the top and then skip the content to get to the beginning of the content OR they can go through the navigation (of course, you could have given each entry in your navigation an accesskey, but that's not always helpful, and this is useful in case they forget what they key is for something in the navigation).

      Wow, I can't believe I knew this much on the subject....

  6. Some sites by pphrdza · · Score: 2, Informative
    Try seniornet.orgMade for seniors

    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

  7. A few suggestions by FlyingOrca · · Score: 3, Informative

    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:

    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 /. 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. ;-)

    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.
    1. Re:A few suggestions by josh3736 · · Score: 2, Informative
      You might think about a link to Firefox (you're on /. 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. ;-)

      Hate to bust your bubble, but you can do the same in IE.

    2. Re:A few suggestions by Segway+Ninja · · Score: 2, Informative

      Not that I've ever designed this sort of thing before, but a few things come to mind - expanding/repeating the points made in the parent.

      Keep it simple, and big.

      Also, try and use Text and tables (or some other similar arrangement) rather than Images for titles - text is more flexible when it comes to resizing.

      Internet Explorer *winces* (what I would assume these people are likely to be running, as most of the world does)has settings for overriding the default page settings for font size, I would hope that someone has turned this on for these people. Even though Firefox is better, this is likely what they have.

      Use clean fonts such as Arial. Use bold for emphasis. I don't think that Italics would be a good idea, simply because text can easily become garbled.

      Lastly, check the colours that you are using. Contrasting Text is good - Think: Black text on White Background.

      Just an idea: Visit a few normal websites, and crank the text size up to see how they react to get an idea of what works and what doesn't.

  8. Use Bobby by stevenbdjr · · Score: 3, Informative

    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.