E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Karl Brown
Date: Tue, Apr 25 2017 2:52AM
Subject: Home button on left, clickable tabindex=-1 logo on the right
No previous message | Next message →

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

From: Jonathan C. Cohn
Date: Tue, Apr 25 2017 5:53AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | Next message →

As a screen reader user, i would prefer the logo to not be in the tab order in this case, especially if the logo has an all that has logo. i could even see demoting the link to a clickable item as long as the logo and home icon consistly go to exactly the same target.
Best wishes,

Jonathan Cohn

> On Apr 25, 2017, at 4:52 AM, Karl Brown < = EMAIL ADDRESS REMOVED = > wrote:
>
> 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
> > > >

From: JP Jamous
Date: Tue, Apr 25 2017 6:23AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | Next message →

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?

From: Birkir R. Gunnarsson
Date: Tue, Apr 25 2017 7:10AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | Next message →

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

From: Jonathan Avila
Date: Tue, Apr 25 2017 7:15AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | Next message →

I would agree with Jonathan -- if the keyboard accessible home icon and link are equivalent and go to the home page there is no need for the logo to be keyboard accessible as there is an alternative provided. Just as a data table with summarization can provide an alternative to an inaccessible chart -- a duplicate link can be an alternative to a control that is not keyboard accessible. Automated tools will likely flag this issue though.

Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS 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.

From: Jonathan Avila
Date: Tue, Apr 25 2017 7:17AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Tue, Apr 25 2017 7:31AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | Next message →

Jon
You are right there, I was being a bit tongue-in-cheek.
But in a practical environment using positive tab indecies ends up
being a problem in, I would say, over 9 out of 10 cases.
Most webpages are huge, and the idea of getting the user directly to
the form quickly breaks down when you forget to assign a positive
tabindex to one of the form fields, or you dynamically add one form
field, (or update the page to add a field) and forget to reorder them.
I can't find the quote, but someone said using positive tab index
values is like adopting a pet crocodile, it starts out cute but grows
fast and ends up ruining your bathtub and eating your children.




On 4/25/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> 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 ADDRESS 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.
>
>
>

From: Karl Brown
Date: Wed, Apr 26 2017 4:05AM
Subject: Re: Home button on left, clickable tabindex=-1 logo on the right
← Previous message | No next message

Thanks, everyone. I've taken everything on board.

It got a little more complicated yesterday as on some pages they have a
different navigation structure where the "home" icon goes to a different
location than the logo, so I'm advising that the logo still needs to be
focusable where those situations arise (i.e., home icon goes to page B,
brand logo goes to page A). If they're both going to the same location
(page A) it's less of an issue.

On Tue, Apr 25, 2017 at 2:31 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Jon
> You are right there, I was being a bit tongue-in-cheek.
> But in a practical environment using positive tab indecies ends up
> being a problem in, I would say, over 9 out of 10 cases.
> Most webpages are huge, and the idea of getting the user directly to
> the form quickly breaks down when you forget to assign a positive
> tabindex to one of the form fields, or you dynamically add one form
> field, (or update the page to add a field) and forget to reorder them.
> I can't find the quote, but someone said using positive tab index
> values is like adopting a pet crocodile, it starts out cute but grows
> fast and ends up ruining your bathtub and eating your children.
>
>
>
>
> On 4/25/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> >> 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 ADDRESS 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.
> >
> >
> >