WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: keyboard navigable photo gallery

for

From: isabel brison
Date: Jan 12, 2016 5:58PM

Thanks everyone!

I'm going with manually transferring focus back to the "previous" button
(or whichever button is not disabled at the time). Keeping focus within the
gallery makes sense as this component can be used in several different
contexts, so the next focusable element on the page could potentially be
anything.

On 12 January 2016 at 20:24, _mallory < <EMAIL REMOVED> > wrote:

> 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
> > > > > > > > > > > > >



--
http://isabelbrison.com

http://tellthemachines.com