Question

主要是从可访问性的角度，我想知道以下HTML / CSS是否有任何错误。

我有两组指令A和B。用户一次只能看到其中一条。当用户看到说明A时，应该有一个指向B的链接，反之亦然。我考虑过使用<radio>按钮及其:checked状态来控制内容的可见性，然后<label>可以在该内容内部，充当链接。由于可以单击标签以激活其相应的单选按钮，因此我将代码设置如下：

label {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}

.a,.b {
  display:none;
}

#a:checked ~ .content .a,
#b:checked ~ .content .b {
  display: block;
}

<input type="radio" name="options" value="a" id="a" checked>
<input type="radio" name="options" value="b" id="b">

<div class="content">
  <div class="a">
    Some text and <label for="b">Check out B</label>
  </div>
  <div class="b">
    Some other text and <label for="a">Check out A</label>
  </div>
</div>

由于这似乎很骇人，所以我想您可以指出该代码可能导致的任何潜在问题。

Answer 1

我没有发现关于HTML标签的任何特殊约束，这会阻止您执行已做的事情。在W3S HTML label tag page上声明的唯一约束是，其«for属性必须等于相关元素的id属性才能将它们绑定在一起。 »

您观察到了。因此应该没有任何问题。

Answer 2

这是不可访问的，因为它需要单击一个项目才能查看其描述。

这不适用于屏幕阅读器。

屏幕阅读器将希望同时找到两个元素的替代文本，并且描述是不可见的，一个总是没有替代文本。

是否可以在<input />控件布局之外的其他嵌套级别中使用<label>？

2 个答案: