WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: good example of contrast widget?

for

Number of posts in this thread: 9 (In chronological order)

From: Becky Burd
Date: Thu, Apr 05 2007 2:00PM
Subject: good example of contrast widget?
No previous message | Next message →

Does anyone have a good web site example of a contrast widget? i.e. a
small area near the top of the web page where you can quickly change
text size, contrast, etc.



Thanks!



Becky Burd

Senior Information Architect

MULLEN | 36 Essex Street | Wenham, MA 01984





From: Jared Smith
Date: Thu, Apr 05 2007 2:10PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

On 4/5/07, Becky Burd wrote:
> Does anyone have a good web site example of a contrast widget? i.e. a
> small area near the top of the web page where you can quickly change
> text size, contrast, etc.

I've yet to see one that is very good. Most that I've seen use the
stacked A's, something that many people will not be familiar with. To
make things worse, the widget icons themselves are typical graphics,
which means they will not scale up very well, thus making them more
difficult to use for those that might actually need them. And that's
not to mention the cognitive load the widgets introduce and the extra
navigation required by keyboard and screen reader users that would
have no use for them.

As you might guess, I tend to advise against using these widgets. They
tend to benefit a VERY small portion of the population - those with
minor visual disabilities that are significant enough to require more
contrast or larger text, but that are not so significant as to require
assistive technology that will be doing all of this anyways. To me,
the problems far outweigh the benefits. Besides, wouldn't you agree
that if a site requires larger text or better contrast, the design is
likely broken to begin with? Users that *require* these features will
be using software to provide them - the key is to design your site so
that you don't break their ability to customize your site.

Jared Smith
WebAIM.org

From: tedd
Date: Thu, Apr 05 2007 3:20PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

At 3:58 PM -0400 4/5/07, Becky Burd wrote:
>Does anyone have a good web site example of a contrast widget? i.e. a
>small area near the top of the web page where you can quickly change
>text size, contrast, etc.

Becky:

If I were to do something like that, I would simply use a php style
switcher that would change out different css sheets. It's simple
enough to do, here's my write up:

http://sperling.com/examples/styleswitch/index.php?set=style1

Cheers,

tedd
--
-------
http://sperling.com http://ancientstones.com http://earthstones.com

From: Austin, Darrel
Date: Thu, Apr 05 2007 3:30PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

> As you might guess, I tend to advise against using these
> widgets. They tend to benefit a VERY small portion of the
> population - those with minor visual disabilities that are
> significant enough to require more contrast or larger text,
> but that are not so significant as to require assistive
> technology that will be doing all of this anyways.

That seems like a fairly large audience...namely anyone semi-computer
literate and over the age of 40 who wears glasses.

I don't see much drawback to the widgets, either. These days, they're
fairly common on a lot of news sites and, as such, the older argument of
'confusing extra set of icons on the site' doesn't seem to hold as much
weight anymore. With our own site, we've had more than a few folks ask
if they could increase the size of type on our site. It's easier for us
to say 'use the font size widget' than to walk over to their desk and
explain how to change all of their default window's font sizes (which,
ironically, will break a lot of our crappy vendor-written web apps that
were all designed without any concept of browser agnosticism or font
size variations).

Of course, this mainly refers only to font size widgets. I think
contrast widgets tend to fall more into the 'either you need high
contrast and already know how to take advantage of that in your browser
and/or operating system level or you don't' camp. There really isn't
that middle-ground that you'd get with people just preferring a larger
type and not knowing how to resize things in their browser (since the
damn browser developers STILL hide this rather important feature from
most newbies).

Now, that's just my opinion based on anecdotal evidence, of course...

-Darrel

From: Jared Smith
Date: Thu, Apr 05 2007 3:40PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

On 4/5/07, Austin, Darrel < = EMAIL ADDRESS REMOVED = > wrote:

> That seems like a fairly large audience...namely anyone semi-computer
> literate and over the age of 40 who wears glasses.
>
> I don't see much drawback to the widgets, either. These days, they're
> fairly common on a lot of news sites and, as such, the older argument of
> 'confusing extra set of icons on the site' doesn't seem to hold as much
> weight anymore. With our own site, we've had more than a few folks ask
> if they could increase the size of type on our site.

Yes, this is a difficult topic. Balancing the benefits to some users
and drawbacks for some other users is always tricky. Certainly you
must consider your audience - and as you point out, this will be much
more of an issue as the population ages.

> It's easier for us
> to say 'use the font size widget' than to walk over to their desk and
> explain how to change all of their default window's font sizes (which,
> ironically, will break a lot of our crappy vendor-written web apps that
> were all designed without any concept of browser agnosticism or font
> size variations).

And this was exactly my point. Opera and IE 7 can scale the entire
page, but their implementations of page scaling are far from perfect.
Much of the problem stems from the two points you make, 1) that it is
neither easy nor intuitive to resize fonts in browsers, and 2) that it
breaks a lot of web sites.

Perhaps a happy alternative is to provide the accessibility 'features'
such as zoom contrast and font size on a separate options page, rather
than displaying them on every page, thus burdening those who do not or
cannot use them.

Here's another site (in addition to Tedd's) that has a PHP-based
approach for font sizing -
http://mikecherim.com/gbcms_xml/news_page.php?id=8

The advantage of doing this server-side is that the 'widget' doesn't
require javascript. Also, you can use cookies or other mechanisms to
store the settings for each user, thus allowing the settings to be
persistent across the entire site and even across visitor sessions.

> Now, that's just my opinion based on anecdotal evidence, of course...

It appears we're using the same source for evidence. :-)

Jared

From: Jared Smith
Date: Thu, Apr 05 2007 3:50PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

On 4/5/07, Patrick H. Lauke wrote:

> Why? We're worried about computer illiterate users, but trust them to
> understand cryptic icons that compete with the rest of a page's layout
> and design?

This all reminds me of a graphic I created a while back -
http://webaim.org/temp/jared/accessibilityoptions.gif

To provide a text alternative - it shows a basic web page with a logo,
a few navigation items, and a *HUGE* section for "Accessibility
Options". Within it are options for skipping to four different places
on the page, eight options for font size, three options for contrast
settings, four colorful style sheet options (including ZOOM), an
option to define Accesskeys, a link to a text-only version, and an
accessibility statement. At the bottom of the page are badges that
proudly declare the site to be HTML, CSS, WAI, Section 508, and Bobby
compliant. Hidden amongst all of this clutter is some very tiny text
which reads, "Hey, I'm the content!"

It's all tongue in cheek, the point being that when you burden your
users with implementing accessibility (or overbearingly saying that
you have done so), then it's ultimately your content that suffers.

Jared

From: tedd
Date: Thu, Apr 05 2007 4:10PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

At 3:45 PM -0600 4/5/07, Jared Smith wrote:
>On 4/5/07, Patrick H. Lauke wrote:
>
>> Why? We're worried about computer illiterate users, but trust them to
>> understand cryptic icons that compete with the rest of a page's layout
>> and design?
>
>This all reminds me of a graphic I created a while back -
>http://webaim.org/temp/jared/accessibilityoptions.gif

You've hit upon another point and that is not all disabled persons
can recognize, or see, your icons. It's a complicated world trying to
accommodate everyone.

As far as web size is concerned, I leave it to the user to determine
what size they want via their own browser settings. One can certainly
develop a site that scales with user zoom levels, like I've shown
here: http://sperling.com/examples/zoom/ or even in an entire web
site such as I've done here: http://earthstones.com/,

As far a contrast and inverted, you certainly can change those via a
php style switcher and use a different css -- that's a pretty simple
solution.

As for your UofM icon, I would agree that it is a disability, but
those graduating from there might not agree. :-) Go Green!

Cheers,

tedd

--
-------
http://sperling.com http://ancientstones.com http://earthstones.com

From: Patrick H. Lauke
Date: Thu, Apr 05 2007 4:20PM
Subject: Re: good example of contrast widget?
← Previous message | Next message →

Austin, Darrel wrote:
> These days, they're
> fairly common on a lot of news sites

And every site implements them in a different way, if at all. And
settings don't carry from one site to the other.

> and, as such, the older argument of
> 'confusing extra set of icons on the site' doesn't seem to hold as much
> weight anymore.

Why? We're worried about computer illiterate users, but trust them to
understand cryptic icons that compete with the rest of a page's layout
and design?

> With our own site, we've had more than a few folks ask
> if they could increase the size of type on our site. It's easier for us
> to say 'use the font size widget' than to walk over to their desk and
> explain how to change all of their default window's font sizes

...all of their OS's font sizes, or just "View > Text size" in their
browser, which is something that can be explained in a single paragraph
in a help section, which you could then link to quite prominently (by
calling it something like "display settings" and having it near the top
of the page)?

> (which,
> ironically, will break a lot of our crappy vendor-written web apps that
> were all designed without any concept of browser agnosticism or font
> size variations).

So do those apps break when browser settings are changed, but not when a
text size widget is used?

> (since the
> damn browser developers STILL hide this rather important feature from
> most newbies).

Yup, been ranting about that one for years myself. Most annoying, and
certainly not in the spirit of UAAG, if you ask me.

P
--
Patrick H. Lauke

From: Shawn Henry
Date: Mon, Apr 09 2007 10:30AM
Subject: Re: good example of contrast widget?
← Previous message | No next message

> [in reply to various replies about text size switchers versus instructions, and browser support]

We debated which method to use when we redesigned the W3C WAI Web site <http://www.w3.org/WAI/>; a couple of years ago. We chose to provide instructions on how to change settings in browsers, rather than provide a "switcher" widget.

There is an expression that goes something like this: "Give a person a fish and you feed him for a day, teach a person to fish and you feed him for a life time."

At the top of all WAI Web pages is a link to "Change text size or colors"; it is in a gray bar that is visually separate from the site design. It links to a page <http://www.w3.org/WAI/changedesign>; that explains how to change settings in different browsers, and also answers: *"Why doesn't this work with some other Web sites?"*

Some points about this method:
* It teaches people how to change their settings, which will help them with other Web pages that are well designed. (A switcher only helps with the one Web site.)
* It explains why changing the settings doesn't always work, which will hopefully lead some people to encourage improvements in sites and browsers that aren't well designed.

If you have comments and suggestions for improvements to this page, we'd love to hear them; the footer has an e-mail address: "Feedback welcome to = EMAIL ADDRESS REMOVED = (a publicly archived list)."

Note that you are welcome to copy or link to <http://www.w3.org/WAI/changedesign>;.

~Shawn

Shawn Lawton Henry
W3C Web Accessibility Initiative (WAI)
e-mail: = EMAIL ADDRESS REMOVED =
phone: +1.617.395.7664
about: http://www.w3.org/People/Shawn/