accessible attribute for rating for all people

Question

I am trying to add accessiblity attribute to my OverallRating stars... can you tell me what attribute should i need to add... I added arial label with value given to that attribute... but its not working... can you tell me what i need to add.. providing my code below...

this is my generated code

<div class="OverallRating" aria-label="0"><i class="OverallRating__star small-star"></i>
    <div class="OverallRating__filled" style="width: 0%;"><i class="OverallRating__star small-star"></i>
    </div>
</div>

Answer 1

Certainly you would want to keep the aria-label attribute, but probably also add a simple title attribute:

{ 'title': 'Your hover text' }

Different browsers and accessibility software read different attributes (or the order they are read is different).

Answer 2

The aria-label attribute as such is correct, assuming you wish to label the element with the string “0”. But support to it in browsers and assistive technologies varies.

If you additionally use the attribute title="0", there may be some more support, since the title attribute is old and may have better support. However, many assistive technologies speak its value only optionally, depending on user settings that are often off by default.

To make the code accessible, it needs to be redesigned. It now solely relies on style sheets. With style sheets disabled, the content is completely empty. A better way is to use images. Most accessibly, you would create, say, six images representing 0 tp 5 stars, with adequate alt attributes, e.g. <img src="stars0.png" alt="no stars">.