Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Accessibility issues in brief.

Created by: LaurenceRLewis

Bootstrap 4 recommendations for accessibility. https://v4-alpha.getbootstrap.com/

Looking through current and closed issues some of these have been touched upon.

Modal

Issue: role="dialog" is missing required attributes.

Solution: A Dialog is a descendant window of the primary window, where initial focus goes to an element within the dialog. The container that includes role="dialog" must also include a valid label:

  • aria-label
  • aria-labelledby
  • aria-describedby is required to point to the message body for the Dialog text.

If the Dialog is meant to be modal, aria-modal="true" must be set on the container that contains role="dialog".

Recommendation remove role="document". Role=documents purpose is to negate the use of role="application" in limited circumstances.

Accordion

Issues

  • Aria-tab missing aria-selected attribute
  • Aria-tabpanel should not be nested within aria-tablist

ARIA attributes such as role="tablist" and role="tab" should not be included within an accordion. This is because the insertion of inline content would place dynamic content sections within the same Tablist container, making it impossible to determine the order of nested Tab controls when present within the inserted content

Tab controls

Issues

  • Aria-tab missing aria-selected attribute.
  • A Tab Control should have only one tab stop. The arrow keys are then used to switch focus between each Tab, and the ENTER or SPACE key is used to expand the desired Tab content panel.
  • To address current issues with IOS, where the correct number of tabs is not announced correctly by VoiceOver, include aria-setsize and aria-posinset, this will force the screen reader to announce the correct numbering.

A note about carousels

Expected behaviors: The beginning and ending boundaries should be conveyed to screen reader users. Role="region" aria-label="carousel". Note: content changes should be announced to screen reader users only when a navigation button is manually activated. All navigation buttons should be keyboard accessible and include unique accesskeys for screen reader users. Alt + 1 Previous slide alt + 2 next slide. Auto cycling should pause when an element within the carousel receives focus or when the mouse is moved into the region. Auto cycling should resume when focus moves out of the carousel or when the mouse moves out of the region, and auto cycling should be stoppable from anywhere on the page using the keyboard.

What is the time frame for the closed issues be applied to the examples? It would be good to run testing on the updated versions.

Thanks for building this great resource.

Cheers Laurence