Re: reCAPTCHA implementation problems

The downside of using the css image sprite technique is that CSS 
background images are intended for decoration not information. This 
means that in scenarios where images are problematic the css backgrounds 
can be discarded. One instance is high contrast mode on Windows XP (and 
others). Choose Control Panels -> Accessibility Options -> Display -> 
Use High Contrast and watch all the CSS background images go away. I 
think left-alt+left-shift+printscreen also toggles this display mode. 
Using CSS background images was a snag in some widget implementations 
which used them for arrows in tree view widgets, radio buttons and other 
artwork. Note that High Contrast mode is different than a high-contrast 
theme which makes more superficial changes.

CB
bmaurer@andrew.cmu.edu wrote:
>
> Hey,
>
> On Sat, 14 Jul 2007, Al Gilman wrote:
>> for a) it would make sense to benchmark what Hotmail and AOL are 
>> using, because
>> those are production (high volume) sites.  Google is more new on the 
>> block etc.
>
> Agreed, I simply need to know what works best here. In my testing I've 
> found:
>
> - Having a "download as mp3" link is important. In Firefox on Ubuntu, 
> I wasn't able to get embedding working at all. I think we can all 
> agree that, even if it is hard to use, *everybody* can play an mp3 
> file that they can download
>
> - Downloading an mp3 is also very hard on the user (even a 
> non-visually impaired one). We need a better solution.
>
> - Ideally, I'd like a way the user can choose to replay the challenge.
>
>> for b) in addition to benchmarking the above and similar production
>> sites, we have the option (given that there are WAI-ARIA embedding
>> techniques that work in IE) of taking a fresh look. In particular on
>> yesterdays style guide call Lisa Pappas was talking about an example
>> where an accessible table presentation replaces (at a layout-region
>> level) the diagram presentation of some data relation. Perhaps the
>> interaction design should be that the audio and visual challenges are
>> visual options, not visually concurrent in the page. Since we need a
>> user event to launch the sound, why not repaint the visual scene at
>> this point and remove the elements one doesn't need from the form?
>> That is just one idea. The main idea is that this is an interaction
>> design. There needs to be advice up front that there are options, the
>> user has to have the chance to replay the audio prompt, everything
>> has to be doable from the keyboard, the most common case has to be
>> set up to be quick in the default presentation, etc.
>
> I put in some work on this part this weekend in the form of making the 
> <a> elements for refesh and go to audio <button>s (I figured help 
> should still be an <a>. Functionally, it's a link, not an action).
>
> I have this working, however I can't get the UI right. I tried getting 
> this to work:
>
> <button><img src="" alt=""/></button>
>
> However, no matter what I did with CSS, Firefox insisted on adding 
> padding to the button (which doesn't work for our artwork).
>
> One other thing I did this weekend was to play around with using CSS 
> sprites rather than <img> tags. This is important for us because it 
> reduces the load on our servers (fewer http requests). We now have 
> HTML that looks like:
>
> <a href="javascript:.."><span class="class1"></span><span>Get a new 
> challenge</span></a>
>
> "class1" has a background image set, and we use some tricks with 
> positioning to hide the <span> for visual browsers (without setting it 
> to display:none).
>
> Are there any issues with doing this?
>
> -b
>

Received on Tuesday, 17 July 2007 19:07:16 UTC