Opened 5 years ago

Closed 3 years ago

#2409 closed change (fixed)

Make tabs on new options page more accessible

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

https://codereview.adblockplus.org/29348642/

Description (last modified by greiner)

Background

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

What to change

Set attributes

  • Mark the navigation bar as such using the <nav> element
  • Mark the tab list as such using the role="tablist" attribute
  • Mark the tabs as such using the role="tab" attribute
  • Mark the tab contents as such using the role="tabpanel" attribute
  • Associate tabs with tab contents using the aria-controls and aria-labelledby attributes
  • Make tabs focusable by replacing them with focusable elements and/or by setting the tabindex attribute

Handle keys

  • Switch between tabs when pressing Left, Up, Right or Down while focus is on tab
  • Make sure that only the active tab is in the tab order

Updating attributes

  • Mark selected tab with the attribute aria-selected and update its value when switching to a different tab
  • Mark tab content containers with the attribute aria-hidden and update its value when switching to a different tab

Note that these changes should not only be applied to tabs in the sidebar but also to the tabs under the "Blocking lists" section in the Advanced tab.

Change History (7)

comment:1 Changed 5 years ago by greiner

  • Blocked By 1524 added

comment:2 Changed 4 years ago by greiner

  • Description modified (diff)
  • Tester set to Unknown

comment:3 Changed 4 years ago by greiner

  • Description modified (diff)
  • Owner set to greiner

comment:4 Changed 4 years ago by greiner

  • Description modified (diff)

comment:5 Changed 4 years ago by greiner

  • Description modified (diff)

Updated ticket based on WAI-ARIA authoring practices.

comment:6 Changed 3 years ago by abpbot

A commit referencing this issue has landed:
Issue 2409 - Improved accessibility of tabs in options page

comment:7 Changed 3 years ago by greiner

  • Resolution set to fixed
  • Review URL(s) modified (diff)
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.