So the problem is we're running some accessibility audits and unfortunately this area triggers a compatibility error:
"The visual label must appear in the accessible name of links and controls. WCAG 2.1 A F96 Section 508 (2017) A F96"
In a nutshell, it means what it says on tin, i.e. the standard expects visual and accessible names to match. What happens with your widget is it renders out a visual name '42 reviews' but because of the aria-label tag, an accessible name becomes '4.55 stars 42 reviews'.
This can be either solved by removing that aria-label altogether but this might break something else with accessibility I'm afraid. Another solution is to add a hidden <div> text before '42 reviews' saying '4.55 stars', i.e. to make a visual name '4.55 stars 42 reviews' where '4.55 stars' isn't printed out.
Andrey Khemmelis
Hi,
We have a store on Shopify and it's integrated with your widget. This is the inclusion code:
<div class="info">
<span class="title" itemprop="name">{{ product.title }}</span>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
That code renders a few bits & pieces like this:
<div style='' class='jdgm-widget jdgm-preview-badge' data-id='833728961'
data-template='collection'
data-auto-install='false'>
<div style='display:none' class='jdgm-prev-badge' data-average-rating='4.55' data-number-of-reviews='42' data-number-of-questions='0'> <span class='jdgm-prev-badge__stars' data-score='4.55' tabindex='0' aria-label='4.55 stars' role='button'> <span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--on'></span><span class='jdgm-star jdgm--half'></span> </span> <span class='jdgm-prev-badge__text'> 42 reviews </span> </div>
</div>
And notice this tag specifically and its aria-label:
<span class='jdgm-prev-badge__stars' data-score='4.55' tabindex='0' aria-label='4.55 stars' role='button'>
So the problem is we're running some accessibility audits and unfortunately this area triggers a compatibility error:
"The visual label must appear in the accessible name of links and controls. WCAG 2.1 A F96 Section 508 (2017) A F96"
In a nutshell, it means what it says on tin, i.e. the standard expects visual and accessible names to match. What happens with your widget is it renders out a visual name '42 reviews' but because of the aria-label tag, an accessible name becomes '4.55 stars 42 reviews'.
This can be either solved by removing that aria-label altogether but this might break something else with accessibility I'm afraid. Another solution is to add a hidden <div> text before '42 reviews' saying '4.55 stars', i.e. to make a visual name '4.55 stars 42 reviews' where '4.55 stars' isn't printed out.
Can you please help with this?
Thanks