屏幕阅读器、标签和 select 菜单

Question

我目前正在编写 select 个没有任何标签的菜单。对于屏幕 reader 读取 "expiration month" 和 "expiration year" 的 select 菜单，我应该使用哪个属性？

<div class="flex-exprdate">
<select id="expirymonth" name="expirymonth">
    <option value="01">01</option>
</select>
/20
<select id="expiryyear" name="expirydate">
    <option value="20">20</option>
</select>

Answer 1

没有label标签时，使用aria-label属性

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Answer 2

已接受的答案虽然在技术上是正确的，但并不是实现最大兼容性的最佳答案。

您可能会感到惊讶，但屏幕阅读器对 WAI-ARIA 的支持并不出色 - 例如 IE and NVDA doesn't work correctly in Reading Mode 用于标签和输入组合（而 'System To Go' 在全部——尽管它的使用率现在只有 2% 左右。

相反，您应该使用关联标签（使用 for="inputID"）。

为确保这不会干扰设计，您应该 'visually hide' 此标签在下面的示例中使用 'visually-hidden' class。

这将具有更高的兼容性，因此更易于访问。

可访问性的黄金法则：

WAI-ARIA should be used when there is no way to expose accessibility information using semantic HTML or to provide additional information that cannot be provided via semantic HTML but will add value to the end user.

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

<div class="flex-exprdate">
<label for="expirymonth" class="visually-hidden">Expiry Month</label>
<select id="expirymonth" name="expirymonth">
    <option value="01">01</option>
</select>
/20
<label for="expiryyear" class="visually-hidden">Expiry Year</label>
<select id="expiryyear" name="expirydate">
    <option value="20">20</option>
</select>
</div>

屏幕阅读器、标签和 select 菜单

Screen readers, labels and select menus

html

web-accessibility