0

Do I need to move focus on the previously hidden, but revealed with clicking/touching on the link, div? I'll explain it by following example:

HTML:

<a href="javascript:void(0)">content</a>
<div>blablabla</div>

CSS:

div {
  display:none;
  width: 500px;
  height:200px;
  line-height: 200px;
  background: #007;
  color: #fff;
  text-align: center;
}
.block {
  display:block;
}
a:focus {
  border: 2px solid red;
}

jQuery:

$(function () {
    $("a").on("click touchstart", function () {
    $("div").addClass("block");
  });
});

As you can see, the focus is remained on the link when it's clicked. Do I actually need to remove the focus to the revealed div? If so, should I tabindex it? Would be nice to see any examples(not necessarily, of course) of you as well, so it would be more clear of how should it be done.

sorvz
  • 123
  • 8
  • Is the `
    ` being used as a dialog, or is this just a disclosure widget? The answer can vary depending on its use. And then I can point you to the appropriate pattern.
     – aardrian Apr 07 '17 at 15:46
  • @aardrian May you please address both cases? ...It's kinda interesting to know :) – sorvz Apr 09 '17 at 06:56

1 Answers1

1

Dialog Modal

https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal

  1. When a dialog opens, focus is typically set on the first focusable element.
  2. When a dialog closes, focus returns to the element that had focus before the dialog was invoked. This is often the control that opened the dialog.

The first focusable element is typically the close button. Sometimes it is the dialog's title, depending on how you choose to code it and user testing.

Disclosure Widget

This very much depends on the nature of the content within.

  • If you are using it like a menu button, then read this: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

  • If you are using it like an accordion, then read this: https://www.w3.org/TR/wai-aria-practices-1.1/#accordion

  • If it is just way to hide some content that is otherwise not hidden from a screen reader, then you may not need to manage focus at all.

  • If it reveals content that was otherwise hidden to a screen reader then you may need to put aria-expanded on it and change its value accordingly, and potentially not move focus at all.

  • If it opens content that has interactive controls as the primary purpose of this widget, then you may need to put focus on the first interactive control.

In other words, it depends. This is why seeing live examples is so important to offer good guidance.

I can tell you that from what I see you need to change <a href="javascript:void(0)">content</a> to <button>content</button> since it is not taking the user to a new page. In short, if your href attribute is not a new URL (or valid named anchor on the page), then it should probably not be an <a href> at all. If I cannot right-click and open in new tab, then it should not be an <a href>.

Community
  • 1
  • 1
aardrian
  • 8,581
  • 30
  • 40