Bootstrap: Accessibility issues in brief.

[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

[patrickhlauke]

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

If things are already filed or have already been addressed in the repository (which is ahead of the web version on v4-alpha.getbootstrap), please do not re-file them in an issue. It simply adds noise and is confusing to maintainers (we currently have 213 open issues and 64 open pull requests) :)

[LaurenceRLewis]

No problem. To clarify the only thing previously mentioned is aria-modal on the role dialog attribute. My apologies for re-stating. Looking forward to reviewing when the next release is available. 😁

[LaurenceRLewis]

Update for accordion based on the repository version v-4

If this should be a PR please advise. I am new to commenting on Github :-)

https://github.com/twbs/bootstrap

The accordion design pattern is problematic in version 1.0 of the ARIA Authoring Practices guide. Version 1.1 updated the entire section that instructs developers to use ARIA Tabs for this purpose. This is due to a bug where blind users cannot differentiate between an accordion and a tab control.

The new design pattern consists of a heading with a standard link or button embedded within that includes aria-expanded to convey the expanded or collapsed state of the accordion, plus the optional markup of a region to convey the expanded section boundaries. There are no special key events attached since these are basic active elements and handled naturally by the browser.

The bootstrap accordion design pattern uses ARIA 1.0 design method.

It is important that you adope this construct, even though, it seems at this point you are not adopting ARAI 1.1 for accessibilty.

https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion1.html

[mdo]

@patrickhlauke Are all these valid issues that need addressing?

[meetbryce]

Worth noting that the default link color doesn't pass accessibility guidelines when < 18px.

http://www.aremycoloursaccessible.com/?background=%23fff&isLight=true&textColor=%23007bff

[patrickhlauke]

@meetbryce as noted here http://getbootstrap.com/docs/4.1/getting-started/accessibility/#color-contrast