使用超棒的字体传达含义，提高可访问性 [英] Improve accessibility using font awesome to convey meaning

问题描述

我应该在此html代码段中添加些什么，以改善可访问性并允许残疾用户理解否"列表项旁边的检查的含义?

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

解决方案

根据评论，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> 

What should I add to this html snippet to improve accessibility and allow a disabled user to understand the meaning of the check next to the "no" list item?

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

解决方案

As per the comments the OP decided that using semantically correct HTML was a better option (which it nearly always is). An example of this is located under the level 2 heading "Are you sure your semantics are correct?" further down this answer.

The below fiddle will show you how to do this.

First we add aria-hidden to the icon to hide it from screen readers / assistive devices.

Then we add some visually hidden text within the list item that explains that this is the selected item.

The CSS I included in the fiddle is the most robust way of visually hiding text (so only assistive technology can see it).

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

Are you sure your semantics are correct?

We cannot see your use case but should this not be disabled radio buttons instead (assuming this is showing the results of a set of questions, obviously if it is the actual questions then don't disable the radio buttons.)

This would save you a lot of work and result in a far better experience as all of the functionality is built into semantic elements. With some custom CSS you can make this look pretty and it is semantically correct. Quick example below.

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

这篇关于使用超棒的字体传达含义，提高可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！