We have moved to a new and improved knowledge base. This article is no longer updated. Please click here to find the new version. 

At Judge.me, we care about making our widgets accessible to everyone, including those with disabilities. 

In line with the Americans with Disabilities Act (ADA) and the UK government accessibility requirements, we have designed our widgets (Review Widget, Preview Badge and so on) to meet Level AA of the Web Content Accessibility Guidelines (WCAG) 2.1.

ON THIS PAGE

  1. What are ADA and WCAG 2.1?
  2. How does Judge.me meet Level AA of WCAG 2.1?
  3. Other considerations to meet Level AA of WCAG 2.1

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.

1. Review Widget, All Reviews Page, and Floating Reviews Tab

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

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

2. Preview Badge (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.
  • 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.

4. Verified Reviews Count Badge

  • 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:

1. Sufficient contrast level

2. Video transcription/captioning

3. Text alternatives for review photos

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

5. Words and phrases that people won’t recognize

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