On Mac voice over, it announces you are currently on radio button, X of 6.

[imnikhilp]

On Mac input no rate radio also considered.so instead of 5 it announces as 6 stars

[szynszyliszys]

Hi @imnikhilp, the "no-rate" input is optional. If you remove it, then VoiceOver will be announcing "x of 5", but unfortunately all stars will be highlighted as the default option and this is why the "no-rate" was introduced.

At the same time, in the current setup, the reader always says how many stars we are currently focusing, so even if it says "3 of 6", it will still announce "2 stars" (or whatever someone sets as label). I leave it to your judgement, what is more accessible here. Probably there is no way I could fix both of these problems at the same time.

[imnikhilp]

Hi @szynszyliszys ,
I have removed first no-rate input element from html then on page init using jquery/javascript add inline style (background-position : '0 0') for all the labels so that they will not be highlighted. jquery code - $('.starability-basic > input ~ label').css('background-position', '0 0').
When user selects first radio button, remove inline style from label which was added on page init.It worked for me.
$('.starability-basic > input[type=radio]').on('change',function(){
$('.starability-basic > input ~ label').removeAttr('style');
}
It's hack but as its working for user I used it

[szynszyliszys]

@imnikhilp Hi, I am happy that you made it work for yourself :)