Blind and Visually Impaired Community
↑
5
↓
I could use a blind, or visually impaired person's thoughts on a web app I developed. (self.Blind)
submitted by Illithilitch
https://illithilitch.shinyapps.io/TheCreep2/
This is a simple web app that replaces die rolls for an RPG I am developing. I have no idea how it will work with a screen reader or other technologies.
Basically, you use the drop down menu, and the roll button and it tells you if the roll was a success or a failure.
This is a simple web app that replaces die rolls for an RPG I am developing. I have no idea how it will work with a screen reader or other technologies.
Basically, you use the drop down menu, and the roll button and it tells you if the roll was a success or a failure.
AllHarlowsEve 2 points 5y ago
It works fine, and I'm interested to see where you're going with this as a DnD/TTRPG player.
Illithilitch [OP] 2 points 5y ago
Cool! Basic concept is no arithmetic. I am designing the game to be very accessible for folks with dyslexia, etc. I am glad the app works as is.
WhatWouldVaderDo 1 points 5y ago
Here's a few thoughts, feel free to ask me to clarify if something doesn't make sense.
You need to use ARIA to let screen readers know that there's a part of your page that updates. The most simple, and less optimal thing to do is mark the divs of your output with the correct attributes (see below). The problem with this approach is a screen reader will get very spammy output. Given how your page is structured right now, the output will read something like "Roll number colon 4. Medium, Standard, 1, colon Failure." This may be what you want, depending if you want the user to hear the settings of the roll every time they press the Butten.
A better thing to do is create a separate div, mark it up with both ARIA attributes and set it's display attribute to none. This allows you to write a custom message to screen readers, which can be more informationally dense, while not disrupting your visual flow. For this div, every time you update the information, you can write a shorter message such as "Roll 5: success." This will allow the user to hear "Roll five colon, success" as soon as they activate the roll button, while allowing them to review the existing on-screen message manually if they want to check the roll settings.
As for which ARIA attributes to use, this gets annoying. To hit most of the major screen reader and browser combinations, you want to add the following attributes to one of the divs mentioned above:
* aria-live = "polite". This tells a screen reader that it should pay attention to this div for updates, and it should not interrupt what the user is doing.
* role = "status". This tells the screen reader that this is the important status on the page (mainly here for compatibility reasons).
* aria-atomic = "true". This tells the screen reader to read the entire message again, not only the things that have changed.
The above will work with pretty much all screen readers, with the exception of the combination of VoiceOver, the built-in screen reader on Macs, and the Chrome browser. That particular screen reader is obnoxiously difficult to get working exactly how you want it. I can explain if you want, but what I've already given will work well enough.
You need to use ARIA to let screen readers know that there's a part of your page that updates. The most simple, and less optimal thing to do is mark the divs of your output with the correct attributes (see below). The problem with this approach is a screen reader will get very spammy output. Given how your page is structured right now, the output will read something like "Roll number colon 4. Medium, Standard, 1, colon Failure." This may be what you want, depending if you want the user to hear the settings of the roll every time they press the Butten.
A better thing to do is create a separate div, mark it up with both ARIA attributes and set it's display attribute to none. This allows you to write a custom message to screen readers, which can be more informationally dense, while not disrupting your visual flow. For this div, every time you update the information, you can write a shorter message such as "Roll 5: success." This will allow the user to hear "Roll five colon, success" as soon as they activate the roll button, while allowing them to review the existing on-screen message manually if they want to check the roll settings.
As for which ARIA attributes to use, this gets annoying. To hit most of the major screen reader and browser combinations, you want to add the following attributes to one of the divs mentioned above:
* aria-live = "polite". This tells a screen reader that it should pay attention to this div for updates, and it should not interrupt what the user is doing.
* role = "status". This tells the screen reader that this is the important status on the page (mainly here for compatibility reasons).
* aria-atomic = "true". This tells the screen reader to read the entire message again, not only the things that have changed.
The above will work with pretty much all screen readers, with the exception of the combination of VoiceOver, the built-in screen reader on Macs, and the Chrome browser. That particular screen reader is obnoxiously difficult to get working exactly how you want it. I can explain if you want, but what I've already given will work well enough.
Illithilitch [OP] 1 points 5y ago
I appreciate the in depth feedback!
I'm not super into website development, I actually built this with RStudio. I'm not sure how to incorporate that feedback into the script. I'll have to do some reading on ARIA.
>*Given how your page is structured right now, the output will read something like "Roll number colon 4. Medium, Standard, 1, colon Failure." This may be what you want, depending if you want the user to hear the settings of the roll every time they press the Butten.*
So, here's the thing. I originally incorporated the output to include the difficulty and roll type again to help with debugging, but I do find it is helpful to verify you used the selections you need. You could also show the output to the GM to be like "Nope, I didn't fail, I rolled wrong".
I can see how the punctuation being read would be annoying. I think for a sighted user that punctuation breaks up the output a bit, but it may be worth developing an app special for the blind & visually impaired that doesn't use it. I do think that leaving the difficulty and roll type in, just for verification is still nice.
I'm not super into website development, I actually built this with RStudio. I'm not sure how to incorporate that feedback into the script. I'll have to do some reading on ARIA.
>*Given how your page is structured right now, the output will read something like "Roll number colon 4. Medium, Standard, 1, colon Failure." This may be what you want, depending if you want the user to hear the settings of the roll every time they press the Butten.*
So, here's the thing. I originally incorporated the output to include the difficulty and roll type again to help with debugging, but I do find it is helpful to verify you used the selections you need. You could also show the output to the GM to be like "Nope, I didn't fail, I rolled wrong".
I can see how the punctuation being read would be annoying. I think for a sighted user that punctuation breaks up the output a bit, but it may be worth developing an app special for the blind & visually impaired that doesn't use it. I do think that leaving the difficulty and roll type in, just for verification is still nice.
WhatWouldVaderDo 2 points 5y ago
The punctuation can be suppressed by the user of the screen reading software, I wouldn’t worry about it too much.
bradley22 1 points 5y ago
It seams to work fine. Although I'm not sure if you could use aria to alert the blind user about their stats. So instead of going out of forms mode or focus mode, the modes used when screen readers encounter forms to type in; you would just here alert, then the information that is shown on the screen.
Illithilitch [OP] 1 points 5y ago
Thank you. I'm not super sure what you mean by forms mode or focus mode though?
I was also wondering if radio buttons might be better than the current drop down menus.
I was also wondering if radio buttons might be better than the current drop down menus.
bradley22 1 points 5y ago
It's a way for a screen reader to interact with a webpage when it comes to form fields. You click on a box to type your name in it, right? We have a similar thing. When we press enter on a edit box, as it's called, we go into forms mode or focus mode depending on what screen reader you're using; they mean and do the same thing.
As for radio buttons and combo boxes; either one works for me.
As for radio buttons and combo boxes; either one works for me.
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.