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 technique G13要求告知用户，如果表单元素的更改导致上下文更改（如本例中的重新加载），将会发生什么。不幸的是，由于设计要求，我无法在按钮周围放置可视信息，因此我仅将其添加到屏幕阅读器的字段集中。但是，据我所知，如果页面是Intranet应用程序并且要对用户进行培训（例如在我们的案例中），这应该不是问题。

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

编辑：解决了制表符问题。

Answer 1

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

您是正确的，单独的元素会引起问题。如上所述，使用“仅sr”类型类仅在视觉上隐藏信息，但不会阻止键盘聚焦。为此，您需要tabindex="-1"，但是使用 tab 键的屏幕阅读器用户将无法访问该元素。那会不好，mmkay。

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

对于视力较弱但也使用屏幕阅读器（可能还包括屏幕放大镜）的用户，他们会看到带有“角色A”的按钮，但他们听不到，因为即使他们可以 tab 也可以使用它aria-hidden。这也会引起混乱。

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

一种可能是使用tab control。您可以在一个选项卡上具有“角色A”，而在另一选项卡上具有“角色B”。然后，用户可以在两者之间切换到自己的心脏内容。如果用户没有两个角色，则禁用其中一个选项卡，或者完全删除该选项卡，而他们仅具有其一个角色的元素。使用选项卡控件可能不需要重新加载页面，但是我不确定，因为我对更改角色的含义不了解。

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

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

似乎需要一个具有更大“动感”的小部件。暗示将要执行操作的小部件，通常是一个按钮。

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

此外，请注意，即使应用程序是内部的，也可以是外部的，即使提供了培训，应用程序的可访问性也无关紧要。如果该页面没有语义正确的元素，那么无论您接受了多少培训，某些用户都将无法访问该页面。

无障碍开关元件（Web）

1 个答案: