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.

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

JAWS announces all modal contents as "clickable" #986

Closed
shadman2606 opened this issue Jul 18, 2018 · 5 comments
Closed

JAWS announces all modal contents as "clickable" #986

shadman2606 opened this issue Jul 18, 2018 · 5 comments

Comments

@shadman2606
Copy link

@shadman2606 shadman2606 commented Jul 18, 2018

Detailed description

We are using the Modal from Carbon Components in our product’s UI. We’ve been hit with an accessibility violation wherever we used the Modal component because the JAWS screenreader detects all the elements inside the modal, such as the header and any paragraphs, to be clickable and announces them as such. This should not happen as there are no click events bound to those elements.

We found that this is the case not just for modals in our UI but in the Carbon Components site (http://www.carbondesignsystem.com/components/modal/code) as well.

Is this issue related to a specific component?

Modal

What did you expect to happen? What happened instead? What would you like to see changed?

When JAWS reads non-interactive elements inside the modal such the header or a paragraph, it should just read the text inside those elements.

Currently, JAWS reads the text in the element and then says "clickable," which indicates that the element is interactive.

JAWS should just read the text and not announce "clickable" for non-interactive elements.

What browser are you working in?

Firefox 61.0.1

What version of the Carbon Design System are you using?

version 8.16.4

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

IBM Cloud Automation Manager

Need to fix accessibility issues and send it for another round of AVT before August 8th.

Steps to reproduce the issue

  1. Start JAWS screenreader
  2. Open website in Firefox
  3. Open a modal and have the screenreader read through its contents

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.

@carmacleod

This comment has been minimized.

Copy link

@carmacleod carmacleod commented Aug 14, 2018

JAWS (and NVDA) announce "clickable" when an element or one of its ancestors has a click event handler. (Seems to be worse in Firefox - not sure why).

For example, "clickable" is announced each time a JAWS user presses down arrow to read the p lines in the following div:

	<div onclick="">
	<p>The quick brown fox</p>
	<p>jumps over the lazy dog.</p>
	</div>

So since the "bx--modal" dialog container has a click handler, and since it's the parent of the "bx--modal-container", this is why the problem is happening.

Consider adding an overlay node that’s a sibling to the bx--modal-container and have that be the one that accepts click events to close the modal.

In case it's helpful, here's a (slightly old, but still mostly valid) video showing how to make an accessible modal dialog.

This video shows how to fix other accessibility problems that the Carbon modal dialogs have as well, such as screen reader users being able to accidentally move outside of the dialog just by typing their reading keys (for example, down arrow). Need to also make sure that shift+tab is trapped in the dialog (in the same way that typing tab is).

@asudoh

This comment has been minimized.

Copy link
Member

@asudoh asudoh commented Aug 14, 2018

Hi @carmacleod thank you for your insights on this topic! Your insights suggesting a potential issue with JAWS with "event delegation" technique led me to https://webaim.org/discussion/mail_thread?thread=7693

Though I haven't had time to fully read the discussion thread, some posts seem to allude that having a proper role may fix the issue (though I'm not sure if it's true or not). Wondering if you have any insights on how to make an application with "event delegation" technique work well with JAWS? Thanks!

@carmacleod

This comment has been minimized.

Copy link

@carmacleod carmacleod commented Aug 15, 2018

Hi @asudoh! Definitely try adding role="dialog" to the bx--modal-container - that needs to be there anyhow. Not sure if that will help with the "clickable" problem, but it would give the screen reader a chance to get it right, so definitely worth a try!

Note that a properly marked up ARIA dialog needs more than just a role. Please see the section on dialog in the ARIA APG, and note that you need:

  • role="dialog"
  • aria-modal="true"
  • aria-labelledby="the id of the dialog title element" OR aria-label="the dialog title string"
    (not sure if this would be your "Optional label" or your "Modal heading" but it is not optional... ;)
  • aria-describedby="either the optional label or the modal heading, whichever one you didn't use for the aria-label" (this one is optional, and people usually use it to point to the paragraph, but since you have 2 titley-things, you could use it for one of those... or you could concatenate the "Optional label" and "Modal heading" with a space between and use both of them for the aria-label...)

(Note that the aria-label[ledby] will be read before the aria-describedby).

If you like, I can test this for you in JAWS and NVDA after you mark it up. (I did not try VoiceOver to see if it says "clickable").

asudoh added a commit to asudoh/carbon-components that referenced this issue Aug 21, 2018
alisonjoseph added a commit that referenced this issue Aug 22, 2018
Fixes #986.
@carbon-bot

This comment has been minimized.

Copy link
Collaborator

@carbon-bot carbon-bot commented Aug 22, 2018

🎉 This issue has been resolved in version 9.8.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@carmacleod

This comment has been minimized.

Copy link

@carmacleod carmacleod commented Aug 22, 2018

Awesome! I look forward to trying this out. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.