我需要在内部应用程序的头中创建一个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应用程序，并且用户将接受培训（就像我们的例子中那样），那么这应该不是问题。
我的解决方案是否存在其他可访问性问题？有人知道如何在不使用两个独立元素的情况下实现这一点吗？提前谢谢。
编辑：解决了制表问题。
最佳答案
一个人同时拥有两个角色，并且在使用应用程序时希望切换角色，这是常见的吗？如果你在进入应用程序之前预先确定了角色，这样你就不需要这个切换了，那就太好了。但是，在您需要在应用程序中间切换角色的前提下，我将提供一些可访问性思想。
你是对的，单独的元素会引起问题。如前所述，使用“仅sr”类型的类只是在视觉上隐藏信息，但不会阻止键盘聚焦。这需要tabindex="-1"，但是使用tab键的屏幕阅读器用户将无法访问元素。那可不好，嗯凯。
“仅sr”类用于视觉隐藏文本，而不是交互元素。
对于低视力用户来说，他们有一定的视力，但也可以使用屏幕阅读器（可能还有屏幕放大镜）来增加他们的体验，他们会看到一个带有“角色a”的按钮，但他们不会听到，因为它是aria-hidden的，即使他们可以点击它。这也会造成混乱。
最好的解决方案是为所有用户提供一个接口，并使其语义正确。显然，您遇到的挑战是什么是最好的小部件，以及如何传达该小部件的功能。
一种可能是使用tab control。一个选项卡上可以有“角色A”，另一个选项卡上可以有“角色B”。然后用户可以在两者之间切换到他们的心意。如果用户不同时具有两个角色，则禁用其中一个选项卡，或者完全删除该选项卡，并且他们只有一个角色的元素。使用tab控件可能不需要重新加载页面，但我不能确定，因为我对更改角色的含义了解不够。
如果需要重新加载页面，则应通知所有用户。不仅仅是针对视力受损的人。一些“残疾”是隐藏的，例如认知障碍，这有一个巨大的问题范围。意外地重新加载页面可能会对某些认知障碍造成混淆。我不确定为什么一个简单的短语，比如“（relloads page）”，由于“设计要求”而不能织进界面无障碍要求”和“设计要求”一样重要。
你原来的<fieldset>解决方案看起来很有前途（如果你删除了“sr only”类），因为它处理有视力的用户、低视力的用户、盲人用户、认知问题等，但是单选按钮导致页面重新加载还是有点奇怪。这违背了WCAG的“Understandable”原则，即使您可以通过适当的“reload”警告来满足3.2.2。
似乎需要一个更具“魅力”的小部件。一个暗示动作的小部件，通常是一个按钮。
当你遇到这样的设计问题时，你有时不得不回到设计中重新思考工作流程。在进入页面之前是否可以确定角色（这样就不需要切换角色）？是否需要在应用程序中更改角色？等。
另外，还有一点需要注意的是，应用程序的可访问性与应用程序是内部还是外部无关，即使提供了培训。如果页面没有语义正确的元素，那么无论您接受了多少培训，某些用户都将无法访问该页面。
关于html - 无障碍开关元件(Web)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53319472/