At Judge.me, we are committed to ensuring that our widgets are accessible to everyone, including individuals with disabilities.
We have taken steps to align our widgets, such as the Review Widget and Star Ratings, with Level AA of the Web Content Accessibility Guidelines (WCAG) 2.1, in accordance with the Americans with Disabilities Act (ADA) and UK government accessibility requirements.
Learn more about our compliance with ADA, WCAG, and other regulations.
1. What is ADA and WCAG 2.1?
The Department of Justice published the ADA Standards for Accessible Design in September 2010. These standards state that all electronic and information technology must be accessible to people with disabilities.
The WCAG is a set of guidelines about how to make web content more accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. For instance, allowing text-to-speech readers to verbalize the elements on a web page.
The most current version of guidelines, WCAG 2.1 is based on four design principles:
Perceivable: Ensuring users can recognize and use your service with the senses that are available to them.
Operable: Ensuring users can find and use your content, regardless of how they choose to access it (for example, using a keyboard or voice commands).
Understandable: Ensuring people can understand your content and how the service works.
Robust: Ensuring your content can be interpreted reliably by a wide variety of user agents (including reasonably outdated, current, and anticipated browsers and assistive technologies).
2. How does Judge.me meet Level AA of WCAG 2.1?
To ensure that our widgets meet Level AA of WCAG 2.1, we have:
Added labels to the elements of our widgets so screen readers can describe these elements in a meaningful way.
Made all clickable links/buttons keyboard accessible.
Made focus appropriately changed after a click.
Set good color contrast for all default themes.
*Note: you can use tools such as WAVE and Lighthouse to test the accessibility of our widgets.
Review Widget, Reviews Page, and Floating Reviews Tab
Reviews display section
Social sharing buttons, upvote buttons, subtabs, pagination, sort-by drop-down, and histogram are accessible through a keyboard.
The pagination button is refocused when you click on a new review page. The star ratings displayed in the reviews are also focused when you click on them.
Either label or aria-labels have been added to all star ratings in the reviews so screen readers can detect them.
Reviews submission form
Either label or aria-labels have been added to all inputs in review and question forms so screen readers can detect them.
Either special HTML tags or aria-labels have been added to group the multiple-choice answers in the custom forms together. This helps a screen reader knows that these answers belong to the same question.
Submit button is provided to complete the review and question forms.
Aria-expanded labels have been added to the "Write a review" and "Ask a question" buttons. This helps a screen reader knows whether the submission form is disclosed or hidden (upon clicking on the buttons).
The text description is provided to identify required fields that were not completed, or when user input falls outside the required format or values in the review and question forms.
Aria-describedby attributes have been added to associate the form inputs and corresponding error messages so a screen reader can detect them.
*We also made specific compliances for the form that opens via a Picture-first template or a Stars block in the custom email templates:
The star ratings, radio buttons, the "Next"/"Back" buttons, and photo/video uploading fields are accessible through a keyboard.
The first visible input field is focused when going to the next and previous steps of the form.
Star Ratings
The star ratings are accessible through a keyboard.
The star ratings displayed on the collection page and product pages are focused when you click on them.
Aria-labels have been added to all star ratings displayed on the collection page and product pages so that a screen reader can detect the average ratings.
Reviews Carousel
The carousel arrows are accessible through a keyboard.
The star ratings displayed on each review in the carousel are focused when you click on them.
Aria-labels have been added to all star ratings displayed on each review in the carousel so that a screen reader can detect the average ratings.
Verified Reviews Counter
Alternative text has been added to the image of the badge so the screen reader can detect your badge, and the search engine can index it properly.
3. Other considerations to meet Level AA of WCAG 2.1
Our widgets are designed with the four principles of WCAG 2.1 in mind, but if you add your own CSS customizations, such as changing color or adding additional functionality, this may breach compliance. Additionally, there is some content within our widgets that we are unable to control, that you as the merchants are responsible for such as user-generated content or review content.
If compliance is a requirement for your store, make sure your customizations and content are compliant with Level AA of WCAG 2.1.
Here are some important criteria that you recommend you to take a closer look at:
Sufficient contrast level
By default, we have set a sufficient contrast level between the text and the background color of our widgets and themes.
If you would like to customize the color, please check your contrast ratio to make sure that the widgets still qualify for Level AA.
Video transcription/captioning
Our app doesn’t add transcripts/captions to your review videos.
Since video captioning may be needed to qualify for Level AA, you can consider adding the transcripts/captions using third-party tools and reupload the videos by reimporting your reviews with a CSV file.
Text alternatives for review photos
Our app doesn’t add text alternatives to your review photos.
Since text alternatives may be needed to qualify for Level AA, we’ll create a space for you to upload the text alternatives for your review photos.
Blinking or flashing content
We recommend not using blink or flashing content on your site.
To get a better idea of how to make your content compliant with this rule, please check sufficient techniques by WCAG.
Words and phrases that people won’t recognize
We recommend not using words and phrases that people won’t recognize or providing an explanation if you can’t avoid it.
Abbreviations and acronyms
We recommend explaining all abbreviations and acronyms, unless they are well known and in common use, for example, UK, EU, USA, VAT.
If you need help with Judge.me widget ADA compliance, contact our team at [email protected]. We're available to help 24/7!