Improve Accessibility Using Font Awesome To Convey Meaning

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?

Selected

Solution 1:

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(1px1px1px1px); /* 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 */
}

<scriptsrc="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 <iclass="fas fa-check"aria-hidden="true"></i><spanclass="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><inputtype="radio"name="answer"id="yes"value="yes"disabled><labelfor="yes">Yes</label></div><div><inputtype="radio"name="answer"id="no"value="no"checkeddisabled><labelfor="no">No</label></div></fieldset>

Solution 2:

The simplest way to provide a text alternative is to use the aria-hidden="true" attribute on the icon and to include the text with an additional element, such as a <span>, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title attribute on the icon to provide a tooltip for sighted mouse users.

<li>
  No
  <iclass="fas fa-check"aria-hidden="true"title="Description goes here"></i><spanclass="sr-only">Description goes here</span></li>