Notifications indicator

The bad

Source code

<button class="BadNotificationToggle">
    🔔 5
</button>

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

    .BadNotificationToggle:hover,
    .BadNotificationToggle:focus {
        background-color: lightgreen;
    }
</style>

What's wrong with this?

Voice Over reads this as "Bell 5".

The good

Show solution

Source code

<button class="GoodNotificationToggle" aria-label="Notifications" aria-description="There are 5 new notifications">
    🔔 5
</button>

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

    .GoodNotificationToggle:hover,
    .GoodNotificationToggle:focus {
        background-color: lightgreen;
    }
</style>

Improvements

Use aria-label to describe the button.
Use aria-description for context, like the amount of notifications.