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>

You should show the relevant HTML code, not code that generates it. You should explain how the stars are presented (somehow with CSS presumably). The code should contain the attribute you have tried, and you should explain what you expected it to do and how that failed. “Not working” is not a problem description. — Jukka K. Korpela, Jul 18 '14 at 19:47
@JukkaK.Korpela: thanks for your reply..i added my genrated html...i am not able to hear the rating value — user1365117, Jul 18 '14 at 20:17

score 1 · Accepted Answer · answered Jul 18 '14 at 19:39

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).

answered Jul 18 '14 at 19:39

Cᴏʀʏ

105,112
20
162
194

thanks for your reply but whats the reason for adding title attribute...will it tell how much is the ratings – user1365117 Jul 18 '14 at 20:09

score 0 · Answer 2 · answered Jul 18 '14 at 21:18

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">.

accessible attribute for rating for all people

2 Answers2