Slashdot Mirror
Large Print Graphics for Older Eyes?
random_nickname asks: "My lovely wife is a Graphic Designer with a small company which specializes in custom-made wine labels. She is re-designing the current site, to bring the code up-to-date and a little more shnazzy. Her boss is insisting that, due to their primary market - the elderly - she needs to create overly 'large-print' graphics, to make the site easier to browse for that demographic. My wife feels that this is unnecessary due to resolution control and monitor sizes, etc.. Are there sites out there that currently employ over-sized graphics for the elderly and has it made a difference in business? Is there a real need for this kind of solution?"
Instead of using
p { font-size:11px; }
Use
p { font-size:size; }
Where size takes any of the following values:
xx-small, x-small, small, medium, large, x-large or xx-large
That way visually impaired users can alter their browser's text setting to enlarge the fonts. This does not work with fonts set to pixel heights.
Try it out on this site:
http://www.georgiancourt.com.au/
Mike
Fortunately, I dropped IE which does the absolute worst job of any of the browsers at scaling fixed fonts (most of the time it won't allow any scaling at all). I use Firebird now for various reasons, but I've found Opera is actually the best at scaling.
My main recommendation, if you're concerned about elderly eyes' ability to read your site, is (as has been stated above) to use scalable fonts and relatively large icons/graphics for most things. My secondary recommendation is to provide a link to get Opera, perhaps even with a description of why that would be a good idea - Opera is good for those with poor eyes because not only does it provide all the modern browser bells and whistles (gestures, tabbed browsing, etc.) but their "zoom" function is universal and allows people having a tough time looking at web sites to scale not only the text but the graphics too. It's sad to think that there are probably a lot of people browsing the web who have little to no idea that there are advantages to using a browser besides IE.
If you know someone with poor vision, I suggest you have them use a browser that actually zooms the page content. Try Opera or Mozilla.
And for all you web designers out there, use EMs for setting your font (and everything else) size.
HTML is a wonderful tool for making text that easily accessible by people with poor eyesight. This is because it allows the reader to set a default text size that suits them and/or to increase font size whenever they want.
So don't throw this advantage away. Here's how:
Don't put text in graphics. This makes it impossible or impractical for the user to resize. If you make the text big for your elderly users, then it will be too big for everybody else.
Don't use <FONT SIZE=>. Leave the font size alone, and then the user will get whichever size they have configured as their default.
Don't use pixel or point sizes in CSS. These tend to override user defaults.
Basically, leave the font size alone for all normal text. For headings etc., specify the font size using ems or percentages, as this way they will remain in proportion with all the normal unsized text.
You may wish to avoid fixing the size of layout elements too. One way to do this is to define element widths, heights and positions in ems. An em is a standard typographical measurement defined as the width of an "m" character. In CSS an em is the width of an "m" in an element's font.
I usually use both px and em when laying out a web page. I use px to position elements accurately and I use em to define spacing that relates to text. For example, I would use ems to set paragraph spacing and padding around text. This keeps things looking nice at a variety of different text sizes.
First look at this stuff:/ www.w3.org/WAI/
http://diveintoaccessibility.org/
http:/
People already gave some advice on fonts. Here's some additional advice:
- provide an alternate stylesheet with increased font-sizes (specified in em), high contrast colors and if needed increased graphics sizes.
- specify sizes of other stuff in em as well (e.g. margins and paddings). This will make sure that the content will still look good if the fonts are resized.
- do not 'optimize' your site for a particular resolution.
Jilles
Hehe, Slashdot's not really a shining example of web accessibility, but it's a good place to ask for help none-the-less.
The first stops for help (as someone's no doubt pointed out already) should be:
Section 508
Mark Pilgrim's excellent "Dive Into Accessibility"
The W3C's web accessibility guide
The UK Disabled Rights Commission website, paying particular attention to the superb Interactive Demos (e.g. Inaccessible Website Demo).
Buy these books:
Constructing Accessible Websites
Building Accessible Websites
Oh, and a copy of Zeldman's Designing With Web Standards for good measure.
Write your pages using validating HTML or XHTML, and style the pages using CSS.
Validate your webpages using the W3C Validator and your CSS using the W3C CSS Validator. Use Watchfire's Bobby to validate your pages, and aim for AAA rating (also note that Bobby has some helpful hints when it does find errors).
Other excellent resources (in no particular order):
http://www.webstandards.org/
http://www.w3.org/WAI/References/QuickTips/
http://www.mezzoblue.com/
http://www.meyerweb.com/
http://www.simplebits.com/
http://www.whatdoiknow.org/
http://www.stopdesign.com/
You forget that 80% of computer users (and 99% of elderly computer users) don't even know how to change the text size in their browser. Hell, a lot of them don't even know how to set their homepage.
So make it really easy for them and include a link on the page to change the font size larger or smaller. It's easy to do and it makes the choice very easy for them.
I'm a firm believer in taking a little extra time to make the viewer's job a little easier. It works in programming and it works in webpage coding as well.
Don't forget Opera's user-specified style sheets. Can easily get a white-on-black screen with only text at 20 px height, which is actually very comfortable to read. I use this feature on poorly designed web pages.
Lalala