Blind and Visually Impaired Community
↑
5
↓
I am trying to make my websites more accessible to screen readers and I have some questions on what is actually preferred by visually impaired people. (self.Blind)
submitted by skyeblu_43
I hope it is okay for me to post here!
I try my best to add accessible labels to everything, and I test it all with the NVDA screen reader. What I am wondering is, do you want descriptions of all the images that appear? When I test my websites with the screen reader, it always seems a little odd to have a description like "decorative illustration of a banana" that is read aloud. Some descriptions of small decorations seem as if they take away from the functionality of the website for the visually impaired, as they kind of clog it all up. I understand that descriptions for vital images is necessary, but I am mainly wondering what graphics you would want described, and what you would rather have skipped over. My second question is more open ended. There is very little documentation for programmers to make websites accessible to screen readers, and I find that most sites are minimally accessible. If you could add anything or change anything with the way screen readers read websites, what would it be? What is a feature that you find annoying? What problems do you encounter? Really any general suggestions are very much appreciated as I would like to improve documentation for programmers to make accessible websites. Thank you!
I try my best to add accessible labels to everything, and I test it all with the NVDA screen reader. What I am wondering is, do you want descriptions of all the images that appear? When I test my websites with the screen reader, it always seems a little odd to have a description like "decorative illustration of a banana" that is read aloud. Some descriptions of small decorations seem as if they take away from the functionality of the website for the visually impaired, as they kind of clog it all up. I understand that descriptions for vital images is necessary, but I am mainly wondering what graphics you would want described, and what you would rather have skipped over. My second question is more open ended. There is very little documentation for programmers to make websites accessible to screen readers, and I find that most sites are minimally accessible. If you could add anything or change anything with the way screen readers read websites, what would it be? What is a feature that you find annoying? What problems do you encounter? Really any general suggestions are very much appreciated as I would like to improve documentation for programmers to make accessible websites. Thank you!
zersiax 6 points 2y ago
WCAG and the HTML5 spec together generally dictate that:
​
\- Every image should have an alt attribute;
\- alt attributes should contain a value when an image contains information that is not otherwise indicated on the page.
​
Obviously, that is largely theoretical and doesn't really indicate when you should and shouldn't describe images, but it's a start. The reason this is to hard to really pin down is because it is really specific to the website you are trying to build and to what degree you want screenreader users to be aware of the images on that website.
A few tips:
​
\- Generally, you can avoid things like "image of, picture of, etc" unless the particular medium is for some reason distinctive. A screenreader will already say "graphic", so if you have a graphic of a banana, an alt text of "banana" is just fine.
\- This is a bit of an ancient example, but images of spacers, gradients or other things there to just fill up space or make more space, I would say, can be considered purely decorative and should not have alt text, there is such a thing as too much information.
\- Decide on a level of description based on what the image is doing. e.g., if your website is about paintings, you will probably want to describe an image of a painting pretty extensively. If you're just including an image of the Mona Lisa to give an example, a description can be far more terse.
​
Overall this is always going to be a bit of a guessing game for non-essential graphics, but then, it's also not the most important thing to get stuck on access-wise. Necessary graphics like icons, charts, infographics etc. however, absolutely need to be described, and described in a fitting manner. If an icon is going to show up for each row in a table, for example, you don't want a description like "This is Icon mciconface that indicates the state of the flux capacitor about to overlo...boom!". A label like "danger" would probably be better..
This takes me to your second question though. By far, the most important things on a website that I want to see working is a proper navigation structure (hierarchical headings that actually flow properly, use of semantic HTML like main, header, footer etc.) as well as elements that are properly operable by screenreader users. Buttons, links, dropdowns, rather than JS-enhanced clickable divs that have no role or proper ARIA markup. That's another thing, use ARIA sparingly.
In the field, we pretty often say that rule 1 of ARIA is to not use ARIA, which is semi-joky but actually pretty accurate. If HTML has a way to do what you are trying to do without using ARIA, always prefer that.
I hope that helps a little :)
​
\- Every image should have an alt attribute;
\- alt attributes should contain a value when an image contains information that is not otherwise indicated on the page.
​
Obviously, that is largely theoretical and doesn't really indicate when you should and shouldn't describe images, but it's a start. The reason this is to hard to really pin down is because it is really specific to the website you are trying to build and to what degree you want screenreader users to be aware of the images on that website.
A few tips:
​
\- Generally, you can avoid things like "image of, picture of, etc" unless the particular medium is for some reason distinctive. A screenreader will already say "graphic", so if you have a graphic of a banana, an alt text of "banana" is just fine.
\- This is a bit of an ancient example, but images of spacers, gradients or other things there to just fill up space or make more space, I would say, can be considered purely decorative and should not have alt text, there is such a thing as too much information.
\- Decide on a level of description based on what the image is doing. e.g., if your website is about paintings, you will probably want to describe an image of a painting pretty extensively. If you're just including an image of the Mona Lisa to give an example, a description can be far more terse.
​
Overall this is always going to be a bit of a guessing game for non-essential graphics, but then, it's also not the most important thing to get stuck on access-wise. Necessary graphics like icons, charts, infographics etc. however, absolutely need to be described, and described in a fitting manner. If an icon is going to show up for each row in a table, for example, you don't want a description like "This is Icon mciconface that indicates the state of the flux capacitor about to overlo...boom!". A label like "danger" would probably be better..
This takes me to your second question though. By far, the most important things on a website that I want to see working is a proper navigation structure (hierarchical headings that actually flow properly, use of semantic HTML like main, header, footer etc.) as well as elements that are properly operable by screenreader users. Buttons, links, dropdowns, rather than JS-enhanced clickable divs that have no role or proper ARIA markup. That's another thing, use ARIA sparingly.
In the field, we pretty often say that rule 1 of ARIA is to not use ARIA, which is semi-joky but actually pretty accurate. If HTML has a way to do what you are trying to do without using ARIA, always prefer that.
I hope that helps a little :)
skyeblu_43 [OP] 1 points 2y ago
thank you SO much for this detailed reply! I am currently learning web development and I didn't want to learn any bad accessibility habits off the bat. And apparently I already have bad habits because I overuse ARIA to try and provide the most comprehensive experience. However from what I understand from your reply, is that having a clear HTML flow is more important for screenreaders?
Also I think my alt text might be more redundant than i thought with the reader saying "graphic, image of a dog". I definitely include alt attribute on everything but I think i need to rephrase some things.
Do you have any experience with how screenreaders process icons? From what I have tested it seems to vary whether or not it describes the icon or just says "icon". this is particularly troublesome for social media and contact icons that are clickable. (for example from font awesome.) As far as I know there is no icon alt attribute and I am not sure how to explicitly state what the icon is.
Thank you for this information!
Also I think my alt text might be more redundant than i thought with the reader saying "graphic, image of a dog". I definitely include alt attribute on everything but I think i need to rephrase some things.
Do you have any experience with how screenreaders process icons? From what I have tested it seems to vary whether or not it describes the icon or just says "icon". this is particularly troublesome for social media and contact icons that are clickable. (for example from font awesome.) As far as I know there is no icon alt attribute and I am not sure how to explicitly state what the icon is.
Thank you for this information!
RunsOnBoltCoffee 1 points 2y ago
Great suggestions here. Every image should have an alt attribute. Use a null alt attribute for decorative images. Alt =“”
zersiax 1 points 2y ago
It depends on how icons are marked up. A pretty common, if somewhat against the spec, example is to wrap them in i-tags, so <i></i> with particular CSS classes on them. These don't have a label, so that is where ARIA might be able to lend you a hand.
As for using ARIA, it is essentially meant to be used to augment HTML in such a way that you can use it to make things that wouldn't be possible without HTML. Adding an aria-laabel to an anchor tag is redundant since the link text is already used for the accessible name of the link. Adding an aria-level to a heading is similarly redundant given the tag already denotes this. It's when you need to do things that HTML doesn't let you do, where ARIA becomes the most important, but it's hard for me to really judge if what you are doing is a bad habit given I haven't seen your code or your web pages :)
As for using ARIA, it is essentially meant to be used to augment HTML in such a way that you can use it to make things that wouldn't be possible without HTML. Adding an aria-laabel to an anchor tag is redundant since the link text is already used for the accessible name of the link. Adding an aria-level to a heading is similarly redundant given the tag already denotes this. It's when you need to do things that HTML doesn't let you do, where ARIA becomes the most important, but it's hard for me to really judge if what you are doing is a bad habit given I haven't seen your code or your web pages :)
Superfreq2 2 points 2y ago
Some good, real world resources I've found that could help.
https://webaim.org/projects/screenreadersurvey8/
https://www.w3.org/WAI/people-use-web/user-stories/
https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/
https://levelup.gitconnected.com/wcag-2-1-simplified-how-to-make-your-website-accessible-1cfadd03d20d
https://webaim.org/articles/
https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
https://webaim.org/projects/screenreadersurvey8/
https://www.w3.org/WAI/people-use-web/user-stories/
https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/
https://levelup.gitconnected.com/wcag-2-1-simplified-how-to-make-your-website-accessible-1cfadd03d20d
https://webaim.org/articles/
https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
skyeblu_43 [OP] 2 points 2y ago
This is awesome and super helpful, thank you! When I was researching I mostly came across WCAG which seemed somewhat overly general and was not well explained for learners. These resources really make it much more understandable!
Superfreq2 1 points 2y ago
I'm glad! One I forgot to include, as sort of a primer before the simplified WCAG is this.
https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/
This page also has some great articles, particularly in the user perspective and policy sections.
https://webaim.org/articles/
Hopefully you'll spread these around to others? :)
https://www.brucelawson.co.uk/2019/checklist-to-avoid-the-most-common-accessibility-errors/
This page also has some great articles, particularly in the user perspective and policy sections.
https://webaim.org/articles/
Hopefully you'll spread these around to others? :)
TwoSunsRise 2 points 2y ago
Thanks for trying to make your website accessible! Many people don't and it's unfortunate.
We use iPhone voice over and if the website is accessible it works pretty well. I would like images to be described. It's a big void of accessibility since technology isn't quite up to speed with image description. Usually we're left guessing and confused, especially if the image adds context to what we're reading. I have no idea what kind of websites you have so it's a little tricky to give full feedback. Usually we hear the work "image" or hear a certain sound that means it's not readable. It's frustrating to hear that so much (since images are everywhere). So overall: yes, image description would be nice, per me and my VI family members opinions.
We use iPhone voice over and if the website is accessible it works pretty well. I would like images to be described. It's a big void of accessibility since technology isn't quite up to speed with image description. Usually we're left guessing and confused, especially if the image adds context to what we're reading. I have no idea what kind of websites you have so it's a little tricky to give full feedback. Usually we hear the work "image" or hear a certain sound that means it's not readable. It's frustrating to hear that so much (since images are everywhere). So overall: yes, image description would be nice, per me and my VI family members opinions.
skyeblu_43 [OP] 2 points 2y ago
Thank you for your reply! With your feedback and some other comments on here, I realize now that proper image description is an absolute must!
BlindLuck72 1 points 2y ago
Please for the love of got use high contrast color scheme!!!!
Black text on white background is fine it doesn’t need to be fancy but so many web pages have light blue on white or red background with white text etc... you get the idea the company colors. This is especially problematic with buttons. I ran into a web page using yellow buttons with white txt recently. Could read it....
Black text on white background is fine it doesn’t need to be fancy but so many web pages have light blue on white or red background with white text etc... you get the idea the company colors. This is especially problematic with buttons. I ran into a web page using yellow buttons with white txt recently. Could read it....
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.