E-mail List Archives

Re: Home button on left, clickable tabindex=-1 logo on the right

for

From: Jonathan Avila
Date: Apr 25, 2017 7:17AM


> I always call a fail on use of positive tabindex values, because those will break the focus order of the page.

It depends on the situation. If you have a page with two links and two input fields -- for example, a simple log in page -- there is no harm in using a positive tabindex to order the interactive elements. In general use of a positive tabindex is a red flag for issues -- but it doesn't have to be an automatic failure as it's possible to pass using that technique.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
<EMAIL REMOVED>
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Download our CSUN Presentations Here!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, April 25, 2017 9:11 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Home button on left, clickable tabindex=-1 logo on the right

If I understand this problem correctly.

There are two links that point to the same URL, one is a "home" image link and the other is just a regular link.
The regular link has been removed from focus order using tabindex="-1".

If this is the case I would not call an accessibility issue on it.
Why? Because the user can navigate to the home link to get to the page, adding the other link will not help the keyboard only user (it will be worse because it adds an unnecessary tab stop).
You could make a best practice recommendation that, if possible, the two be merged, see WCAG technique H2 http://www.w3.org/TR/WCAG20-TECHS/H2.html

I am fine with use of tabindex="-1" where appropriate. It does not alter the focus order, it just removes certin elements from focus order but makes them focusable with JavaScript. It all depends on the context.
Also, a focus order does not have to be left to right, top to bottom (though recommended), it just has to be logical.
I always call a fail on use of positive tabindex values, because those will break the focus order of the page.



On 4/25/17, JP Jamous < <EMAIL REMOVED> > wrote:
> Tabindex should move left to right top to bottom unless the content is
> in Arabic or RTL languages. So yes, I would consider it as a failure.
>
> I don't like it when developers start messing with the tabindex. Leave
> it up to the browser. Again, KISS applies here as I always like to use
> it. The simpler the more productive the UI will be.
>
> From a UX prospective, that is not how the page is laid out to sighted
> users. Why should it be different for screen reader or keyboard only users?
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Karl Brown
> Sent: Tuesday, April 25, 2017 3:52 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] Home button on left, clickable tabindex=-1 logo on
> the right
>
> Hi all,
>
> There's a client navigation I'm reviewing where they've decided, for
> brand reasons, to put the logo on the right.
>
> So the first thing in the header that's focusable is still a link to
> the homepage, they've put a link on the left which says "Home" (and is
> an icon of a house).
>
> The logo on the right goes to the homepage, and is still clickable but
> doesn't receive focus because it's got tabindex=-1 applied.
>
> Am I correct in assuming it's a failure of WCAG 2.1.1 as the logo
> itself is no longer able to be used by non-point-and-click devices?
>
>
> --
> Karl Brown
> Twitter: @kbdevelops
> Skype: kbdevelopment
>
> Professional Certificate Web Accessibility Compliance (Distinction),
> University of South Australia, 2015
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.