New keyboard accessibility plugin demo - Image Viewer design

[Colin Clark]

Hi Jon and Jess,

I agree, I'd love to see the mockup for the alternative approach. If you're using a grid of image thumbnails, don't you get back into the problem of 2D keyboard navigation, which is currently only supported in the Reorderer, not the keyboard plugin?

On the other hand, I wonder if your assertion about #1 is true. We do use fixed layouts where appropriate--among other things, this is how the Scroller mini-component works for the Uploader. I don't think you'll need to use absolute positioning at all, but simply set the image thumbnail container at a certain width, and allow it to overflow automatically to show scroll bars where appropriate.

When the user enlarges the view, modern browsers will automatically scale the container and any associated images along with the text. In IE6, things will be a little bit less awesome, but this would be an issue with relative sizing, too.

So, maybe I'm missing something. What's the accessibility and reduced personalization problem with having a scrollable view?

Colin

On 2010-10-25, at 5:04 PM, Jess Mitchell wrote:

> Sounds reasonable to me -- can you quickly mock it up and send it around?
> 
> J
> 
> On Oct 25, 2010, at 4:16 PM, Jonathan Hung wrote:
> 
>> Hi everyone,
>> 
>> After starting work on the demo markup and thinking of actual implementation, we have discovered that the implementation of a horizontal scroller for the image thumbnail requires either:
>> 
>> 1. A fixed / absolute layout, or
>> 2. A Javascript scroller to handle the interaction.
>> 
>> There are disadvantages to both these approaches. Option 1 will have reduced accessibility and reduced personal customization if the demo is in a fixed layout. Option 2, though a common approach, adds more Javascript to the demo and requires integration between the keyboard plugin and the Javascript scroller.
>> 
>> I don't think either of these options are desirable at the moment given that we want this demo to be a clear, inclusive example of the keyboard plugin.
>> 
>> What I propose is that the design of this demo be changed slightly to use a grid of image thumbnails instead of a horizontal scroller. This still accomplishes what we want for the demo while maintaining good accessibility.
>> 
>> We will use a small number of thumbnails to reduce the amount of vertical scrolling, and the revisit the Javascript horizontal scroller / keyboard plugin integration as a future iteration.
>> 
>> Does this sound like a reasonable approach? Thoughts and comments appreciated!
>>>> 

---
Colin Clark
Technical Lead, Fluid Project
http://fluidproject.org