Blind and Visually Impaired Community
↑
7
↓
Am I using the screen reader correctly? (self.Blind)
submitted by LovelySnoot
I'm a sighted person and I'm writing a web app that needs to be accessible and work with screen readers. I am testing with multiple screen readers such as NVDA on Windows and VoiceOver on Mac.
As an example, let's say I visit $1 using the NVDA screen reader. I can use the D key to navigate to the landmarks. There are two landmarks: the Main landmark which reads "Phone, email, or username" input and the Navigation landmark which has links like "About", "Help Center" and "Terms". I can also use the Tab key to cycle through focusable inputs. There are "Log in" and "Sign up" buttons that are reachable via this method.
What's confusing me is that there is text on the page that I don't know how to reach via screen reader. There is a list of text that says "Follow your interests", "Hear what people are talking about" and "Join the conversation". There's also a text that says "See what's happening in the world right now" and another that says "Join Twitter today". I tried to reach these texts via the H key but was not successful.
Am I just using the screen reader wrong and missing these texts? Or is normal for texts such as these to be unreachable via screen reader? How screen reader friendly would you say $1 is?
As an example, let's say I visit $1 using the NVDA screen reader. I can use the D key to navigate to the landmarks. There are two landmarks: the Main landmark which reads "Phone, email, or username" input and the Navigation landmark which has links like "About", "Help Center" and "Terms". I can also use the Tab key to cycle through focusable inputs. There are "Log in" and "Sign up" buttons that are reachable via this method.
What's confusing me is that there is text on the page that I don't know how to reach via screen reader. There is a list of text that says "Follow your interests", "Hear what people are talking about" and "Join the conversation". There's also a text that says "See what's happening in the world right now" and another that says "Join Twitter today". I tried to reach these texts via the H key but was not successful.
Am I just using the screen reader wrong and missing these texts? Or is normal for texts such as these to be unreachable via screen reader? How screen reader friendly would you say $1 is?
BlueImagination 3 points 3y ago
A good start would be to use Control + Home to move to the top of the screen, and then use the down arrow to explore down the webpage, one element at a time. The down arrow is certainly the slowest way to explore but it should be more holistic.
LovelySnoot [OP] 1 points 3y ago
Thanks! I was able to reach all of the texts via the down arrow.
How would you navigate a more complex site like $1?
How would you navigate a more complex site like $1?
CloudyBeep 2 points 3y ago
Normally people navigate by headings, unless there's a particular bit of information they're looking for, in which case they would use a PlaceMarker or use their screen reader's "find text" feature. Regions are good for breaking up the page, but each site uses them differently. Other navigation quick keys can be useful for navigating particular websites; for example, I frequently use a website for which it's best to navigate by graphics.
bradley22 0 points 3y ago
I agree.
You can change the settings in the NVDA menu
Press the Insert key or the capslock key, with the n key,
You should now be in the NVDA menu.
Press your down arrow and should hear settings, press enter and now you should be in the settings menu.
You can now arrow up anddown through the categories and use your tab key to go through the settings and space to press buttons or check/uncheck boxes.
If you come across list, use your up or down arrow.
You can change the settings in the NVDA menu
Press the Insert key or the capslock key, with the n key,
You should now be in the NVDA menu.
Press your down arrow and should hear settings, press enter and now you should be in the settings menu.
You can now arrow up anddown through the categories and use your tab key to go through the settings and space to press buttons or check/uncheck boxes.
If you come across list, use your up or down arrow.
Laser_Lens_4 2 points 3y ago
When I visit a new website I typically navigate by heading. If there aren't any then I navigate by links or buy edit boxes. If I'm going to be using a media heavy website like if I'm being a YouTube video or if I'm on a website where I know there is going to be text input, such as a login screen, then I will usually navigate by controls or form field elements. Once I reach something that sounds relevant to what I I want, I will move element by element to find exactly what I'm looking for.
Twitter is actually an exception here. When I use nvda I switch into focus mode and use the keystroke commands built into the web app. they don't work everywhere, such as in messages or if I want to see replies to a tweet, but they're good enough that I can use the website with them most of the time. Reddit has plenty of keystrokes but I'm not particularly fond of them and instead navigate by heading. A lot of it is memorization and remembering which elements appear in what order.
Honestly headings are probably the most important elements for screen reader accessibility. As long as you have those and you're not doing some awful steganography on the website content then there's a good chance it will work. Honestly if a website doesn't have headings then I'll probably leave.
Twitter is actually an exception here. When I use nvda I switch into focus mode and use the keystroke commands built into the web app. they don't work everywhere, such as in messages or if I want to see replies to a tweet, but they're good enough that I can use the website with them most of the time. Reddit has plenty of keystrokes but I'm not particularly fond of them and instead navigate by heading. A lot of it is memorization and remembering which elements appear in what order.
Honestly headings are probably the most important elements for screen reader accessibility. As long as you have those and you're not doing some awful steganography on the website content then there's a good chance it will work. Honestly if a website doesn't have headings then I'll probably leave.
JoelDodson 1 points 3y ago
Have you looked at WCAG?
$1
​
I'm fairly new to web accessibility so not sure about the overall thoughts on WCAG, but I've heard it's the place to start.
​
Regarding pressing 'h' in NVDA, that's only going to take you to HTML elements of <hn blah blah blah\\> where 'n' is the header level.
​
The NVDA users guide has a good section on navigating web pages. press nvdakey+n, h to get to the user's guid.
​
Are you using something like react or angular to develop the app? I don't know how well those, or other similar frameworks generate accessible applications. If you are using some type of framework, hopefully they at least address accessibility in their documentation.
​
If you're going hard-core and writing all the HTML/CSS/Javascript by hand, my understanding is you want to use generic HTML5 tags whenever possible. customized components are often not accessible.
​
thanks for considering accessibility as part of your development. Hopefully it was also considered as part of the initial design phase, that's where it can be better integrated.
$1
​
I'm fairly new to web accessibility so not sure about the overall thoughts on WCAG, but I've heard it's the place to start.
​
Regarding pressing 'h' in NVDA, that's only going to take you to HTML elements of <hn blah blah blah\\> where 'n' is the header level.
​
The NVDA users guide has a good section on navigating web pages. press nvdakey+n, h to get to the user's guid.
​
Are you using something like react or angular to develop the app? I don't know how well those, or other similar frameworks generate accessible applications. If you are using some type of framework, hopefully they at least address accessibility in their documentation.
​
If you're going hard-core and writing all the HTML/CSS/Javascript by hand, my understanding is you want to use generic HTML5 tags whenever possible. customized components are often not accessible.
​
thanks for considering accessibility as part of your development. Hopefully it was also considered as part of the initial design phase, that's where it can be better integrated.
ukifrit 1 points 3y ago
You can always check the nvda's user guide to learn more stuff. Twitter is quite usable IMO.
bradley22 1 points 3y ago
Are we allowed to chech out the web app?
LovelySnoot [OP] 1 points 3y ago
Yes! I'll PM you with the details. Anyone else who's interested feel free PM me.
bradley22 0 points 3y ago
Cool.
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.