Opened 5 years ago

Closed 4 years ago

#2408 closed change (fixed)

Make checkboxes on new options page more accessible

Reported by: greiner Assignee: greiner
Priority: P2 Milestone:
Module: User-Interface Keywords: a11y 2016q1
Cc: sebastian Blocked By: #1524
Blocking: #2407 Platform: Unknown
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

https://codereview.adblockplus.org/29332808/

Description (last modified by greiner)

Background

In the current version of the new options page (see #1524) interaction with checkboxes is only possible using the cursor. Therefore we should implement standardized techniques to support screen readers and enable keyboard interactions.

What to change

  • Make custom checkboxes focusable by replacing them with focusable elements and/or by setting the tabindex attribute
  • Enable toggling of custom checkboxes with SPACE key
  • Add the following ARIA attributes to custom checkboxes
    • role="checkbox"
    • aria-checked="false"
  • Update the aria-checked attribute each time the value of the custom checkbox changes
  • The list item text should act as the label of the checkbox

Change History (7)

comment:1 Changed 5 years ago by greiner

  • Description modified (diff)
  • Keywords a11y added

comment:2 Changed 5 years ago by greiner

  • Blocked By 1524 added

comment:3 Changed 4 years ago by mario

  • Keywords 2015q4 added
  • Tester set to Unknown

comment:4 Changed 4 years ago by greiner

  • Owner set to greiner

comment:5 Changed 4 years ago by greiner

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:6 Changed 4 years ago by sebastian

  • Cc sebastian added
  • Keywords 2016q1 added; 2015q4 removed

comment:7 Changed 4 years ago by greiner

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.