WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tab Order and Focus Question

for

From: glen walker
Date: Mar 15, 2019 5:26PM

Ahh, now I understand Jim's original question. You're asking if a
non-interactive element receives focus (for whatever reason), should it
have a visible focus indicator?

That's an interesting question. My take on it is that it is not required
by WCAG.

4.1.2 talks about focus but it's for "User Interface Components", with the
definition <https://www.w3.org/TR/WCAG21/#dfn-user-interface-components>
saying "What is meant by "component" or "user interface component" here is
also sometimes called "user interface element"."

2.4.7 says the focus must be visible for a "keyboard operable user
interface".

So a non-natively focusable element that happens to have tabindex=0 so that
users can tab to it, if it's not an element that can be acted upon (a user
interface component), then it doesn't need a focus indicator according to
the spec. (We'll ignore for the moment that non-interactive elements
shouldn't have tabindex=0).

If you use tabindex="-1" so that you can programmatically move the focus to
the element, for example the destination of a skip link, or a heading in a
single page app, or a modal dialog container, then since those elements are
not interactive, they don't need a focus indicator either. That doesn't
mean you can't do some kind of visual styling to show the element received
focus. For example, the WebAIM site will show a focus indicator briefly
when using the skip link even though the destination of the skip link is
not an interactive element. The background of the element (which in this
case is a big <div>) goes yellow then fades away. It gives you a clue that
the focus changed. If they didn't have that indicator, it would still pass
WCAG but it's a nice UX addition.

On Fri, Mar 15, 2019 at 5:00 PM Mallory < <EMAIL REMOVED> > wrote:

> Yes, including the example mentioned earlier of something with
> tabindex="-1" and JavaScript sets focus. If the developer didn't remove it,
> focus should be visible.
>
> cheers,
> _mallory
>
> On Fri, Mar 15, 2019, at 9:51 PM, Jim Homme wrote:
> > Hi,
> > I was asking if the visual indicator for focus is the same when focus
> > is not on interactive elements.
> >
>
>