Accessibility feedback - Comparison Tool Ratings

[1Copenut]

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Must

• The rating stars must pass color contrast. The darker gold color is recommended for clarity and readability
• Ratings by category must let users know the non-selected ratings categories are clickable. Could be underlined blue or some other means.

Should

• Ratings by category links should be far enough apart to allow users with motor issues or hand tremors to click / tap the rating they want. 22px is a minimum recommended distance between triggers.
• Model how the ratings by category widget will look and behave at mobile size. Feel free to reach out to Trevor for accessibility consult as you feel appropriate.
• Rating percentages should add up to 100% as much as possible. Some users (me for instance) would add the values and make sure they were relatively accurate.

Consider

• Consider moving the Add Rating modal to a full page. This modal is very long even on a tall screen and could cause problems for mid-size screens like laptops.
• What do you want your bar charts to announce to screen readers? Something like "5 star rating, 10% of 120 ratings?" Does it make sense to read out or show the percentage and raw numbers? Or maybe it's just a simpler "10% of all ratings are five star". I think this is a case where the aural readout might be slightly different from the visual presentation because of how data is perceived visually vs. aurally.
• The submit a rating stars are an interesting semantic structure challenge. My initial hunch is the Rating category and description could be a <legend> and the individual stars could be radio buttons. This might require a few iterations to get right, with respect to semantic meaning, and CSS behaviors. Thinking something like this pseudo-code:

  <fieldset>
  <legend>
  <strong>Ratings category 1</strong>
  Lorem ipsum dolor sit amet, consectetur adipiscing lelit, sed do eiusmod tempor
  </legend>
  <ul>
  <li>
    <input type="radio" name="rating1" value="1_star" id="rating1_1_star" />
    <label for="rating1_1_star">
      <span class="sr-only">One star</span>
      <svg aria-hidden="true">STAR SVG</svg>
    </label>
  </li>
  ...
  </ul>
  </fieldset>

Definition of Done

• Team responds to the ticket in comments or email
• Team schedules any requested follow up consults with accessibility specialist

[amyknox]

Thanks @1Copenut ! We'll review your input and let you know if we have any questions.

[1Copenut]

@amyknox You're welcome, glad it was helpful. I found this article Understanding Success Criterion 1.4.11: Non-text Contrast and thought it could be useful as you bring the ratings along. It's a WCAG 2.1 success criteria. Future proofing, but I think a good thing to consider because of the immediate user benefit.