Opened on 04/23/2015 at 12:17:43 PM

Closed on 07/26/2016 at 04:27:50 PM

#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):

Description (last modified by greiner)


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.

Attachments (0)

Change History (7)

comment:1 Changed on 04/23/2015 at 02:04:02 PM by greiner

  • Blocked By 1524 added

comment:2 Changed on 07/14/2015 at 02:38:23 PM by greiner

  • Description modified (diff)
  • Tester set to Unknown

comment:3 Changed on 07/14/2015 at 05:27:25 PM by greiner

  • Description modified (diff)
  • Owner set to greiner

comment:4 Changed on 12/17/2015 at 05:47:07 PM by greiner

  • Description modified (diff)

comment:5 Changed on 01/20/2016 at 04:09:42 PM by greiner

  • Description modified (diff)

Updated ticket based on WAI-ARIA authoring practices.

comment:6 Changed on 07/26/2016 at 04:27:17 PM by abpbot

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

comment:7 Changed on 07/26/2016 at 04:27:50 PM by greiner

  • Resolution set to fixed
  • Review URL(s) modified (diff)
  • Status changed from new to closed

Add Comment

Modify Ticket

Change Properties
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from greiner.
Note: See TracTickets for help on using tickets.