Доступный элемент переключателя (сеть)

Question

Мне нужно создать элемент switch в заголовке внутреннего приложения, который позволяет переключаться между двумя пользовательскими ролями. Остальная часть контента отображается на основе выбранной роли - например, Существуют различные элементы навигации и действия, доступные для роли A и для роли B. Также важно отметить, что изменение роли приводит к перезагрузке страницы.

До сих пор я не смог найти доступное решение, используя только вход (флажок / радио) или кнопку, поэтому я объединил обе идеи в следующее (пожалуйста, игнорируйте стили кнопки, это только для демонстрационных целей) :

var button = document.querySelector('button');
var inputRoleA = document.getElementById("role-A");
var inputRoleB = document.getElementById("role-B");

button.addEventListener('click', function(event) {
  if (inputRoleA.checked) {
    inputRoleA.checked = false;
    inputRoleB.checked = true;
    button.innerText = 'Role B';
    button.classList.remove('selected-role-A');
    button.classList.add('selected-role-B');
    // AJAX call to server and page reload
  } else {
    inputRoleA.checked = true;
    inputRoleB.checked = false;
    button.innerText = 'Role A';
    button.classList.add('selected-role-A');
    button.classList.remove('selected-role-B');
    // AJAX call to server and page reload
  }
});

fieldset {
  border: none;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input:focus ~ button {
  outline: 2px solid blue;
}

button {
  width: 120px;
  padding: 4px 2px;
  background: #4a6a9e;
  border: 1px solid white;
  border-radius: 16px;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.selected-role-A {
  text-align: left;
}

.selected-role-B {
  text-align: right;
}

.selected-role-A::before,
.selected-role-B::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 4px;
  background: white;
  border-radius: 50%;
}

<fieldset>
  <legend class="sr-only">Choose role (reloads the page):</legend>
  <input class="sr-only" id="role-A" name="roles" type="radio" value="Role A" checked>
  <label class="sr-only" for="role-1">Role A</label>
  <input class="sr-only" id="role-B" name="roles" type="radio" value="Role B">
  <label class="sr-only" for="role-B">Role B</label>
  <button tabindex="-1" aria-hidden="true" class="switch selected-role-A">
    Role A
  </button>
</fieldset>

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

Относительно перезагрузки страницы - Метод WCAG G13 требует информирования пользователя о том, что произойдет, если изменение элемента формы приведет к изменению контекста (например, перезагрузка в нашем случае). К сожалению, я не могу разместить визуальную информацию вокруг кнопки из-за требований к дизайну, поэтому я добавил ее только в набор полей для программ чтения с экрана. Однако, насколько я понимаю, это не должно быть проблемой, если страница является приложением для интрасети, и пользователи будут проходить обучение (как в нашем случае).

Есть ли другие проблемы с доступностью в моем решении? Кто-нибудь знает, как этого добиться, не используя два отдельных элемента? Заранее спасибо.

---

РЕДАКТИРОВАТЬ: Решена проблема табуляции.

Answer 1

Будет ли обычным делом иметь обе роли, и они захотят поменяться ролями во время использования приложения?Было бы неплохо, если бы вы заранее определили роль, прежде чем попасть в приложение, чтобы вам не понадобился этот переключатель.Но исходя из того, что вам нужно поменять роли в середине приложения, я приведу несколько соображений о доступности.

Вы правы в том, что отдельные элементы будут вызывать проблемы.Как уже отмечалось, использование класса типа «sr-only» просто визуально скрывает информацию, но не мешает фокусировке клавиатуры.Для этого вам потребуется tabindex="-1", но тогда пользователь программы чтения с экрана, использующий клавишу tab , не сможет добраться до элемента.Это было бы плохо, ммкай.

"sr-only" классы предназначены для визуального сокрытия текста , а не интерактивных элементов.

Для пользователя с плохим зрением, у которого есть некоторыезрение, но расширяет свой опыт, используя также средство чтения с экрана (и, возможно, экранную лупу), они увидят кнопку с «Роль A», но они не услышат ее, потому что это aria-hidden, хотя они могут вкладку к нему.Это также приведет к путанице.

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

Одна из возможностей заключается в использовании элемента управления tab .Вы можете иметь «Роль A» на одной вкладке и «Роль B» на другой вкладке.Затем пользователь может переключаться между двумя, чтобы их душе угодно.Если у пользователя нет обеих ролей, либо одна из вкладок отключена, либо вкладка полностью удаляется, и у них просто есть элементы для одной роли.Использование элемента управления вкладками может сделать перезагрузку страницы ненужной, но я не могу сказать наверняка, потому что я недостаточно знаю, что означает изменение роли.

Если перезагрузка страницы равна необходимо, все пользователи должны быть уведомлены об этом.Это не только для слабовидящих.Некоторые «недостатки» скрыты, такие как когнитивные нарушения, которые имеют огромный спектр проблем.Неожиданная перезагрузка страницы может сбить с толку некоторые когнитивные нарушения.Я не уверен, что понимаю, почему простая фраза, такая как «(страница перезагрузки)», не может быть вплетена в интерфейс из-за «требований к дизайну».«Требования доступности» так же важны, как и «требования к дизайну».

Ваше оригинальное решение <fieldset> выглядит многообещающе (если вы удалите класс "sr-only"), поскольку оно обрабатывает зрячих пользователей, пользователей со слабым зрением, слепых пользователей, когнитивные проблемы и т. Д. Но это все еще немного странночтобы радио-кнопка вызывала перезагрузку страницы.Это противоречит принципу WCAG « Understandable », даже если вы можете удовлетворить 3.2.2 , получив соответствующее предупреждение «reload».

Похоже, что требуется виджет с большим количеством "oomph".Будет происходить виджет, который подразумевает действие, обычно это кнопка.

Когда вы сталкиваетесь с такими вопросами проектирования, вам иногда приходится возвращаться к дизайну и переосмысливать рабочий процесс.Можно ли определить роль до того, как вы перейдете на страницу (что устраняет необходимость смены ролей)?Нужно ли менять роль в середине приложения?И т.д.

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