仅限CSS的可访问选项卡视图 [英] Accessible CSS-only tab view

问题描述

我正在一个需要(a)没有JavaScript且(b)可以通过键盘访问的网站.

I'm working on a site that needs to (a) work without JavaScript and (b) be keyboard-accessible.

我使用了标签目标技巧来构建标签视图( https://css-tricks.com/functional-css-tabs-revisited/)，但我注意到它依赖于被点击的标签.我不知道如何使它与键盘一起使用.这可能吗?

I have used the label target trick to build a tab view (https://css-tricks.com/functional-css-tabs-revisited/), but I've noticed that it relies on the label being clicked. I can't figure out how to make it work with the keyboard. Is this possible?

.tabs {
  background-color: #eee;
  min-height: 400px;
}

.tabs__list {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tabs__tab {
  padding: 0.5rem;
}

.tabs__content {
  display: none;
  left: 0;
  padding: 0.5rem;
  position: absolute;
  top: 100%;
}

.tabs__input {
  display: none;
}

.tabs__input+label {
  cursor: pointer;
}

.tabs__input:focus,
.tabs__input:hover {
  color: red;
}

.tabs__input:checked+label {
  color: red;
}

.tabs__input:checked~.tabs__content {
  display: block;
}

<div class="tabs">
  <ul class="tabs__list">
    <li class="tabs__tab">
      <input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
      <label for="tab-0" class="tabs__label" tabindex="0" role="button">Tab 0</label>
      <div class="tabs__content">
        Tab 0 content
      </div>
    </li>
    <li class="tabs__tab">
      <input class="tabs__input" type="radio" id="tab-1" name="tab-group">
      <label for="tab-1" class="tabs__label" tabindex="0" role="button">Tab 1</label>
      <div class="tabs__content">
        Tab 1 content
      </div>
    </li>
  </ul>
</div>

推荐答案

接受的答案不是可访问的解决方案.

我在这里做了一些更正和观察.如果将来偶然发现此问题，请不要在生产中使用已接受的答案.使用键盘真是太糟糕了.

Accepted answer is not an accessible solution.

I have made some corrections and some observations here. Do not use the accepted answer in production if you stumble across this question in the future. It is an awful experience with a keyboard.

以下答案解决了一些CSS问题，使其更易于访问.

The answer below fixes some of the CSS issues to make it more accessible.

但是我建议您重新考虑no JavaScript要求.

我可以理解有一个很好的后备功能(我在下面给出的带有修复程序的示例是这样)，但是您无法制作一组完全可访问的仅CSS选项卡.

I can understand having a good fall-back (which the example I give below with the fixes is) but there is no way you can make a fully accessible set of CSS only tabs.

首先，您应该使用WAI-ARIA来补充HTML，使屏幕阅读器的内容更加清晰.请参见标签W3C上的示例，以查看您应该使用哪些WAI-ARIA角色.没有JavaScript，这是不可能的，因为需要更改状态(例如，应更改 aria-hidden ).

Firstly you should use WAI-ARIA to complement your HTML to make things even more clear for screen readers. See the tabs examples on W3C to see what WAI-ARIA roles you should be using. This is NOT possible without JavaScript as states need to change (aria-hidden for example should change).

第二，您应该能够使用某些快捷键.例如，按 home 键以返回第一个选项卡，而您只有在JS的帮助下才能完成此操作.

Secondly, you should be able to use certain shortcut keys. Press the home key for example in order to return to the first tab, something you can only do with a little JS help.

话虽这么说，但我已修正了一些问题，并给出了可接受的答案，至少为您提供了一个很好的起点，因为您的没有JavaScript fallback ".

With that being said here are a few things I fixed with the accepted answer to at least give you a good starting point as your 'no JavaScript fallback'.

通过添加此内容，您将创建一个无法通过键盘激活的可聚焦元素(除非您使用JavaScript，否则您不能按标签上的 space 或 Enter 来更改选择内容).

By adding this you are creating a focusable element that cannot be activated via keyboard (you cannot press space or Enter on the label to change selection, unless you use JavaScript).

为了解决这个问题，我只是从标签中删除了 tabindex .

In order to fix this I simply removed the tabindex from the labels.

在此示例中，仅当您将注意力集中在单选按钮(隐藏)上时，这些选项卡才起作用.但是，此时没有焦点指示器，因为样式在焦点对准复选框时将样式应用于复选框，而不是对其标签应用样式.

In the example the tabs only work when you are focused on the radio buttons (which are hidden). However at this point there is no focus indicator as the styling is applying styling to the checkbox when it is focused and not to its label.

为了解决这个问题，我用以下内容调整了CSS

In order to fix this I adjusted the CSS with the following

/*make it so when the checkbox is focused we add a focus indicator to the label.*/
.tabs__input:focus + label {
  outline: 2px solid #333;
}

问题3-对:hover 和:focus 状态使用相同的状态.

这是另一个需要克服的不良习惯，总是有不同的方式来显示悬停状态和焦点状态.一些屏幕阅读器和屏幕放大镜用户将使用鼠标来检查其是否具有正确的项目并使其定向在页面上.如果没有单独的悬停状态，则很难检查您是否将鼠标悬停在关注的项目上.

Problem 3 - using the same state for :hover and :focus states.

This is another bad practice that needs to go away, always have a different way of showing hover and focus states. Some screen reader and screen magnifier users will use their mouse to check they have the correct item focused and orientate themselves on a page. Without a separate hover state it is difficult to check you are hovered over a focused item.

/*use a different colour background on hover, you should not use the same styling for hover and focus states*/
.tabs__label:hover{
   background-color: #ccc;
}

示例

在示例中，我在顶部添加了超链接，以便您可以查看使用键盘时焦点指示器的位置.

Example

In the example I have added a hyperlink at the top so you can see where your focus indicator is when using a keyboard.

当焦点指示器位于两个选项卡之一上时，您可以按箭头键来更改选项卡(这是预期的行为)，焦点指示器将相应地进行调整以清楚地选择了哪个选项卡.

When your focus indicator is on one of the two tabs you can press the arrow keys to change tab (which is expected behaviour) and the focus indicator will adjust accordingly to make it clear which tab was selected.

.tabs {
  background-color: #eee;
  min-height: 400px;
}

.tabs__list {
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tabs__tab {
  padding: 0.5rem;
}

.tabs__content {
  display: none;
  left: 0;
  padding: 0.5rem;
  position: absolute;
  top: 100%;
}

.tabs__input {
  position: fixed;
  top:-100px;
}

.tabs__input+label {
  cursor: pointer;
}


.tabs__label:hover{
   background-color: #ccc;
}

.tabs__input:focus + label {
  outline: 2px solid #333;
}

.tabs__input:checked+label {
  color: red;
}

.tabs__input:checked~.tabs__content {
  display: block;
}

<a href="#">A link so you can see where your focus indicator is</a>
<div class="tabs">
  <ul class="tabs__list">
    <li class="tabs__tab">
      <input class="tabs__input" type="radio" id="tab-0" name="tab-group" checked>
      <label for="tab-0" class="tabs__label" role="button">Tab 0</label>
      <div class="tabs__content">
        Tab 0 content
      </div>
    </li>
    <li class="tabs__tab">
      <input class="tabs__input" type="radio" id="tab-1" name="tab-group">
      <label for="tab-1" class="tabs__label" role="button">Tab 1</label>
      <div class="tabs__content">
        Tab 1 content
      </div>
    </li>
  </ul>
</div>

这篇关于仅限CSS的可访问选项卡视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！