Re: reCAPTCHA implementation problems

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 Monday, 16 July 2007 06:08:01 UTC