Overview

The checkboxes within the review changes widget have several issues:

  • The border in unchecked state has a color of color(display-p3 .908 .908 .908) against #fff which results in a contrast of 1.23:1 (https://www.oddcontrast.com/#p3__color(display-p3_0.908_0.908_0.908)__color(display-p3_1_1_1), the required minimum for SC1.4.11 is at least 3:1
  • The dimensions of a single checkbox element are 14px by 16px, the required minimum target size to meet SC2.5.8 is 24px by 24px

    the dialog for unpublished changes popup in drupal canvas showint the about us and blog pages with unsaved changes

  • It is not possible to change the state of a checkbox by pressing the space key
  • If a checkbox is ticked/unticked the new state is not announced by the screenreader (tested in VoiceOver - see state_change.mp4)
  • It is not possible to navigate within the checkbox group by left/up arrow and right/down arrow https://handreichungen.bfit-bund.de/accessible-uie/checkbox.html#use-of-...

Discussed and worked on the issue with @the_g_bomb and @itmaybejj

Proposed resolution

  • Increase the color contrast of the checkbox border in unchecked state to at least 3:1
  • Increase the target size of the checkboxes to at least 24px by 24px
  • Make sure it is possible to change the state of the checkbox by pressing the space key
  • Make sure it is possible to navigate in between checkboxes by left/up arrow and right/down arrow
  • Ensure that the new state a checkbox changes to is announced as well (a working example is the CodePen on https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/

User interface changes

CommentFileSizeAuthor
checkboxes.jpg28.5 KBrkoller
state_change.mp4664.81 KBrkoller

Comments

rkoller created an issue. See original summary.

rkoller’s picture

Issue summary: View changes