WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Star ratings


From: Mark Magennis
Date: Oct 26, 2021 9:24AM

For WCAG compliance, as long as the contrasts are sufficient you don't need to provide the rating value in text. But for maximum accessibility it is a good idea to do that if you can.

Be careful to consider the screen reader experience too with respect to how the text (or lack of it) is read. It must be absolutely clear what the rating is and there should be no repetition or unnecessary things read. It is more complex if the stars are buttons that you can use to make a rating, because then the whole thing should give all the information in a coherent way both while tabbing through it and while arrowing through it. It can all be made very coherent with a bit of careful design though.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Radhika Soni
Sent: 26 October 2021 14:33
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] [EXTERNAL] Star ratings

Appreciate all the responses.
And if the outline is not thick enough but has a contrast of 3:1. Is it ok to provide the rating in text next to stars? SO that color blind users can know what the rating values are.
Or can we skip the text part?

Thanks a lot!


On Tue, Oct 26, 2021 at 5:22 AM Mark Magennis < <EMAIL REMOVED> >

> There are two aspects to this - contrast against background and colour
> indicating state.
> In terms of contrast against background, if the star has an outline of
> a different colour and either the outline/background has sufficient
> contrast or the star/outline has sufficient contrast then it meets the
> WCAG contrast requirements. In practice, a thicker outline may make it
> easier for some users to perceive the contrast, but that is not taken
> into account in the requirements.
> But since the star colour is used to indicate state (checked or not
> checked), then a star sldo has to contrast against stars in the other
> state, so either the star colour should contrast or the outline should
> contrast (different thicknesses for example).
> The understanding article for WCAG SC 1.4.11 has a helpful example.
> https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
> Mark
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Radhika Soni
> Sent: 22 October 2021 16:13
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] [WebAIM] Star ratings
> Hi Everyone!
> I am looking at most of the sites for star rating they have on PLP and
> PDp pages. These star ratings fail for color contrast ratio.
> And some sites do have strokes around them, but not a thicker stroke.
> So do think the stroke would help to pass for color contrast ratio if
> the actual color of the star is failing for color contrast. Looking
> for everyone's feedback and viewpoints.
> [image: image.png]
> Happy Friday!
> Regards,
> -Radhika
> > > archives at http://webaim.org/discussion/archives
> >