Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • A a11yproject.com
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 40
    • Issues 40
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 10
    • Merge requests 10
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • The A11Y Project
  • a11yproject.com
  • Issues
  • #906
Closed
Open
Issue created Mar 14, 2020 by Administrator@rootContributor

Inaccuracy: duplicate `id` in getting started with aria `code` example

Created by: kameronahler

Summary

I believe the Getting Started with ARIA article has a duplicate id in the "Role, state, and property together in a Tab control" section's code example.

Expected

  <div role="tablist">
    <button role="tab" aria-selected="true" aria-controls="panel_1">Apples</button>
	
    <!-- the proceeding button should correspond with an element with an id of panel_2 -->
    <button role="tab" aria-selected="false" aria-controls="panel_2" tabindex="-1">Oranges</button>
  </div>
  <div id="panel_1" aria-label="Apples" role="tabpanel" tabindex="0">...</div>
  
  <!-- presumably the following element -->
  <div id="panel_2" aria-label="Oranges" role="tabpanel" hidden>...</div>

Actual

  <div role="tablist">
    <button role="tab" aria-selected="true" aria-controls="panel_1">Apples</button>
    <button role="tab" aria-selected="false" aria-controls="panel_2" tabindex="-1">Oranges</button>
  </div>
  <div id="panel_1" aria-label="Apples" role="tabpanel" tabindex="0">...</div>
  <div id="panel_1" aria-label="Oranges" role="tabpanel" hidden>...</div>
Assignee
Assign to
Time tracking