May 13, 2010 updates break high contrast Windows mode

Question

With the new updates applied within the past 24 hours or so I can no longer see the vote up/down buttons.

For accessibility reasons I found it necessary to replace all website specified colors with browser colors, and this also removes all background images, and in fact all images placed by any means other than IMG tags.

OK, I better explain a little more here. I have an eye problem that results in abnormal eye senstivity ranges. After as little of an hour of using white background screens I get something I call eyeburn (yes, it hurts) and would have to walk away from the computer for an hour or more for it to go away. Using black color themes gets rid of this problem.

Due to the very large number of sites designed in particular ways I found it necessary to set my browser to the accessibility mode that is ignoring web site colors. For obvious reasons this also disables background images as these often go with particular assumptions about the color of the text above them. This completely breaks most methods of CSS sprite sheets.

This link, http://artzstudio.com/2010/04/img-sprites-high-contrast/, describes a way of making sprite sheets that works with IMG tags that works in this environment.

What's it going to take to get a clear and obvious accessibility bug fixed? Any Windows user who enables high contrast accessibility is going to hit this.

It's now been almost been 1 whole year! Fix it already!

Answer 1

I think the

<span class="vote-up=off">

Should have some text in it, like:

<span class="vote-up=off">Up</span>

And then use CSS to height using padding instead of height:

.vote_up_off {
    padding-top: 25px;
    height: 0px;
    overflow: hidden;
    background-image: url(http://sstatic.net/mso/img/sprites.png?v=4a60fe5f4b62);
}

This way it can easily be overridden by an individual user or a "Click here for non graphics version" link to show the text:

body.noGraphics .vote_up_off {
    padding-top: 0px;
    height: 25px;
    background-image: none;
}

Take a look at the top navigation bar of my company's site as an example.

Answer 2

ok, the markup was changed so it went from

<span class="vote-up-off" title="..."></span> 
<span class="vote-count-post">12</span> 
<span class="vote-down-off" title="..."></span> 

to...

<span class="vote-up-off" title="...">up vote</span> 
<span class="vote-count-post">12</span> 
<span class="vote-down-off" title="...">down vote</span> 

Answer 3

I sometimes experience this eye-burn, too, but luckily not always. To avoid it, I sometimes just have the screen invert colors. Under gnome use magnifier -fiz 1, under windows vista and 7 you can use the accessibilty feature. For lower win-version you may need additional tools or a suiting option for your graphics driver (I think nVidia has that option). The best option would of course be to invert the V in HSV space and therefore leaving colors intact, but I haven't found a suiting tool yet.

edit see answers to How to invert all the display colors in Windows Vista? and Colour profile to dim the screen .

Answer 4

Based on the changes that Jeff put in place, you can force the text to be displayed with a user style like the following:

@document regexp('^http://(((meta\\.)?(stackoverflow|[^.]+\\.stackexchange|serverfault|askubuntu|superuser))|stackapps)\\.com.*$') {
  .votecell .vote > a,
  .votecell .vote .vote-accepted-on,
  .votecell .vote .vote-accepted-off,
  .comment-actions > a {
     text-indent: 0em!important;
     font-size: 1em!important;
     width: auto!important;
  }
}

There are other sections of the site that would likely need similar treatment, but this handles the voting aspect at least. This does require additional setup on your part and is by no means a solution to this issue, but under the circumstances it might be preferential to not being able to use the site effectively.

Ideally the site's stylesheet could directly account for users visiting with high-contrast colour schemes, but it seems that Microsoft is the only browser vendor currently who defines a media selector for these purposes (and it's been introduced for Metro, so I'm not sure it's even available in current versions of IE).