E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Styling for high-contrast mode

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

From: Dean Hamack
Date: Thu, Oct 16 2008 1:45PM
Subject: Styling for high-contrast mode
No previous message | Next message →

James brought up a good point, and one I've never seen raised before. In
doing a quick Google search, I came across a few posts that pointed out
sites such as Facebook fall apart in that mode.

So the question now is, "is there a way to specify styles just for
high-contrast mode?"

From: Keith Parks
Date: Fri, Oct 17 2008 9:20AM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

On Oct 16, 2008, at 5:55 PM, Dean Hamack wrote:

> So the question now is, "is there a way to specify styles just for
> high-contrast mode?"

Since high-contrast mode seems to assume that "foreground" (inline)
images are part of the essential content, but background images are
not, I think one thing that should be addressed relates to something
you mentioned in an earlier post...

> If I would have used hardcoded images for the headers and asterisks
> (as
> others suggested), I would have violated best practices (don't use
> hardcoded
> images for aesthetic items), [snip...]

When I've heard this it was usually phrased a bit differently, more
like "don't use inline images that are purely decorative". So my
question is, are the text-as-images in your example purely aesthetic?
The fact that the designer wants that text to be in a particular font
and color is an *aesthetic* decision, but the image itself is not just
decorative, but is part of the content.

So I feel that using an inline image in this instance would be an
entirely proper way to set up the page.

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: Keith Parks
Date: Fri, Oct 17 2008 10:20AM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

On Oct 16, 2008, at 5:55 PM, Dean Hamack wrote:

> James brought up a good point, and one I've never seen raised
> before. In
> doing a quick Google search, I came across a few posts that pointed
> out
> sites such as Facebook fall apart in that mode.
>
> So the question now is, "is there a way to specify styles just for
> high-contrast mode?"

In your Googling, did you come across this one...

<http://www.udm4.com/forum/showthread.php?t=629>;

It's about how Ultimate Dynamic Menus sub-level pop-up menus cease to
function in high-contrast mode, which was a deliberate choice on the
part of the developers. But what I take from it is that high-contrast
mode must be detectable through javascript somehow, and so in theory
one could do a style sheet switch based on that condition. Though I
don't know enough about Windows *or* javascript to have any idea how
to make it happen.

******************************.

Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

A riddle wrapped in a mystery inside an enigma, served with a side of
slaw.

From: Wayne Dick
Date: Fri, Oct 17 2008 12:35PM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

The styling for high contrast brings a more general point. One
cannot assume that a person with a visual impairment listens to
print material or uses a product like Zoom Text, that can enlarge
pictures as well as text.

In a hurry a person with low vision will frequently use ctl+ in
Firefox or a similar text enlargement mode. Imbedded inline
graphics as text stay small and unreadable. One can develop
javascript and stylesheets that work around this problem. A
similar problem arises with any contrast adjustment -higher or
lower. Some people need lower contrast than the author provides.

One can style around this by inserting the accomodation style:

img:before { content: attr(alt) } but the user needs access to
acomodating style sheets -- not a very common item.

So, if you use inline graphic text you will make life difficult
for visually impaired users. If you don't use an alt attribute
with the exact text you will make life impossible. Only the
screen reader user will automatically hear the alt-text and evan
so the sentence will be interrupted with the term "graphic"
before the alt-text.

I cannot think of any scenario where people with visual
impairments would not be at least annoyed by inline graphic text.
I think that is why people say avoiding inline graphic text is
best practice.

Sincerely

Wayne Dick

From: Wayne Dick
Date: Fri, Oct 17 2008 12:40PM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

From: Dean Hamack
Date: Fri, Oct 17 2008 3:05PM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

First of all, thanks for bringing this issue up. The reason I asked if
anyone had statistics is because I'd never even heard of high-contrast mode
(hereafter referred to simply as "HCM") before yesterday.

I did a couple hours of research last night. Here are my observations and
thoughts:

1. Apparently, enough people are using it to make it an issue. And since
millions of websites use background images for headers, it's a big one.

2. I can tell you from experience that major companies are not going to stop
using background images for headers and other essential elements for the
reasons I mentioned before. I just finished a contract for a large social
networking site where I had to go in and strip out dozens of hardcoded
images because they wanted to change the look and feel of the site. Had the
images been in the stylesheets instead of the html, it would have taken
hours instead of months. That translates to a savings of tens of thousands
of dollars.

3. HCM is not part of 508 specs. 508 specs say simply that pages must
function properly with styles turned off. My example complies with that
rule, as does every site I build.

4. A much better way to achieve the results Microsoft was aiming for would
have been to make it so that when HCM was activated, it turned off the
default stylesheet, made the text white and the background black, and scaled
the fonts up. It would take me two minutes to write a stylesheet like that,
so I'm not sure why MS can't figure it out.

5. There is no way to detect HCM through media types. I haven't found a way
to do it through Javascript either. It appears the only way to accommodate
HCM users is by offering them a manual stylesheet switcher. If I find
another way (which I'm committed to doing), I will post it here.

This is another well-intentioned, yet poorly executed plan by Microsoft and
it irritates the hell out of me. It's bad enough developers have to spend
50% of their time trying to hack sites to make them work properly on IE6.
Now we have to deal with this as well.

I think the best solution is user education. Many sites like Yahoo have
stopped pandering to Microsoft because it's simply too costly. That's why
when you go to Yahoo's site on IE you see a big warning at the top telling
you it looks like crap on IE and you should use Firefox instead. In the
short term, I will probably start putting an accessibility link on my sites
explaining this. I'll also be talking to some friends that work for MS (I'm
in Seattle) and seeing if we can't get this information to someone there who
cares. Not that they'll do anything about it, but it's worth a shot.

Gotta love Microsoft.

From: Keith Parks
Date: Fri, Oct 17 2008 3:35PM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

On Oct 17, 2008, at 11:17 AM, Dean Hamack wrote:

> 4. A much better way to achieve the results Microsoft was aiming for
> would
> have been to make it so that when HCM was activated, it turned off the
> default stylesheet, made the text white and the background black,
> and scaled
> the fonts up. It would take me two minutes to write a stylesheet
> like that,
> so I'm not sure why MS can't figure it out.

Except that HCM affects the entire user interface on the system level,
and all applications, not just browsers. So while MS *could* have
tapped into the power of CSS to create this rendering effect for Web
content, they would have had to then *exempt* browser applications
from the the HC rendering scheme. Or exempt the html window of the
app, but still have HCM control the app's interface elements.

(Can't believe I'm *defending* a choice the MS made... what have I
become?? ;^)

But yeah, it's a PITA. /^(

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: James Nurthen
Date: Fri, Oct 17 2008 3:35PM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

I'll tackle these one by one....

>
> 1. Apparently, enough people are using it to make it an issue. And since
> millions of websites use background images for headers, it's a big one.
>
> 2. I can tell you from experience that major companies are not going to
> stop
> using background images for headers and other essential elements for the
> reasons I mentioned before. I just finished a contract for a large social
> networking site where I had to go in and strip out dozens of hardcoded
> images because they wanted to change the look and feel of the site. Had the
> images been in the stylesheets instead of the html, it would have taken
> hours instead of months. That translates to a savings of tens of thousands
> of dollars.

I'm not sure you can generalize that much. Some major companies may not stop
- but many have either never used them or have re-engineered products to
stop using them (and I speak from experience here).

Background images are certainly not the only way to solve the redesign or
reskinning problem.

>
> 3. HCM is not part of 508 specs. 508 specs say simply that pages must
> function properly with styles turned off. My example complies with that
> rule, as does every site I build.

Looking to the future using background images for content is a specified
failure for WCAG 2.0 1.1.1

http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20080430/F3.html

>
>
> 4. A much better way to achieve the results Microsoft was aiming for would
> have been to make it so that when HCM was activated, it turned off the
> default stylesheet, made the text white and the background black, and
> scaled
> the fonts up. It would take me two minutes to write a stylesheet like that,
> so I'm not sure why MS can't figure it out.

Maybe so - but it is not a problem if you go by the definition of a
background image.

It is only due to the misuse of background images to display content that
this becomes problematic

>
>
> 5. There is no way to detect HCM through media types. I haven't found a way
> to do it through Javascript either. It appears the only way to accommodate
> HCM users is by offering them a manual stylesheet switcher. If I find
> another way (which I'm committed to doing), I will post it here.

Take a look at the method dojo came up with
http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/a11y/dojo-accessibility-strategy

I believe they no longer use background images for content - instead using
real inline images - but I think this technique works.

<snip rant>

>
>
>
>
>
>
>
>
>

From: Wayne Dick
Date: Fri, Oct 17 2008 5:50PM
Subject: Re: Styling for high-contrast mode
← Previous message | Next message →

Dear Dean and other commenters,

Being partially sighted since birth and having completed a PhD.
program in mathematics with this problem, I have looked at many
assistive technologies and accomodations. In fact, there isn't
much technology for reading that I haven't tried since 1970. I
also teach and coordinate the web technology curriculum in the
Computer Engineering and Computer Science Department at Cal.
State Long Beach. So, when I address issues of visual barriers
to perception of web pages, I know tehnically and personally
what is involved.

1. Writing user style sheets to accomodate web sites is very
difficult. Author style sheets are given higher priority, and
tag styling is given the higest priority. To make a site readible
by most people with partial sight one must kill the author's
style completely and start over. This can be done with heavy
handed and extensive use of (!important), or with Javascript.
Javascript can insert style in many ways that overides all the
author's style including tag style.

2. 508 1194.22 (d) is really more complex than if your remove
style sheets than the author can still read it. It also means if
your remove stylesheets, I can read it. Now, if it is not at
least 16 point, I can't read it. 16 point is a tough read for
me, but possible. Anything lower requires magnification. So,
graphical text is not readable without a style sheet in many
cases for me.

3. 508 1194.22 (a) requires alt-text, so, if alt-text that
contains the exact wording of the graphical text is present, I
can read it with only a little difficulty. Of couse, I am a
professor of computer science and I write my own style sheets for
accomodation. I'm not sure how an english teacher with low
vision or a great-granny with normal low intermediate skills
would do.

4. High Contrast is just one kind of UI control that Windows
makes available. One can control color, font family and size.
High contrast is not the only color pattern that helps people
with low vision. Windows gives users the most control of any
operating system, and this applies to all software that uses the
Windows accessability API. Windows has done much better on this
account than any operating system since at least 95/NT era. A
actually think I've had pretty good color, size and font-family
control since Windows 3.5.

5. Pages and software that interfere with the accomodations
provided by the native operating system violate Section 1194.21
(a) which bars such interferance system supplied accomodations.
Graphical Text falls squarely in this category. (A company might
want to fight it, but they will probably end up line Target.

So, High Contrast is just the tip of a very large iceberg. Style
and markup practices that permit flexible reformating to meet the
needs of indivuduals with partial sight and blindness is the real
goal.

Sincerely,

Wayne Dick

From: Cliff Tyllick
Date: Sat, Oct 18 2008 10:00PM
Subject: Re: Styling for high-contrast mode
← Previous message | No next message

Wayne, as someone who can see perfectly (when I have my glasses on) but often faces the same issues when I try to use the Internet on a small screen, I deeply appreciate your taking the time to eloquently state the case for making the Web accessible to all.

Cliff Tyllick
Web development coordinator
Agency Communications Division
Texas Commission on Environmental Quality
512/239-4516
= EMAIL ADDRESS REMOVED =
>>> "Wayne Dick" < = EMAIL ADDRESS REMOVED = > 10/17/08 6:48 PM >>>

Dear Dean and other commenters,

Being partially sighted since birth and having completed a PhD.
program in mathematics with this problem, I have looked at many
assistive technologies and accomodations. In fact, there isn't
much technology for reading that I haven't tried since 1970. I
also teach and coordinate the web technology curriculum in the
Computer Engineering and Computer Science Department at Cal.
State Long Beach. So, when I address issues of visual barriers
to perception of web pages, I know tehnically and personally
what is involved.

1. Writing user style sheets to accomodate web sites is very
difficult. Author style sheets are given higher priority, and
tag styling is given the higest priority. To make a site readible
by most people with partial sight one must kill the author's
style completely and start over. This can be done with heavy
handed and extensive use of (!important), or with Javascript.
Javascript can insert style in many ways that overides all the
author's style including tag style.

2. 508 1194.22 (d) is really more complex than if your remove
style sheets than the author can still read it. It also means if
your remove stylesheets, I can read it. Now, if it is not at
least 16 point, I can't read it. 16 point is a tough read for
me, but possible. Anything lower requires magnification. So,
graphical text is not readable without a style sheet in many
cases for me.

3. 508 1194.22 (a) requires alt-text, so, if alt-text that
contains the exact wording of the graphical text is present, I
can read it with only a little difficulty. Of couse, I am a
professor of computer science and I write my own style sheets for
accomodation. I'm not sure how an english teacher with low
vision or a great-granny with normal low intermediate skills
would do.

4. High Contrast is just one kind of UI control that Windows
makes available. One can control color, font family and size.
High contrast is not the only color pattern that helps people
with low vision. Windows gives users the most control of any
operating system, and this applies to all software that uses the
Windows accessability API. Windows has done much better on this
account than any operating system since at least 95/NT era. A
actually think I've had pretty good color, size and font-family
control since Windows 3.5.

5. Pages and software that interfere with the accomodations
provided by the native operating system violate Section 1194.21
(a) which bars such interferance system supplied accomodations.
Graphical Text falls squarely in this category. (A company might
want to fight it, but they will probably end up line Target.

So, High Contrast is just the tip of a very large iceberg. Style
and markup practices that permit flexible reformating to meet the
needs of indivuduals with partial sight and blindness is the real
goal.

Sincerely,

Wayne Dick