时间戳

首页 > 解决方案 > 使用令人敬畏的字体提高可访问性来传达含义

html - 使用令人敬畏的字体提高可访问性来传达含义

问题描述

我应该在这个 html 片段中添加什么来提高可访问性并允许禁用的用户理解“否”列表项旁边的检查的含义？

    <h5>Selected Answer</h5>
    <ul>
        <li>Yes</li>
        <li>No <i class="fas fa-check"></i></li>
    </ul>

标签： htmlaccessibility

解决方案

根据评论，OP 决定使用语义正确的 HTML 是一个更好的选择（几乎总是这样）。这方面的一个示例位于第 2 级标题“您确定您的语义正确吗？”下。进一步降低这个答案。

下面的小提琴将向您展示如何做到这一点。

首先，我们添加aria-hidden到图标以将其从屏幕阅读器/辅助设备中隐藏。

然后我们在列表项中添加一些视觉上隐藏的文本，说明这是选定的项。

我在小提琴中包含的 CSS 是视觉隐藏文本的最强大的方式（因此只有辅助技术才能看到它）。

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script>
<h5>Selected Answer</h5>
    <ul>
        <li>Yes</li>
        <li>No <i class="fas fa-check" aria-hidden="true"></i><span class="visually-hidden">(selected)</span></li>
    </ul>

你确定你的语义是正确的吗？

我们看不到您的用例，但不应该禁用单选按钮（假设这是显示一组问题的结果，显然如果是实际问题，则不要禁用单选按钮。）

这将为您节省大量工作并带来更好的体验，因为所有功能都内置于语义元素中。使用一些自定义 CSS，您可以使它看起来很漂亮，并且在语义上是正确的。下面的快速示例。

<fieldset>
<legend>Selected Answer</legend>
  <div>
    <input type="radio" name="answer" id="yes" value="yes" disabled>
    <label for="yes">Yes</label>
  </div>
  <div>
    <input type="radio" name="answer" id="no" value="no" checked disabled>
    <label for="no">No</label>
  </div>
</fieldset>

推荐阅读