How to skip focus on hidden group of elements?

Question

Element or group of elements that are hidden with display: none; are skipped from keyboard focus (tab key) for accessibility reasons. When element turns visible it becomes accessible again, which is great.

Currently I'm using opacity and right position in order to create CSS transition. Those styles do not make element skipped from keyboard focus, which is what I want to achieve.

I would like to avoid adding tabindex="-1" to each of those inner elements if possible.

.element {
  background-color: black;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 100%;
  top: 0;
  transition: all 0.3s;
  &.is-visible {
    opacity: 1;
    right: 100px;
  }
}

I would like to have a way to hide/show element with transition, while keeping it skipped from keyboard focus until it's hidden.

if you are working with accessibility, is recommended add 'aria-hidden="true"' attribute. https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content — danielarend, Aug 15 '19 at 16:44
And I am, but that attribute doesn't make it excluded from keyboard focus. — dekisha, Aug 15 '19 at 16:46

score 11 · Accepted Answer · answered Aug 15 '19 at 16:40

One solution is to add visibility: hidden to the hidden elements CSS, backing to visibility: visible when they're not hidden.

Because, like display: none, it ignores the tabbing, since the element no longer has visibility in the document, but the transition effect still happens.

Like this:

.element {
  background-color: black;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden
  position: absolute;
  right: 100%;
  top: 0;
  transition: all 0.3s;
  &.is-visible {
    opacity: 1;
    visibility: visible;
    right: 100px;
  }
}

Hope it helps.

Excellent, exactly what I was looking for! Not sure why I didn't try with visibility :D — dekisha, Aug 15 '19 at 16:44

How to skip focus on hidden group of elements?

1 Answers1