WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: keyboard navigable photo gallery

for

From: _mallory
Date: Jan 12, 2016 2:24AM

Hi, this is pretty common in a lot of JS-scripted things like
lightboxes etc.

The best thing to do usually is find the most obvious place a
user would go next (this might be the "prev" button) and move
focus there manually. In my galleries, my buttons didn't get
disabled-- they'd completely disappear, so users no longer
got the visual feedback of "more." This meant I had to manage
focus, in my case on the "prev" buttons, where the next tab
would go to the next logical focus spot on the page (the close
button).

_mallory

On Tue, Jan 12, 2016 at 12:13:10PM +1100, isabel brison wrote:
> Hi all,
>
> I have a photo gallery that can be navigated with two buttons: "previous"
> and "next". When the user reaches the last photo in the gallery, the "next"
> button is set to "disabled" with JS. This causes issues with keyboard
> navigation, as when the user clicks "next" to go to the last photo, their
> focus is on that button, and when it becomes disabled, some browsers will
> move focus to the top of the page (Chrome and IE do this, Firefox moves
> focus to the next element in the tab order).
>
> I'm wondering if anyone has tips as to the best way to handle focus in this
> situation. Should I move it programmatically to the next element in the tab
> order?
>
> Also, is it best to use the disabled attribute in this situation, or would
> a negative tabindex be better?
>
> Cheers,
>
> Isabel
>
> --
> http://isabelbrison.com
>
> http://tellthemachines.com
> > > >