Question

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

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

.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>

Answer 1

这只是单选按钮...键盘可用于使用选项卡和空格键在它们之间进行导航。

我将使用:focus突出显示所选的标签，并使用tabindex属性使其按需工作。

如果您有与此相关的特定问题，请提供更多的部门，并在此处提供基本的代码示例，而无需链接。

由于无法通过键盘选择隐藏的输入，因此使其可见...

.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__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>

Answer 2

无法接受的答案。

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

下面的答案解决了一些CSS问题，使其更易于访问。

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

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

首先，您应该使用WAI-ARIA来补充HTML，以使屏幕阅读器更加清晰。请参阅tabs examples on W3C，了解您应该使用哪些WAI-ARIA角色。没有JavaScript，这是不可能的，因为状态需要更改（例如，aria-hidden应该更改）。

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

话虽这么说，但我已修正了一些问题，并给出了可接受的答案，至少可以为您提供一个良好的起点，因为您的“没有JavaScript 后备”。

问题1-标签上的`tabindex`。

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

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

问题2-通过键盘导航时没有焦点指示器。

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

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

/*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`状态使用相同的状态。

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

/*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;
}

示例

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

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

.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的标签视图

2 个答案:

无法接受的答案。

问题1-标签上的`tabindex`。

问题2-通过键盘导航时没有焦点指示器。

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

示例

仅可访问CSS的标签视图

2 个答案:

无法接受的答案。

问题1-标签上的tabindex。

问题2-通过键盘导航时没有焦点指示器。

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

示例

问题1-标签上的`tabindex`。

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