6 ms·

As a web dev this is very interesting and I try to think about accessibility when I develop. But I must say I am pretty bad at making labeled forms and alt text

As a web dev this is very interesting and I try to think about accessibility when I develop. But I must say I am pretty bad at making labeled forms and alt texts for images. I will try to improve on that, thanks author!

the_other 6y ago
Always think about what an image is for, as well as what’s in it. Images are “inline replaced content”, meaning that they are considered part of the text content, not a structural element like a table, and they are “replaced by” their content. So imagine them as a text sized box containing their alt text, and then replace them with their visual content. In other words, read out an image’s alt text with the text from the nearest block level container. That’ll give you an impression of the context A blind user will experience your alt text in. Some tips: - blank alt text is better than no alt text: alt=““ should be fine if the image is pure decoration - if a photo repeats some text next to it (such as an avatar image beside a user name), it could also be blank, or “User Name’s photo” - when a company logo links to the home page, an alt text of “Back to hone page” is probably more useful than “Company logo”
- adventured 6y ago
  > when a company logo links to the home page, an alt text of “Back to hone page” is probably more useful than “Company logo” I've always used title in the anchor tag for that rather than the image alt text (title="back to the home page" in the anchor; and then alt="Company logo" in the img tag). That way you're properly describing what the image is and also providing information on where the associated link goes. Can anyone here with experience with screen readers clarify if that's an effective approach?
  - Grumbledour 6y ago
    My screen reader knowledge is a bit dusty, so this might have changed: As far as I know, screen readers don't read the title tag by themselves, though users can request it. So your approach works. And I think it is also has nicer semantics. Personally, I prefer to use a text link with the company name, then move the text out with css and add the logo as a background image. This also works great in text browsers of course, the company/site name just becomes the h1 of the page.
  - the_other 6y ago
    My screen reader experience is old and rusty, so I can’t reply on that basis. However, I think it’s valuable to ask yourself “why does a non-visual user need to know the company logo is here?”.
- captn3m0 6y ago
  > read out an image’s alt text with the text from the nearest block level container. never thought of it this way, but this makes sense. Thanks.
- ecmascript 6y ago
  Sure that sounds nice, but what to do with user uploaded images? I cannot describe them with words since they can be whatever. Is "user uploaded photo" good enough for example? The best would of course be to analyze the contents of the photo but that is simply not realistic for the stuff I work on.
  - detaro 6y ago
    that's of course not perfect, but you can give users the option to provide their own description. (Twitter does it, altough they've sadly hidden it well, so only some niche bubbles do it)
    - ecmascript 6y ago
      I can do it, but for the app I work on I believe very few would use such a feature. But I'll think about implementing it if I have the time in the future
  - the_other 6y ago
    In the context of your application, does it matter? (I assume it does, but it’s worth asking the question because all apps, and pages in apps are different). What are the images for? Do they have text accompanying them? Are there themes to the images? Can you convey the same meaning and intent another way? Can you educate your users to help you out? The answers to these questions should guide your solutions to access requirements. Alt text isn’t only about providing a description of an image, it’s one tool in a toolbox to improve access to information.

the_other 6y ago

Always think about what an image is for, as well as what’s in it. Images are “inline replaced content”, meaning that they are considered part of the text content, not a structural element like a table, and they are “replaced by” their content. So imagine them as a text sized box containing their alt text, and then replace them with their visual content. In other words, read out an image’s alt text with the text from the nearest block level container. That’ll give you an impression of the context A blind user will experience your alt text in. Some tips: - blank alt text is better than no alt text: alt=““ should be fine if the image is pure decoration - if a photo repeats some text next to it (such as an avatar image beside a user name), it could also be blank, or “User Name’s photo” - when a company logo links to the home page, an alt text of “Back to hone page” is probably more useful than “Company logo”

adventured 6y ago
> when a company logo links to the home page, an alt text of “Back to hone page” is probably more useful than “Company logo” I've always used title in the anchor tag for that rather than the image alt text (title="back to the home page" in the anchor; and then alt="Company logo" in the img tag). That way you're properly describing what the image is and also providing information on where the associated link goes. Can anyone here with experience with screen readers clarify if that's an effective approach?
- Grumbledour 6y ago
  My screen reader knowledge is a bit dusty, so this might have changed: As far as I know, screen readers don't read the title tag by themselves, though users can request it. So your approach works. And I think it is also has nicer semantics. Personally, I prefer to use a text link with the company name, then move the text out with css and add the logo as a background image. This also works great in text browsers of course, the company/site name just becomes the h1 of the page.
- the_other 6y ago
  My screen reader experience is old and rusty, so I can’t reply on that basis. However, I think it’s valuable to ask yourself “why does a non-visual user need to know the company logo is here?”.
captn3m0 6y ago
> read out an image’s alt text with the text from the nearest block level container. never thought of it this way, but this makes sense. Thanks.
ecmascript 6y ago
Sure that sounds nice, but what to do with user uploaded images? I cannot describe them with words since they can be whatever. Is "user uploaded photo" good enough for example? The best would of course be to analyze the contents of the photo but that is simply not realistic for the stuff I work on.
- detaro 6y ago
  that's of course not perfect, but you can give users the option to provide their own description. (Twitter does it, altough they've sadly hidden it well, so only some niche bubbles do it)
  - ecmascript 6y ago
    I can do it, but for the app I work on I believe very few would use such a feature. But I'll think about implementing it if I have the time in the future
- the_other 6y ago
  In the context of your application, does it matter? (I assume it does, but it’s worth asking the question because all apps, and pages in apps are different). What are the images for? Do they have text accompanying them? Are there themes to the images? Can you convey the same meaning and intent another way? Can you educate your users to help you out? The answers to these questions should guide your solutions to access requirements. Alt text isn’t only about providing a description of an image, it’s one tool in a toolbox to improve access to information.