Сосредоточение внимания на обнаруженном (ранее скрытом) div - как правильно

Question

Нужно ли переместить фокус на ранее скрытый, но раскрытый щелчок / касание по ссылке, div? Я объясню это на следующем примере:

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");
  });
});

Как вы можете видеть, при нажатии на ссылку остается ссылка. Нужно ли вообще убирать фокус с выявленного div? Если так, я должен tabindex Это? Было бы неплохо увидеть любые примеры (не обязательно, конечно) с вашей стороны, так что было бы более понятно, как это сделать.

Answer 1

Диалог Модал

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

1. Когда открывается диалоговое окно, фокус обычно устанавливается на первый фокусируемый элемент.
2. Когда диалог закрывается, фокус возвращается к элементу, который имел фокус до вызова диалога. Это часто тот элемент управления, который открыл диалог.

Первым фокусируемым элементом обычно является кнопка закрытия. Иногда это заголовок диалогового окна, в зависимости от того, как вы решите его кодировать и пользовательского тестирования.

Раскрытие виджета

Это очень сильно зависит от характера содержимого внутри.

• Если вы используете его как кнопку меню, прочитайте это: https://www.w3.org/TR/wai-aria-practices-1.1/

• Если вы используете его как аккордеон, прочитайте это: https://www.w3.org/TR/wai-aria-practices-1.1/

• Если это просто способ скрыть некоторый контент, который в противном случае не спрятан от программы чтения с экрана, то вам, возможно, вообще не понадобится управлять фокусом.

• Если он обнаруживает контент, который в противном случае был скрыт для программы чтения с экрана, вам может понадобиться aria-expanded на него и измените его значение соответственно, и, возможно, не сдвиньте фокус вообще.

• Если он открывает содержимое с интерактивными элементами управления в качестве основной цели этого виджета, вам, возможно, придется сосредоточиться на первом интерактивном элементе управления.

Другими словами, это зависит. Вот почему видеть живые примеры так важно, чтобы предложить хорошее руководство.

Я могу сказать вам, что из того, что я вижу, вам нужно изменить <a href="javascript:void(0)">content</a> в <button>content</button> поскольку он не переносит пользователя на новую страницу. Короче говоря, если ваш href атрибут не является новым URL-адресом (или действительным именованным якорем на странице), тогда он, вероятно, не должен быть <a href> совсем. Если я не могу щелкнуть правой кнопкой мыши и открыть в новой вкладке, то это не должно быть <a href>,