Blind and Visually Impaired Community
↑
7
↓
Accessibility question from a software engineer (self.Blind)
submitted by raleighvon
I am a software engineer and I'm putting a lot of effort into making the apps I work on accessible to as many people as possible. This is my motivating quote. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee
Sometimes it is not always clear to me how something should ideally work in order to be truly accessible and I am currently stumped by a third party component I am using in the app I maintain. It claims to be accessible but I am not sure that it is working correctly. I am hoping I may get some advice from someone on here to understand whether this third party component is working as expected and if not, I plan to contact this third party and let them know. The third party library is called "Bootstrap" and the component is their "modal" Here is the link to their component ($1). When I click on the button that launches the modal, it seems the screenreader is unaware the user is entering or exiting a modal. Am I a correct?
​
Here are the steps to recreate the experience:
On the page is a button titled "Launch demo modal".
Press that button.
The Modal launches.
Use voice over command with right arrow to navigate.
​
Is it expected behavior that the user can navigate outside the modal with these commands?
​
Thanks for your help in advance.
Sometimes it is not always clear to me how something should ideally work in order to be truly accessible and I am currently stumped by a third party component I am using in the app I maintain. It claims to be accessible but I am not sure that it is working correctly. I am hoping I may get some advice from someone on here to understand whether this third party component is working as expected and if not, I plan to contact this third party and let them know. The third party library is called "Bootstrap" and the component is their "modal" Here is the link to their component ($1). When I click on the button that launches the modal, it seems the screenreader is unaware the user is entering or exiting a modal. Am I a correct?
​
Here are the steps to recreate the experience:
On the page is a button titled "Launch demo modal".
Press that button.
The Modal launches.
Use voice over command with right arrow to navigate.
​
Is it expected behavior that the user can navigate outside the modal with these commands?
​
Thanks for your help in advance.
BlindGuyNW 4 points 4y ago
Okay. :) THis is kind of my jam, so let me see how it behaves.
Under NVDA on WIndows, the dialog behaves as expected. You can tab around it, but not access content that is obscured by it, nor can you access that content with the arrow keys or other less conventional methods.
WIth VoiceOver on Mac OS, there is an outstanding webkit bug,which means that it is technically possible to access content outside the modal by use of the VoiceOver cursor. THis is not expected behavior
That being said, the component itself is behaving as it should.
Under NVDA on WIndows, the dialog behaves as expected. You can tab around it, but not access content that is obscured by it, nor can you access that content with the arrow keys or other less conventional methods.
WIth VoiceOver on Mac OS, there is an outstanding webkit bug,which means that it is technically possible to access content outside the modal by use of the VoiceOver cursor. THis is not expected behavior
That being said, the component itself is behaving as it should.
raleighvon [OP] 2 points 4y ago
That is super helpful info. The one thing though is that we tested on Jaws using IE and got the same behavior so I'm not sure if it's a webkit bug.
LanceThunder 3 points 4y ago
I tested this using the NVDA screen reader and it seemed to work fine.
-
NVDA is an open source reader so if you have the ambition you can learn how to use it without too much effort. the benifit of this is that you can be truly confident that your work is accessible once you learn how to use it.
-
Disclaimer: I'm sighted and not a very experienced user of NVDA.
-
NVDA is an open source reader so if you have the ambition you can learn how to use it without too much effort. the benifit of this is that you can be truly confident that your work is accessible once you learn how to use it.
-
Disclaimer: I'm sighted and not a very experienced user of NVDA.
raleighvon [OP] 2 points 4y ago
Thanks Lance, I have tested on JAWS and and Mac OS built in ScreenReader. I was under the impression that the screenreader should prompt the user they are entering and exiting the modal and that doesn't seem to happen.
LanceThunder 3 points 4y ago
it reads the Modal title immediately after the modal is launched. i assume that is enough for a screen reader user to understand that the button press has resulted in the launch. though it is important to choose your modal title wisely.
-
if we can get a blind person to give an opinion it would remove all doubt though.
-
one quick accessibility tip. always be really careful about the hypertext you use in a link. Never use a URL for hypertext. Use text that is descriptive. $1
-
if we can get a blind person to give an opinion it would remove all doubt though.
-
one quick accessibility tip. always be really careful about the hypertext you use in a link. Never use a URL for hypertext. Use text that is descriptive. $1
Duriello 2 points 4y ago
I'm using NVDA on Windows and can confirm that the modal works fine. I can still read stuff outside the modal if I really want to by using NVDA's object navigation controls which work similarly to the VoiceOver cursor on MacOS, but that's not how people usually navigate web pages with NVDA, and I can not move system focus to anything outside the modal.
estj317 -1 points 4y ago
Er. This is really strange. I am a voice over user. I can probably test this with jaws at latest Monday. I use Jaws and a fair user. I am a bit rusty because I am a mac user.
I pressed a button but didn’t seem to do anything special. I guess it reads something it’s a bunch of codes. It didn’t announce anything special so I hope the button was pressed.
I pressed a button but didn’t seem to do anything special. I guess it reads something it’s a bunch of codes. It didn’t announce anything special so I hope the button was pressed.
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.