html - 可访问的开关元件（网络）

问题描述

我需要在内部应用程序的标题中创建一个 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要求通知用户如果表单元素的更改导致上下文的更改（如我们的示例中的重新加载）会发生什么。不幸的是，由于设计要求，我无法在按钮周围放置视觉信息，所以我只将它添加到屏幕阅读器的字段集中。但是，据我了解，如果页面是 Intranet 应用程序并且用户将接受培训（如我们的案例），这应该不是问题。

我的解决方案是否还有其他可访问性问题？有谁知道如何在不使用两个单独元素的情况下实现这一目标？提前致谢。

编辑：解决了标签问题。

标签： htmlaccessibilityweb-accessibility

解决方案

一个人同时拥有两个角色并且在使用应用程序时想要切换角色是否很常见？如果您在访问应用程序之前预先确定角色，这样您就不需要此开关，那就太好了。但是，在您需要在应用程序中切换角色的前提下，我将提供一些可访问性的想法。

您是正确的，单独的元素会导致问题。如前所述，使用“sr-only”类型类只会在视觉上隐藏信息，但不会阻止键盘焦点。您需要这样做tabindex="-1"，但是使用该tab键的屏幕阅读器用户将无法访问该元素。那会很糟糕，嗯。

“sr-only”类用于视觉隐藏文本而不是交互式元素。

对于有一定视力但通过使用屏幕阅读器（可能还有屏幕放大器）来增强体验的低视力用户，他们会看到一个带有“角色 A”的按钮，但他们不会听到它，因为aria-hidden即使他们可以tab做到。这也会造成混乱。

最好的解决方案是为所有用户提供一个界面并使其在语义上正确。正如您显然遇到的那样，挑战是最好使用的小部件是什么以及如何传达该小部件的功能。

一种可能性是使用选项卡控件。您可以在一个选项卡上使用“角色 A”，在另一个选项卡上使用“角色 B”。然后用户可以在两者之间切换到他们心中的内容。如果用户没有两个角色，则禁用其中一个选项卡，或者完全删除选项卡，他们只有一个角色的元素。使用选项卡控件可能不需要重新加载页面，但我不能肯定地说，因为我对更改角色的含义知之甚少。

如果需要重新加载页面，则应通知所有用户。它不仅适用于视障人士。一些“残疾”是隐藏的，例如认知障碍，它有很多问题。意外重新加载页面可能会使某些认知障碍感到困惑。我不确定我是否理解为什么由于“设计要求”而无法将简单的短语（例如“（重新加载页面）”）编织到界面中。“可访问性要求”与“设计要求”一样重要。

您的原始<fieldset>解决方案看起来很有希望（如果您删除“sr-only”类），因为它可以处理有视力的用户、低视力用户、盲人用户、认知问题等。但是让单选按钮导致页面重新加载仍然有点奇怪. 这违反了 WCAG 的“可理解”原则，即使您可以通过适当的“重新加载”警告来满足3.2.2 。

似乎需要一个具有更多“魅力”的小部件。将发生一个暗示动作的小部件，通常是一个按钮。

当您遇到这样的设计问题时，有时您必须回到设计并重新考虑工作流程。是否可以在进入页面之前确定角色（从而无需切换角色）？是否需要在申请中更改角色？等等。

此外，一方面，应用程序的可访问性并不重要，无论应用程序是内部的还是外部的，即使提供了培训。如果页面没有语义正确的元素，那么无论您接受多少培训，某些用户都无法访问它。

html - 可访问的开关元件（网络）

问题描述

解决方案

推荐阅读