Tutorials sought for Visually Disabled website RRS feed

  • Question

  • Hi All,

    Can anyone recommend web links to tutorials in builiding websites geared towards the visually-impaired?  Specifcally looking for ways to give viewers the option to change font-size and/or colour and/or content background colour.  I guess this is down to choosing a CSS styling option but anything that would point me in the right direction would be greatly appreciated.


    Many thanks.

    Sunday, January 16, 2011 1:39 AM


All replies

  • Google "web accessiblity," "WCAG," "user style sheet,""contrast checker," and related terms. What you are asking is basic Web knowledge, and again, you can use Google as well as we can. This is something you should take into account in every Web site, not just sites "geared towards the visually-impaired." All sites should be designed and coded to be accessible.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Sunday, January 16, 2011 2:32 AM
  • Check out Jim Thatcher's site at http://jimthatcher.com/

    Great resouces, including

    • Marked as answer by eyetranced Sunday, January 16, 2011 8:45 AM
    Sunday, January 16, 2011 4:33 AM
  • Most folks in the accessibility community no longer advocate stylesheet switchers but instead prefer to make sure that their sites responds to the browser makers built-in tools for increasing font size by using ems or percents. Never use pixels or points because IE doesn't allow for text size to scale when you use them though it does follow whatever the visitor has changed their Windows/Mac font ppi to be from the default (say large fonts instead of 120ppi instead of the default 96ppi, aka approx 30% larger) but Firefox doesn't (not sure what Safari does) so if you stick to units that scale in all browser is safest.

    As for color contrast browser also have the option for accessible color schemes, especially IE and browsers allow the visitor to switch stylesheets from their menus if you use for example in IE 8 > View > Style you'll get a list of available stylesheets so if you provided alternatives that were higher contrast or whatever. This is quite an old article but the only real change between when it was written and now is that browsers actually support alternative stylesheets which most did not when the article was written so you had to provide an alternative means of switching stylesheets, something you no longer need to do though you may want to put up an accessibity page with instructions on how to do so for each of the major browsers. http://www.alistapart.com/articles/alternate/ 

    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Sunday, January 16, 2011 6:00 PM
  • I am not sure how deep into this you want to go but besides manipulation of text size and related visual issues and browser considerations there is also the matter of screen readers used by those with more serious vision problems.

    See this article from Smashing magazine for some general ideas on accesabillity.


    Screen readers are an interesting topic worthy of some googling for those needing to design web sites with this in mind.

    Sunday, January 16, 2011 9:56 PM
  • As a visually impaired computer user and web designer / developer I would say that the greatest tool to advocate for accessibility across the board for the visually impaired (not totally blind) would be CONSISTENCY among designs so that users could adjust their adaptive tools and software to best meet their individual needs.  To try to make each site in a sense its own adaptive software app would most likely detract from the usability of normally sighted users which represents the lion's share of viewer/ users.  The one issue that I would address is the use of "em" for font sizing that makes the font consistently scalable in an instance where the user wants to zoom the text only with out effecting other elements of the page.  as for background colors etc.  I use AI2 Zoom Text which incorporates high contrast user interface to its application.  And Windows in it's accessibility desktop package provides for high contrast combination's.  So why re-invent the wheel.  That would be my perspective I hope it enlightens yours.

    All the best,

    MIKE E


    "It's like déjà vu all over again." — Yogi Berra
    Monday, January 17, 2011 5:39 AM
  • Thanks, Mike. It's good to get guidance "straight from the horse's mouth," as the clichéd expression goes. As you know, we generally do recommend em sizing for the very reason that you state. But, the issue of consistency is one that many developers might not take into account.

    It makes sense, when one hears it put the way you did, that taking unusual measures to accommodate vision-impaired users might actually work to the detriment of that objective, since they will have their own monitor and system settings, and adaptive reading software, that would have to be "reset" for such pages. Better to simply be consistent in designing and styling for text expansion in all cases (no heights on containers, using em sizing, etc.), and let the vision-impaired user's software do what it is designed to do.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Monday, January 17, 2011 5:50 AM
  • Mike,

    Thanks for reinforcing what I said which was to make it easy for the folks to use their operating system & browser's built-in accessibility features. While I'm techinically not visually impaired since my last surgery I still don't (and never can have even with glasses) perfect vision and find myself using browser tools to increase font sizes or turn off CSS completely due to contrast issues on some site.

    MS MVP Expression Tutorials & Help http://by-expression.com & Expression Web forums
    Monday, January 17, 2011 3:57 PM