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.

Sign up for GitHub

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

Jump to bottom

Bullet lists are not accessible in bootstrap modals. #15875

Closed
charroc1 opened this issue Feb 23, 2015 · 8 comments · Fixed by #16623
Closed

Bullet lists are not accessible in bootstrap modals. #15875

charroc1 opened this issue Feb 23, 2015 · 8 comments · Fixed by #16623
Assignees
@patrickhlauke
Labels
accessibility confirmed docs

Comments

@charroc1
Copy link

Bullet lists do not get read by screen readers. NVDA and JAWS both ignore bullet lists within modal popups.
@patrickhlauke
Copy link
Member

do you have a live example (on JSBin or similar) to test this in isolation, please?

@charroc1
Copy link
Author

After further investigation the issue lied with the role="dialog" on the main modal div. Here is a JSBin with an example: http://jsbin.com/vofati

There are two issues when role=dialog is present in the main modal div:

  • bullet lists are not read by screen readers at all
  • arrow keys cannot be used to navigate text in the modal

This was tested in NVDA 2014.4 with IE9, FF latest, and chrome latest.

@twbs-lmvtfy
Copy link

Hi @charroc1!

You appear to have posted a live example (http://jsbin.com/vofati/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

  • line 1, column 6: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.
  • line 53, column 50: Duplicate ID myModalLabel.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@charroc1
Copy link
Author

After further investigation the issue lied with the role="dialog" on the main modal div. Here is a JSBin with an example: http://jsbin.com/vofati

There are two issues when role=dialog is present in the main modal div:

  • bullet lists are not read by screen readers at all
  • arrow keys cannot be used to navigate text in the modal

This was tested in NVDA 2014.4 with IE9, FF latest, and chrome latest.

@twbs-lmvtfy
Copy link

Hi @charroc1!

You appear to have posted a live example (http://jsbin.com/vofati/edit), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

  • W001: <head> is missing UTF-8 charset <meta> tag
  • W002: <head> is missing X-UA-Compatible <meta> tag that disables old IE compatibility modes
  • W003: <head> is missing viewport <meta> tag that enables responsiveness
  • line 18, column 1: W007: Found one or more <button>s missing a type attribute.
  • line 45, column 1: W007: Found one or more <button>s missing a type attribute.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

@patrickhlauke
Copy link
Member

Confirmed...in general, role="dialog" switches assistive technologies into application mode. in this mode, normal reading keys are disabled, and structured content cannot be read/explored the same way as in a regular content region. One fix to this (if you do have structured content) is to explicitly add role="document" to the container with structured content.

This is either a documentation issue (the above needs to be written into our docs, with a second example using role="document"), and/or the default example/behavior may need to err on the side of already including role="document" all the time (though this will likely make dialogs behave slightly differently from "proper" native app dialogs...again, something to document).

Thanks for the heads-up on this.

@patrickhlauke patrickhlauke self-assigned this Feb 24, 2015
@kkirsche
Copy link
Contributor

@patrickhlauke when you say "...though this will likely make dialogs behave slightly differently from "proper" native app dialogs"..." what exactly do you mean? Sorry, just lack of familiarity on my part. I was looking at putting together a pull request for this but without a better understanding of the potential repercussions I'm not sure how to do that.

@patrickhlauke
Copy link
Member

going to pop this reference in here for now http://juicystudio.com/article/custom-built_dialogs.php and say that I'm not ignoring this issue...just haven't had a chance to come up with a sensible approach here. fundamentally, once using role="dialog" (or even role="alertdialog"), we should also require correct relationships with aria-describedby etc, as otherwise we do end up with problems of AT not seeing/announcing content, or doing so incorrectly.
wondering though if there are situations where developers use modal dialog components for something more than just a dialog/alertdialog...in those cases, it may be safest not to use any role at all, but I guess that can only be solved with extensive documentation and examples of when to apply which specific markup pattern...

@patrickhlauke patrickhlauke mentioned this issue Jun 11, 2015
Merged
@cvrebert cvrebert mentioned this issue Jan 29, 2016
Closed
@schnerd schnerd mentioned this issue Sep 25, 2018
Merged
@ryan-ludwig ryan-ludwig mentioned this issue May 21, 2020
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@patrickhlauke patrickhlauke

Labels
accessibility confirmed docs
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add role="document" to modal dialog content
4 participants
@patrickhlauke @kkirsche @twbs-lmvtfy @charroc1