The button

The bad

❌

Source code

<a class="BadButton" href="#">
    ❌
</a>

<style>
    .BadButton {
        cursor: pointer;
        padding: 10px;
        font-size: 18px;
        vertical-align: middle;
        text-decoration: none;
        color: black;
        background-color: white;
        border: 1px solid lightgray;
        border-radius: 5px;
    }

    .BadButton:hover {
        background-color: lightgray;
    }
</style>

What's wrong with this?

The button is an <a>, but should, of course, be a <button>.
There are no :focus styles.
Voice Over reads this as "cross mark".
There is no text describing what the button does.

The good

Show solution

Source code

<button type="button" class="GoodButton">
    <span aria-hidden="true">❌</span> close
</button>

<style>
    .GoodButton {
        cursor: pointer;
        padding: 10px;
        font-size: 18px;
        vertical-align: middle;
        text-decoration: none;
        color: black;
        background-color: white;
        border: 1px solid lightgray;
        border-radius: 5px;
    }

    .GoodButton:hover,
    .GoodButton:focus {
        background-color: lightgray;
    }
</style>

Improvements

Use <button> to indicate interactivity.
Use :focus selector as well as :hover.

Label the button by doing one of the following:

Add text to the button.
Use the aria-label attribute.

Use visually hidden text:

.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
}

Stop Voice Over from reading the icon:
- If the icon is text or emoji, use a <span> with aria-hidden="true".
- If the icon is an image, use role="presentation".