0

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>
Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57
Oliver Lorton
  • 709
  • 1
  • 6
  • 21

2 Answers2

2

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>
Community
  • 1
  • 1
GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • Why use custom CSS when FA gives us a pre existent class `sr-only` that does the job and is meant to be used for accessibility uses? – Alexandre Elshobokshy Jun 12 '20 at 08:39
  • 1
    Oh because the `sr-only` class isn't as robust as the above example, I will see if I can find the information for you. – GrahamTheDev Jun 12 '20 at 08:44
  • 1
    https://stackoverflow.com/a/62109988/2702894 here is my answer on it that explains, as far as I am aware this is identical to the one used by font awesome. – GrahamTheDev Jun 12 '20 at 08:48
  • 1
    Well fair enough ;) – Alexandre Elshobokshy Jun 12 '20 at 08:52
  • @GrahamRitchie I think you were correct to ask whether my sematics are correct. Since this is verry different to your first solution, should you split it into it's own answer so that I can mark it as the solution that I used? – Oliver Lorton Jun 12 '20 at 09:08
  • I will add something to the top that says you chose the second part as I think they sit together. Let me know if you think it is sufficient. Glad it was useful! – GrahamTheDev Jun 12 '20 at 09:11
1

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
  <i class="fas fa-check" aria-hidden="true" title="Description goes here"></i>
  <span class="sr-only">Description goes here</span>
</li>

Source

Alexandre Elshobokshy
  • 10,720
  • 6
  • 27
  • 57