WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: keyboard navigable photo gallery

for

From: Birkir R. Gunnarsson
Date: Jan 11, 2016 7:26PM

So are you saying that the act of setting the disabled attribute on
the button while it has focus causes browser scrolling? What happens
if you use Javascript to prevent default?
If that is impossible, technically you could use aria-disabled="true"
to present the button as unavailable to assistive technologies, and
use CSS to create a visual effect such as greying out the button, or
using an effect similar to the browser disabled element.
Just some thoughts, hope they help. This is an interesting problem.



On 1/11/16, isabel brison < <EMAIL REMOVED> > 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
> > > > >


--
Work hard. Have fun. Make history.