Special and Non-Alpha Numeric Characters

Screen readers in their default settings MAY NOT identify special and non-alpha numeric characters such as emojis, symbols, punctuations, emoticons, and so on. Hence, the correct meaning of these characters IS NOT conveyed to screen reader users.

Webpage screenshot with examples of special characters — Figure 1 Example of webpage containing special and non-alpha numeric characters

NOTE:

New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.

It is advisable to provide alternatives to special characters so that screen reader users understand the meaning correctly.
Special characters that represent visual meaning and are announced incorrectly SHOULD have descriptive textual description defined using aria-label attribute along with role="img". Alternatively, it can be hidden by providing aria-hidden="true" for the container in which it is coded and hidden off-screen text conveying additional information can be provided.
Special characters coded using <img> element SHOULD have descriptive textual description using alt attribute.
Special characters coded using <svg> element or any other CSS classes should have descriptive textual description via aria-label attribute.
For example,
```
<img src="smiling-hearteyes.png" alt="Smiling face with heart shaped eyes">
```
Decorative icons or special characters which do not convey any meaning and functionality SHOULD be hidden to screen reader users by specifying aria-hidden="true" attribute.

To learn more about which symbols require special handling, please read Deque’s blog post, Why Don’t Screen Readers Always Read What’s on the Screen? Part 1: Punctuation and Typographic Symbols. .

<h2>Learning Platforms</h2>
<div class="cards">
    <article class="card reorder">
        <h2><a href="#" id="cardtitle2">MyLab</a></h2>
        <img src="../common-images/woman-working-with-laptop-190x95.jpg" alt="" loading="lazy" width="190" height="95">
        <p>
            <a href="#">Sign in <span aria-hidden="true">&#62;</span></a>
            <a href="#">Discover MyLab<sup><span>&reg;</span></sup> <span aria-hidden="true">&#62;</span></a>
        </p>
    </article>

    <article class="card reorder">
        <h2><a href="#" id="cardtitle1">Mastering</a></h2>
        <img src="../common-images/woman-working-with-laptop-on-couch-190x95.jpg" alt="" loading="lazy" width="190" height="95">
        <p>
            <a href="#">Sign in <span aria-hidden="true">&#62;</span></a>
            <a href="#">Discover Mastering<sup><span>&reg;</span></sup> <span aria-hidden="true">&#62;</span></a>
        </p>
    </article>

    <article class="card reorder">
        <h2><a href="#" id="cardtitle3">Revel</a></h2>
        <img src="../common-images/man-looking-at-phone-on-public-transit-190x95.jpg" alt="" loading="lazy" width="190" height="95">
        <p>
            <a href="#">Sign in <span aria-hidden="true">&#62;</span></a>
            <a href="#">Discover Revel<sup><span>&reg;</span></sup> <span aria-hidden="true">&#62;</span></a>
        </p>
    </article>
</div>
<p class="center">Pearson<span >&#43;</span> eTextbooks for <span>&#36;</span>10.99<span>&#47;</span>mo</p>

<footer class="center">
    <p>Copyright <span>&copy;</span> 1996–2023 Pearson All rights reserved.</p>
</footer>

ul { list-style-type: none; }

.cards {
    flex: 0 1 60%;
    margin-right: 20px;
}

.cards h2 {
    font-size: 24px;
    margin: 10px 0;
    color:rgb(0, 102, 204);
}

.cards p {
    font-size: 16px;
    line-height: 1.5;
}

main {
    margin: 20px;
    padding: 20px;
}

.cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cards > * { flex: 0 1 14em; }

.cards .card {
    margin: .75em;
    padding: .75em;
    border: 2px #ccc solid;
    border-radius: .6em;
    background-color: white;
    position: relative;
    padding: 10px 15px;
}

img {
    width: 100%;
    height: auto;
}

.reorder {
    display: flex;
    flex-direction: column;
}

.reorder img {
    max-width: 100%;
    order: -1;
}

.cards > * a {
    display: block;
    color: rgb(0, 102, 204);
}

.cards h2 > a { text-decoration: none; }

article:hover { box-shadow: 0 0 0 0.25rem; }

.center { text-align: center; }

Learning Platforms

MyLab

Mastering

Revel

Pearson+ eTextbooks for $10.99/mo

Special and Non-Alpha Numeric Characters

Implementation

Why is it important

Working Example