Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab structure does not use tab semantics #15287

karlgroves opened this issue Apr 30, 2019 · 3 comments


4 participants
Copy link

commented Apr 30, 2019

Tab structure does not use tab semantics

  • Severity: Medium
  • Affected Populations:
    • Blind
    • Low-Vision
    • Motor Impaired
    • Cognitively Impaired
  • Platform(s):
    • Windows - Screen Reader
    • Windows - ZoomText
    • Windows - Dragon
    • Mac - VoiceOver
    • Android - TalkBack
    • iOS - VoiceOver
  • Components affected:
    • Media Dialog

Issue description

In the "Featured Image" modal dialog, two links are used to switch
views (between the "Media Library" and the "Upload Files" panels).
These are coded as links with redundant href attributes ("#"),
which is not semantically valid, and does not convey the
currently-active link to assistive technologies.

The choice of button vs link has a significant effect on user
expectations for assistive technology users: links convey the
expectation that the browser will navigate to a different location or
page, which standard buttons do not. The difference also affects what
keys can be used within assistive technologies to navigate between the
elements, and which page summaries the element appears in (for example,
it won't show up in a list of all form elements on the page).

Semantic markup is vital for assistive technology users, to convey the
structure and relationships between information. When appropriate
semantic markup is not used, it may be more difficult for such users to
understand what the content means, and to comprehend the structure that
the visual presentation conveys.

Issue Code
    <div class="media-router">

        <a href="#" class="media-menu-item active">Upload Files</a>

        <a href="#" class="media-menu-item">Media Library</a>


Remediation Guidance

The visual presentation of the content within the "Featured Image"
dialog is a tab panel. Using the [tab panel pattern]
( will give the
elements proper roles, and using aria-selected will allow users of
assistive technologies to know which tab is currently selected.

Recommended Code
    <div role="tablist" class="media-router">

        <button role="tab" aria-selected="true" class="media-menu-item active">Upload Files</button>

        <button role="tab" class="media-menu-item">Media Library</button>


Relevant standards

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-58 in Tenon's report


This comment has been minimized.

Copy link

commented May 1, 2019

Worth noting the media modals aren't part of Gutenberg. This issue should be moved to the core Trac under the Media component.

Aside: I'm wary about using a tab interface when there are just 2 "tabs", as it tends to make keyboard interaction more complicated. Instead, it definitely helps when there are many tabs as it significantly reduces the amount of tab stops. With only 2 tabs, the missing information could be provided by other means.

@melchoyce melchoyce moved this from To do to Move to Trac in Accessibility Audit May 5, 2019


This comment has been minimized.

Copy link

commented May 6, 2019


This comment has been minimized.

Copy link

commented May 6, 2019

Closing as moved to Trac.

@afercia afercia closed this May 6, 2019

Accessibility Audit automation moved this from Move to Trac to Closed May 6, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.