高对比度，低视力样式表的例子？

Question

Could you recommend some links to live sites which provide an alternate stylesheet for visually impaired users, eg short-sighted, daltonism, protanopia etc.

Any good practices presented in real life?

Answer 1

Although I can't give you one off hand for visually impaired here is some useful items:

• Here is a sample site with alternate style sheets .
• Here is great tutorial on getting started with alternating style sheets
• When developing your site use 'em' when specifying widths and heights. This is more so when visually impaired users use the zoom feature of their browser. It will help keep the site looking as it should instead of using 'px' measurements which don't flow/resize as well.
• Use the 'alt' attribute for images as screen readers will read them to users so they can understand what the image is.
• Name your links accordingly. 'Click here' hyperlinked text does not tell someone what the link goes to. 'More information on visually impaired design processes' as hyperlinked text however does.
• Contrasting text. Dark text on a light or white background is best for legibility.

As an alternative you can also use javascript as well. Here is a joomla site with a plugin for adjusting font sizes .

Answer 2

For good practices you should read:

• http://mashable.com/2009/08/10/twitter-usability/
• some examples here http://www.webdesignfromscratch.com/web-design/contrast/
• http://www.useit.com/ Jakon Nielsen website expert on Usibility for visually impaired

So you need to cover not just how the site looks, but also how screen readers will read your content

Answer 3

Here's an online tool that can help you test how any color combination is friendly towards visually impaired:

http://gmazzocato.altervista.org/colorwheel/wheel.php

It covers a few "topias" and is also aligned with WCAG recommendations.

Also a nice list of other similar tools:

http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/