CODEWITHSUNDEEP
javascriptangularaccessibilityscreen-readersjaws-screen-reader
Olal
Olal

Reputation: 1

How to add accessibility icon to screen reader like JAWS, Voice over and Talkback?

I get an assignment that want me to update the privacy page content. there is a heart icon on one of the key values in the content json file. this needs to be read by all the screen reader applications like JAWS, Voice over and talk back

this is how I approach the problem.

I added span to the json file span <span class="sr-only">heart</span>

And then added class in the to the css :

.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

expected Behaviour Icon should be read by screen reader like JAWS, Voice over and Talkback

Actual behaviour it is only read by NVDA

Upvotes: 0

Views: 591

Answers (1)

slugolicious
slugolicious

Reputation: 17593

The heart icon usually means you want to mark an item a "favorite". You don't have to literally use text that describes the shape of the icon. Instead, you should use text that describes the purpose of the icon. In this case, something like "mark as favorite".

Most heart icons are also interactive. You can click on them with a mouse and it changes the heart icon from an empty/outline shape to a filled shape. The icon must be keyboard focusable (using the tab key) and selectable (space or enter). That's typically done by making the icon a real <button>.

If you use the <button> element with a nested <img> for the icon, then specify an alt attribute for the <img> that says "mark as favorite". You'd have something like this:

<button>
   <img src="heart.jpg" alt="mark as favorite">
</button>

To be complete, you'd probably have a different image when the heart is selected so you'd want the alt text to indicate that selecting the heart again will clear the item as a favorite.

<button>
   <img src="filledheart.jpg" alt="clear as favorite">
</button>

A second solution is to use aria-pressed to have a toggle button. You'd toggle the attribute value between true/false (and toggle the icon between empty and filled).

A third solution is to make the heart a checkbox. The heart is essentially checked or unchecked (filled or empty) so a checkbox/switch fits the paradigm.

Upvotes: 2

Related Questions