Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • 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
  • Bootstrap
  • bootstrap
  • Issues
  • #13556
Closed
Open
Issue created May 09, 2014 by Administrator@rootContributor

Improve accessibility for the carousel plugin

Created by: bassettsj

I do like that the carousel is discouraged entirely if you care at all about accessibility, which you should, but if bootstrap is going to still support the thing, can we look at including the changes from Paypal's a11y bootstrap plugin?

Carousel

1.Prevent automatic cycling of the carousel. 2. Prevent wrapping to first item on next button navigation or wrapping to last item on previous button navigation. 3. Add role of listbox for carousel div. 4. Add ARIA role of option, aria-selected, and tabIndex for individual carousel items. 5. Add role of button for previous and next anchor links and a hidden screen reader text of "Previous" and "Next". 6. Add keydown event listener for the carousel to work with keyboard. 7. Dynamically change tabIndex and aria-selected property of active and inactive tabs. 8. Remove display:none and hide (offscreen) of the inactive carousel items, so that screen readers can count the total number of carousel items.

Assignee
Assign to
Time tracking