Blind and Visually Impaired Community
↑
2
↓
Computer Science Project for blind / visually impaired people (self.Blind)
submitted by balofa
Good morning!
Currently, I'm doing a project for my University that consists in a website that uses IBM Watson for navigation and feedback. I'm using it to read things on the screen, like the navbar, and creating sentences based on the content to tell the user what's it about. I think it's pretty good, as I've enabled some voice commands like 'go back' and saying contents sections to go to it.
The most difficult part for me is form filling. I'm already telling the user in what for field they are in and after completion, telling what was written (they can say it in the microphone and I'll fill it out for them). Is it useful to have a clear command by voice? Is it useful to have a repeat command as well? For page content and form field. I'm also doing a radio button style for multiple choice instead of a dropdown.
I'll start testing the project with real users this week and in the next one, but they do not have any experience using it.
The website is not up yet so I can't offer an URL for testing. I'm asking based on user experience and observations when using websites and consuming web content.
Any feedback is greatly appreciated!
Thanks in advance,
Currently, I'm doing a project for my University that consists in a website that uses IBM Watson for navigation and feedback. I'm using it to read things on the screen, like the navbar, and creating sentences based on the content to tell the user what's it about. I think it's pretty good, as I've enabled some voice commands like 'go back' and saying contents sections to go to it.
The most difficult part for me is form filling. I'm already telling the user in what for field they are in and after completion, telling what was written (they can say it in the microphone and I'll fill it out for them). Is it useful to have a clear command by voice? Is it useful to have a repeat command as well? For page content and form field. I'm also doing a radio button style for multiple choice instead of a dropdown.
I'll start testing the project with real users this week and in the next one, but they do not have any experience using it.
The website is not up yet so I can't offer an URL for testing. I'm asking based on user experience and observations when using websites and consuming web content.
Any feedback is greatly appreciated!
Thanks in advance,
razzretina 4 points 3y ago
It sounds like you’re making a page that has its own screen reader but doesn’t just read what’s directly on the page? It sounds a bit like reinventing the wheel here. Why not just make sure it’s accessibility compliant? That would take less time and users can use the screen reader they’re already using with the voice and speed they prefer instead of having one pre-picked for them.
balofa [OP] 2 points 3y ago
Thanks for the quick response!
Yes, it works like that. It's a portal students with intellectual disabilities to use as well - so not all of them will use a screen reader. So it's supposed to be like a tailor-made website and I'm supposed to give the users the best navigation experience they can get. I was looking for some navigation and form filling insights to follow having this in mind.
Yes, it works like that. It's a portal students with intellectual disabilities to use as well - so not all of them will use a screen reader. So it's supposed to be like a tailor-made website and I'm supposed to give the users the best navigation experience they can get. I was looking for some navigation and form filling insights to follow having this in mind.
razzretina 4 points 3y ago
I would look into traditional screen readers and how they do forms. And I would suggest having the option to turn on the site’s built in navigation as maybe a clearly labeled button for people with other disabilities. Like I said, most of us who are blind already navigate sites on our terms. Being forced to slow down dramatically and use an unfamiliar voice to navigate that doesn’t give us freedom to explore a site on our own is the best way to make sure we never visit the site again. It’s also a nightmare to have a voice speaking at the same time as your current screen reader and no way to turn it off.
balofa [OP] 1 points 3y ago
Also, how important is to control voice speed? I could try to enable this feature in my website.
razzretina 3 points 3y ago
Voice speed is crucial for most of us. If I have to listen to VoiceOver slower than about 700 words per minute, I get frustrated and find it hard to understand. Everyone who uses a screen reader has specific speed, voice, and pitch settings, which is why limiting them or trying to override them is not a good idea. I’m pretty sure someone will access your site with a phone at least once and they might have their own settings they want to use.
For form fields, just something that says what the field is (ex: name, student login, password, etc). If you haven’t yet, I recommend looking up somebody looking at a website using JAWS for Windows, VoiceOver for iOS, and NVDA. Those are the most used screen readers right now and that will give you an idea of what we already find on websites (the accessible ones, anyway).
For form fields, just something that says what the field is (ex: name, student login, password, etc). If you haven’t yet, I recommend looking up somebody looking at a website using JAWS for Windows, VoiceOver for iOS, and NVDA. Those are the most used screen readers right now and that will give you an idea of what we already find on websites (the accessible ones, anyway).
bradley22 2 points 3y ago
I think voice speed is very important.
balofa [OP] 1 points 3y ago
Yes, the site will have the option to turn the voice commands off! It will be an internal website (only for students of an organization of my university, since it's a project for one of my teachers, so I guess nobody will have a screen reader when navigating the website, but that was a good thing to take note of, thanks!
Could you provide me with the name of the screen reader you use? And maybe what feature do you like more about form filling and what are some they are missing?
Could you provide me with the name of the screen reader you use? And maybe what feature do you like more about form filling and what are some they are missing?
seperath 2 points 3y ago
This is from my wife...
Hello,
I am a visually impaired individual who utilizes a screen reader, JAWS in conjunction with a Refreshable Braille Display. As I believe another member stated, it sounds like you are reinventing the wheel here, and although you are running into glitches, your idea and creativity is sound. As an accessibility tester, I always tell people to keep the following in mind when creating accessible web content and fillable forms:
Since each screen reader is different, each screen reader has its own set of hotkeys or keyboard shortcuts that assist users with navigating through webpages, documents, and even forms. For this reason, it may be better and will take less time if you have users utilize the screen reader with which they are the most familiar. For screen reader users, familiarity is the key to getting things done efficiently – users having the knowledge that pressing the Tab Key on a QWERTY Keyboard for instance will move them from focusable item to focusable item (links, buttons, drop-down menus, groups of radio buttons, etc.). If you implement a new screen reader into your project, it will take users some time to become familiar with the way the specific screen reader works – the nuances so to speak. Does the screen reader read by character, word, paragraph, line etc.? Does it allow users to navigate from field to field within your form and from link to link on your website? How do users switch between scan, reading, and forms modes? These questions and the answers to them may be the reason the other individual is suggesting that users use the screen reader with which they are the most familiar.On your website, it is great that you are trying to get the screen reader to read the navigation links and information as part of your website. One suggestion I do have is that you can place a “Skip to main content” or a “Skip navigation” link immediately before the main content of your website begins. This saves blind and visually impaired users the step of having to read or listen to each link as it is presented on a webpage. This takes a great deal of time to listen to each link as it is read before getting to the main content on a website. The “Skip navigation” or “Skip to main content” link allows users to activate it, which in turn, should automatically move the focus directly to the beginning of the main content.Your choice to use radio buttons instead of drop-down select menus is a good one. Users can easily navigate to a group of radio buttons and use their Up and Down Arrow Keys to choose the radio button they would like, and select it easily using the Spacebar. In order to use drop-down select menus, you would need to be sure that the correct ARIA structure is used on the top item so it tells users to press the Down Arrow Key to open the menu and then use the Arrow Keys to choose the item they would like to select.When labelling form fields, whenever possible, make sure native HTML markup (e.g., <button>>, <a> for link, <select> for drop-down menus, etc.). Screen readers can read these native elements and interpret them correctly for users. However, if you used a custom JavaScript or Widget to create the labels and fields within your form, you may need to test the tab order or focus order with a screen reader. One popular screen reader that is used by many blind, deafblind, and visually impaired individuals is NVDA. This software is a free screen reader that can be downloaded from the NVAccess.org website.
I hope this information is helpful. If you have any additional questions or I can be of any further assistance, let me know; I am happy to help.
Hello,
I am a visually impaired individual who utilizes a screen reader, JAWS in conjunction with a Refreshable Braille Display. As I believe another member stated, it sounds like you are reinventing the wheel here, and although you are running into glitches, your idea and creativity is sound. As an accessibility tester, I always tell people to keep the following in mind when creating accessible web content and fillable forms:
Since each screen reader is different, each screen reader has its own set of hotkeys or keyboard shortcuts that assist users with navigating through webpages, documents, and even forms. For this reason, it may be better and will take less time if you have users utilize the screen reader with which they are the most familiar. For screen reader users, familiarity is the key to getting things done efficiently – users having the knowledge that pressing the Tab Key on a QWERTY Keyboard for instance will move them from focusable item to focusable item (links, buttons, drop-down menus, groups of radio buttons, etc.). If you implement a new screen reader into your project, it will take users some time to become familiar with the way the specific screen reader works – the nuances so to speak. Does the screen reader read by character, word, paragraph, line etc.? Does it allow users to navigate from field to field within your form and from link to link on your website? How do users switch between scan, reading, and forms modes? These questions and the answers to them may be the reason the other individual is suggesting that users use the screen reader with which they are the most familiar.On your website, it is great that you are trying to get the screen reader to read the navigation links and information as part of your website. One suggestion I do have is that you can place a “Skip to main content” or a “Skip navigation” link immediately before the main content of your website begins. This saves blind and visually impaired users the step of having to read or listen to each link as it is presented on a webpage. This takes a great deal of time to listen to each link as it is read before getting to the main content on a website. The “Skip navigation” or “Skip to main content” link allows users to activate it, which in turn, should automatically move the focus directly to the beginning of the main content.Your choice to use radio buttons instead of drop-down select menus is a good one. Users can easily navigate to a group of radio buttons and use their Up and Down Arrow Keys to choose the radio button they would like, and select it easily using the Spacebar. In order to use drop-down select menus, you would need to be sure that the correct ARIA structure is used on the top item so it tells users to press the Down Arrow Key to open the menu and then use the Arrow Keys to choose the item they would like to select.When labelling form fields, whenever possible, make sure native HTML markup (e.g., <button>>, <a> for link, <select> for drop-down menus, etc.). Screen readers can read these native elements and interpret them correctly for users. However, if you used a custom JavaScript or Widget to create the labels and fields within your form, you may need to test the tab order or focus order with a screen reader. One popular screen reader that is used by many blind, deafblind, and visually impaired individuals is NVDA. This software is a free screen reader that can be downloaded from the NVAccess.org website.
I hope this information is helpful. If you have any additional questions or I can be of any further assistance, let me know; I am happy to help.
balofa [OP] 1 points 3y ago
wow, thanks a lot for the complete response, I really appreciate it!
my portal does not read letter by letter, only page content (words) and phrases that I create - basically combining some small content on the screen to feel more dynamic. Would you say that a spelling option is needed/good? I thought of it on the password field, for example, but it did not feel very good so I removed it...
and yes, the user can navigate using the TAB key or by using voice commands! for example, if they are in the courses tab and I say that the is a course on Programming, if they say they want to go to programming, I'll redirect to it!
as for the skip to main content, I have that implemented in a way, when the user clicks a link in the navbar, the content that changes on the screen is focused, that way, the user does not have to go through the whole navbar to access the content. Would you say that a command to go back to the navbar is useful? (considering that if they say which navbar item they want to go, I'll also click there and redirect)
I'm glad to hear that I made a good choice on the radio button! And I'll definitely use NVDA to see how it handles forms, thanks for the recommendation!
as for my form, it's for the students to fill a resume. Is explaining what it is and the respective fields (instead of just reading the label) useful? And is an instant feedback and clean function of the field good as well? Should I read the whole form after submitting? I'll be testing with the students next week but I would like to have something nice for them already!
Thanks again!
my portal does not read letter by letter, only page content (words) and phrases that I create - basically combining some small content on the screen to feel more dynamic. Would you say that a spelling option is needed/good? I thought of it on the password field, for example, but it did not feel very good so I removed it...
and yes, the user can navigate using the TAB key or by using voice commands! for example, if they are in the courses tab and I say that the is a course on Programming, if they say they want to go to programming, I'll redirect to it!
as for the skip to main content, I have that implemented in a way, when the user clicks a link in the navbar, the content that changes on the screen is focused, that way, the user does not have to go through the whole navbar to access the content. Would you say that a command to go back to the navbar is useful? (considering that if they say which navbar item they want to go, I'll also click there and redirect)
I'm glad to hear that I made a good choice on the radio button! And I'll definitely use NVDA to see how it handles forms, thanks for the recommendation!
as for my form, it's for the students to fill a resume. Is explaining what it is and the respective fields (instead of just reading the label) useful? And is an instant feedback and clean function of the field good as well? Should I read the whole form after submitting? I'll be testing with the students next week but I would like to have something nice for them already!
Thanks again!
seperath 2 points 3y ago
Thanks for your reply and your questions.
Individuals who utilize screen reading software can determine the structure of a webpage by using keyboard (and in your case for your project) voice commands to access and interact with the webpage’s content. We rely heavily on the HTML native markup (native HTML elements, links, buttons, etc.) to get a sense of a webpage’s layout. Users also rely on correct heading level and structure <H1-H6> and landmarks such as headers <header> or for labels containing ARIA role=”banner”, navigation region <nav) or for labels containing ARIA role=”navigation”, main content region <main> or for labels containing ARIA role=”main”, articles <article> or for labels containing ARIA role=”article”, and footer <footer> or for labels containing ARIA role=”contentinfo” etc. I know you mentioned that when users give a voice command or navigate to a focusable item, you have redirects to move them to an item. I am not sure how screen readers would deal with the automatic content as it is updated when moving the focus from “Programs” to “courses”. In most case scenarios it is recommended that moving the focus and the control for moving the focus for individuals who utilize screen readers is within their control. Sometimes, when focus is automatically moved for users without it being within their control, it can cause screen readers to lose focus of the location even though you are seeing the focus move from one element to another on your screen. I think with some tweaking and testing, you can use JavaScript to make sure your focus order and where you redirect the focus is correct before testing with other individuals. It is not uncommon for developers to think the focus order is correct because they see the focus change on their screen; my advice would be to test this with a screen reader and make sure focus moves exactly where you are redirecting it. But, if you can get a screen reader like NVDA to change and read the information on a focusable form field or link for example, perhaps this idea will work well and get others on board for making screen readers work more efficiently with voice recognition programs such as Dragon Naturally Speaking.Since the form is for students to fill out information for resumes, a spelling option may be needed. If you have individuals who are blind, deafblind, or visually impaired using your screen reader and/or voice recognition to complete this form, maybe a spelling option (for all other fields except the password field), that should increase the accessibility and usability of your website. The spelling option will assist these individuals in being able to ensure that the information provided is spelled correctly.As far as the usability of your form goes … it is best practice to ensure that specific directions for how to complete each field are provided within close proximity to the field. For instance, let’s say that one of the designated form fields asks for an e-mail address, to the right of the label for this field you could place in parentheses (example, domain@example.com). Having the instructions for completing each field adjacent to the form field or as close as possible to that field is important because screen readers are only capable of reading the item that has the keyboard focus at one time. If you put all instructions at the top of the form, screen reader users as well as individuals with cognitive and learning disabilities may have difficulty completing the form because they would have to keep referring to the top of the form for the instructions. Breaking them up and placing instructions adjacent to each field or as close as possible to that field decreases distractions and provides users an easier way to complete the form because they can read the instructions for each field, fill in each field, and go through the form in a linear fashion.
I hope this is helpful and makes sense. I know I threw a lot of information at you here. If you are looking for someone to test your website with a screen reader and would like to go through this by phone together once it is completed let me know. I’d be glad to assist you. Kudos to you for investing the time and effort in this project. I’m glad to see that there are people out there who do take accessibility seriously and believe it is important for people with disabilities.
Individuals who utilize screen reading software can determine the structure of a webpage by using keyboard (and in your case for your project) voice commands to access and interact with the webpage’s content. We rely heavily on the HTML native markup (native HTML elements, links, buttons, etc.) to get a sense of a webpage’s layout. Users also rely on correct heading level and structure <H1-H6> and landmarks such as headers <header> or for labels containing ARIA role=”banner”, navigation region <nav) or for labels containing ARIA role=”navigation”, main content region <main> or for labels containing ARIA role=”main”, articles <article> or for labels containing ARIA role=”article”, and footer <footer> or for labels containing ARIA role=”contentinfo” etc. I know you mentioned that when users give a voice command or navigate to a focusable item, you have redirects to move them to an item. I am not sure how screen readers would deal with the automatic content as it is updated when moving the focus from “Programs” to “courses”. In most case scenarios it is recommended that moving the focus and the control for moving the focus for individuals who utilize screen readers is within their control. Sometimes, when focus is automatically moved for users without it being within their control, it can cause screen readers to lose focus of the location even though you are seeing the focus move from one element to another on your screen. I think with some tweaking and testing, you can use JavaScript to make sure your focus order and where you redirect the focus is correct before testing with other individuals. It is not uncommon for developers to think the focus order is correct because they see the focus change on their screen; my advice would be to test this with a screen reader and make sure focus moves exactly where you are redirecting it. But, if you can get a screen reader like NVDA to change and read the information on a focusable form field or link for example, perhaps this idea will work well and get others on board for making screen readers work more efficiently with voice recognition programs such as Dragon Naturally Speaking.Since the form is for students to fill out information for resumes, a spelling option may be needed. If you have individuals who are blind, deafblind, or visually impaired using your screen reader and/or voice recognition to complete this form, maybe a spelling option (for all other fields except the password field), that should increase the accessibility and usability of your website. The spelling option will assist these individuals in being able to ensure that the information provided is spelled correctly.As far as the usability of your form goes … it is best practice to ensure that specific directions for how to complete each field are provided within close proximity to the field. For instance, let’s say that one of the designated form fields asks for an e-mail address, to the right of the label for this field you could place in parentheses (example, domain@example.com). Having the instructions for completing each field adjacent to the form field or as close as possible to that field is important because screen readers are only capable of reading the item that has the keyboard focus at one time. If you put all instructions at the top of the form, screen reader users as well as individuals with cognitive and learning disabilities may have difficulty completing the form because they would have to keep referring to the top of the form for the instructions. Breaking them up and placing instructions adjacent to each field or as close as possible to that field decreases distractions and provides users an easier way to complete the form because they can read the instructions for each field, fill in each field, and go through the form in a linear fashion.
I hope this is helpful and makes sense. I know I threw a lot of information at you here. If you are looking for someone to test your website with a screen reader and would like to go through this by phone together once it is completed let me know. I’d be glad to assist you. Kudos to you for investing the time and effort in this project. I’m glad to see that there are people out there who do take accessibility seriously and believe it is important for people with disabilities.
balofa [OP] 1 points 3y ago
One more thing! If I hover over a text element, I know that NVDA will read the content, but text elements are normally not focusable, what's the best way to read instructions to a keyboard user?
seperath 2 points 3y ago
Hello,
You are very welcome, no worries! I know developing an accessible website can take some time, juggling, and creativity. All the updates you made should make your website more accessible.
Although you tested your website by hovering over elements and instructions, which is good. But, also make sure you test the focus with the keyboard by using the tab key to tab to each element. The best way to provide instructions for forms and form fields would be to use the ariadescribedby= and then place the instructions in quotes. When you put the instructions in quotes, be sure to only use the regular (“”) vs. (&;quot) next to each field that provides instructions. If you have instructions that are read that are similar to tooltips, you can create text tooltips, just make sure the tooltips are text only though with no widget icons. While widget icons look nice, they would actually create more work from an accessibility stand point because then you would have both a tool tip and alt text that would need to be coded into the website. Plain text tooltips are the easier more efficient way to do what you are trying to accomplish.
I hope this answers your questions and this makes sense. If you need any further assistance, don’t hesitate to reach out.
You are very welcome, no worries! I know developing an accessible website can take some time, juggling, and creativity. All the updates you made should make your website more accessible.
Although you tested your website by hovering over elements and instructions, which is good. But, also make sure you test the focus with the keyboard by using the tab key to tab to each element. The best way to provide instructions for forms and form fields would be to use the ariadescribedby= and then place the instructions in quotes. When you put the instructions in quotes, be sure to only use the regular (“”) vs. (&;quot) next to each field that provides instructions. If you have instructions that are read that are similar to tooltips, you can create text tooltips, just make sure the tooltips are text only though with no widget icons. While widget icons look nice, they would actually create more work from an accessibility stand point because then you would have both a tool tip and alt text that would need to be coded into the website. Plain text tooltips are the easier more efficient way to do what you are trying to accomplish.
I hope this answers your questions and this makes sense. If you need any further assistance, don’t hesitate to reach out.
balofa [OP] 1 points 3y ago
First of all, sorry for the delayed response!
Again, thank you very much for the compelte answer, it helped me a lot! I'm planning on finishing the project this weekend and I'm taking all of what you said to me in consideration (: I began to restructure part of the website using the correct tags and I'm using a focus trap for form filling since I tried to navigate using NVDA and realized that the experience was not the one I intended.. I'll try to deploy it next week (without the voice navigation, I still need to finish setting up my server) and I'll let you know! If you can, I would appreciate a final feedback for changes!
Thank you so much again :)))
Again, thank you very much for the compelte answer, it helped me a lot! I'm planning on finishing the project this weekend and I'm taking all of what you said to me in consideration (: I began to restructure part of the website using the correct tags and I'm using a focus trap for form filling since I tried to navigate using NVDA and realized that the experience was not the one I intended.. I'll try to deploy it next week (without the voice navigation, I still need to finish setting up my server) and I'll let you know! If you can, I would appreciate a final feedback for changes!
Thank you so much again :)))
bradley22 1 points 3y ago
Blind people don’t tend to use software like this but Microsoft are making something that sounds similar but I can’t remember it’s name.
balofa [OP] 1 points 3y ago
>If you do, please let me know!
bradley22 2 points 3y ago
I’d recommend letting people test it and getting their feedback.
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.