how does a screenreader treat the utf-8 checkmark character in a td of an HTML table?

Question

I have HTML tables in which checkmarks, within are used to indicate whether, say jam (column head, th) is available as (row th = flavor) grape, or strawberry.

The checkmark can be a gif, in which case the alt tag of the img tag tells a screenreader that this is a checkmark.

But suppose instead of an img, the utf-8 checkmark character is used. Does Jaws, for example, say "checkmark"?

Answer 1

In theory you should be able to use any UTF-8 character.

However in practice this can be "clunky" in some screen readers (reading "special character" "character name") and in some they are ignored entirely as they are assumed to be decorative. These tend to be less used screen readers, JAWS and NVDA both behave quite well.

With that being said, you are probably best using the following for how best to deal with special characters.

1. Is the special character purely decorative i.e. a smiley emoji - if yes hide it with <span aria-hidden="true">Your UTF-8 Character</span>.
2. If it isn't purely decorative, does the sentence / paragraph make sense without it? If yes, you are yet again probably best hiding it from screen readers. Or if you are willing to go the extra mile use step 3.
3. If the character is important / you want to offer a top notch experience for screen readers you should hide the special character as with steps 1 and 2 but then add a visually hidden span that contains the character description. An example of this is below.

One thing to note in the below example is I do not replace "checkmark" with text that says the same. Instead I replace it with the words that make most sense (which in your example was "available"). This provides the best possible experience to screen reader users.

.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 */
}

<p>
    <span aria-hidden="true">&#x2713;</span>
    <span class="visually-hidden">Available</span>
</p>

A better way for you to explore.

SVGs are likely to be a much better solution for this. They have built in semantics such as title and desc elements which you can use to expose information to screen readers.

Because they can be displayed inline you also don't have to worry about extra network calls.

If you want help on how to implement this ask another question and we can help you with that.