Blind and Visually Impaired Community
↑
3
↓
A Couple of Questions about Image Alt Text (self.Blind)
submitted by U5efull
Hello blind and vision impaired folks! I'm currently designing a site and in an effort to make it as blind friendly as possible, I'm coding everything from scratch. I'm trying to make this site fast and easily navigable for the blind while also allowing it to be formatted easily for all size devices.
To that end, I've foregone using bootstrap, foundation or other similar plugins as from what I understand the java DOM editing causes problems with screen readers. Instead, I am coding everything using flexbox and grid which are current CSS technologies supported (for the most part) in all modern browsers.
So, to that end, I have a few questions to help understand your needs:
When doing alt text to describe banners and decorative images, what do you prefer? Would you prefer a simple alt description of "page banner" or would you prefer a description of the content such as "heavy font DOMAINNAME image on white background"?
How badly does moving elements affect your browsing experience? For instance, there will be an ad bar on the right side, however in mobile the ad bar will be at the bottom in order to prevent accidental clicking when scrolling.
How do you prefer the usage of alt text for links? Would you like them to be fast simple one word options, such as "link to source 1" or would you prefer a the title and URL of the link such as "Bob Shot a Beaver In New York City: newyorktimes.com Nov 12 1932".
What is your browser of choice for screen readers? Do you stick with older tech as it's more stable or is upgrading fine for you?
I appreciate any help you can provide. Thanks in advance!
To that end, I've foregone using bootstrap, foundation or other similar plugins as from what I understand the java DOM editing causes problems with screen readers. Instead, I am coding everything using flexbox and grid which are current CSS technologies supported (for the most part) in all modern browsers.
So, to that end, I have a few questions to help understand your needs:
When doing alt text to describe banners and decorative images, what do you prefer? Would you prefer a simple alt description of "page banner" or would you prefer a description of the content such as "heavy font DOMAINNAME image on white background"?
How badly does moving elements affect your browsing experience? For instance, there will be an ad bar on the right side, however in mobile the ad bar will be at the bottom in order to prevent accidental clicking when scrolling.
How do you prefer the usage of alt text for links? Would you like them to be fast simple one word options, such as "link to source 1" or would you prefer a the title and URL of the link such as "Bob Shot a Beaver In New York City: newyorktimes.com Nov 12 1932".
What is your browser of choice for screen readers? Do you stick with older tech as it's more stable or is upgrading fine for you?
I appreciate any help you can provide. Thanks in advance!
Amonwilde 3 points 5y ago
Most users aren't aware of responsive elements. The site should be accessible on either screen size, but the fact that it's responsive, uses media queries, etc. isn't an issue.
For alt text, try to think about the function of the entity, not a literal description of its look or position. It doesn't really matter that it's a big bold banner or whatever, just make the alt text the name of the site and tagline, or text like "Welcome to Widgets Incorproated." That's the function of the banner, to welcome people to the site and to tell them the name of the site or organization.
You don't need alt text for links. The link text is generally fine for blind as well as sighted users. If you're talking about buttons, then yes, you need alt text. For example, the hamburger icon often found on responsive sites (three horizontal lines stacked on top of one another) needs to be labelled something like "navigation menu" or "open navigation menu."
You may want to include a "skip navigation" link on your site, as per this site: http://a11yproject.com/posts/skip-nav-links/
The most commonly used screen readers are JAWS and NVDA on Windows and Voiceover on iOS. The blind tend to use Windows for the desktop and IPhones for their mobile device, though of course that's not universal. If your site works well with NVDA and Voiceover you're good. If you don't have an iPHone, I'd test with NVDA, as JAWS is incredibly expensive.
Finally, you can absolutely use Bootstrap to create an accessible site. Though coding sites from scratch can be quite rewarding.
For alt text, try to think about the function of the entity, not a literal description of its look or position. It doesn't really matter that it's a big bold banner or whatever, just make the alt text the name of the site and tagline, or text like "Welcome to Widgets Incorproated." That's the function of the banner, to welcome people to the site and to tell them the name of the site or organization.
You don't need alt text for links. The link text is generally fine for blind as well as sighted users. If you're talking about buttons, then yes, you need alt text. For example, the hamburger icon often found on responsive sites (three horizontal lines stacked on top of one another) needs to be labelled something like "navigation menu" or "open navigation menu."
You may want to include a "skip navigation" link on your site, as per this site: http://a11yproject.com/posts/skip-nav-links/
The most commonly used screen readers are JAWS and NVDA on Windows and Voiceover on iOS. The blind tend to use Windows for the desktop and IPhones for their mobile device, though of course that's not universal. If your site works well with NVDA and Voiceover you're good. If you don't have an iPHone, I'd test with NVDA, as JAWS is incredibly expensive.
Finally, you can absolutely use Bootstrap to create an accessible site. Though coding sites from scratch can be quite rewarding.
U5efull [OP] 2 points 5y ago
Thanks for all your suggestions I will take them to heart.
The hamburger icon was something I was trying to avoid using at all costs.
I like the skip-nav-links idea a lot, but what do you think about offering an alternative site with less links?
I could easily implement a site mirror that removes them all and put that as a hidden link that only screen readers can see. I could then set it to the first item that loads so the reader would say something like "Visually Impaired Friendly" version or something along those lines.
Once the person gets there how do you suggest they navigate?
Would Back and Next buttons work well or would a search box be sufficient?
I plan on coding this out and then using it as a template for quite a few sites, so hopefully some of the stuff I build can help others to make sites more accessible as well. A lot of this will become PHP templates that are generated by a python script, so the more I know to add, the better I can make this. I don't want a heavy site, I want it to be very easy to navigate and very simple.
How do ads affect the browsing experience? I plan on using affiliate links for revenue (you can buy something on Amazon, then I get a cut for example). On the visual side, I have the section colored slightly golden and moved off in a column on the right of the article content so it's obvious these are ads.
What's the least frustrating way to handle this? Should I implement a "skip ads" button that takes the reader to the article like you suggest with the skip-nav-links idea?
Again, thanks for your answers. I asked you folks a while back about this sort of thing and it helped me talk my boss at work into making sure all of our product information online was accessible, so these comments really do make a difference!
I may move into video content. Have you any suggestions on sites I could read about that describe how to properly annotate video? I'm totally clueless on this, I already plan on Close Captioning for the deaf, but seeing how good annotations are done for the blind may help to make this other content more accessible as well.
Looking forward to what others have to say as well!
The hamburger icon was something I was trying to avoid using at all costs.
I like the skip-nav-links idea a lot, but what do you think about offering an alternative site with less links?
I could easily implement a site mirror that removes them all and put that as a hidden link that only screen readers can see. I could then set it to the first item that loads so the reader would say something like "Visually Impaired Friendly" version or something along those lines.
Once the person gets there how do you suggest they navigate?
Would Back and Next buttons work well or would a search box be sufficient?
I plan on coding this out and then using it as a template for quite a few sites, so hopefully some of the stuff I build can help others to make sites more accessible as well. A lot of this will become PHP templates that are generated by a python script, so the more I know to add, the better I can make this. I don't want a heavy site, I want it to be very easy to navigate and very simple.
How do ads affect the browsing experience? I plan on using affiliate links for revenue (you can buy something on Amazon, then I get a cut for example). On the visual side, I have the section colored slightly golden and moved off in a column on the right of the article content so it's obvious these are ads.
What's the least frustrating way to handle this? Should I implement a "skip ads" button that takes the reader to the article like you suggest with the skip-nav-links idea?
Again, thanks for your answers. I asked you folks a while back about this sort of thing and it helped me talk my boss at work into making sure all of our product information online was accessible, so these comments really do make a difference!
I may move into video content. Have you any suggestions on sites I could read about that describe how to properly annotate video? I'm totally clueless on this, I already plan on Close Captioning for the deaf, but seeing how good annotations are done for the blind may help to make this other content more accessible as well.
Looking forward to what others have to say as well!
fastfinge 2 points 5y ago
> offering an alternative site
Try really, really hard not to do this. Even though you have the best of intentions, some day you'll update the main site, and forget to update the "alternative" site. Or another developer will take it over, who doesn't care as much as you do, and leave the alternative site to languish. Also, what happens if someone shares with me a link to somewhere deep in the website? Now that page might not be accessible, so I have to click for the alternative site, and then try and guess my way back to whatever content someone was trying to share with me.
Even companies as large and smart as Google have made this "alternative site" mistake. For about 10 years, there was a special screen-reader interface for gmail. It was released once, and then never, ever updated. No bugs were fixed, no new features were added, and it got wildly out of sync with regular gmail. Eventually Google made the regular gmail accessible, and killed the screen-reader interface.
> How do ads affect the browsing experience?
Ads are so huge a problem that the vast majority of blind folks run ad blockers. However, affiliate links aren't really ads in the classic sense. In theory, they're useful and related to the main article. So long as you're not running ad network banners flashing and vibrating and playing music and demanding that your visitors spank the monkey, you're fine. You might consider reading about $1. The first example on that page is the correct way to do it: mark your article content as main, and your affiliate links as complementary. They're not really ads in the classic sense after all. If the article is a how-to guide, the links to purchase the required tools could actually be quite important. Also, using landmarks to mark other parts of the page (search, navigation, etc) would help provide the easy to use experience you're seeking.
> become PHP templates
Look at the default Drupal and Wordpress themes. They both do a really, really good job at accessability. And that's a huge win for blind people, because a lot of sites using Wordpress or Drupal get accessibility by default, as long as the developers don't do something to mess it up.
edit to add: For video, $1 will do everything you need.
Try really, really hard not to do this. Even though you have the best of intentions, some day you'll update the main site, and forget to update the "alternative" site. Or another developer will take it over, who doesn't care as much as you do, and leave the alternative site to languish. Also, what happens if someone shares with me a link to somewhere deep in the website? Now that page might not be accessible, so I have to click for the alternative site, and then try and guess my way back to whatever content someone was trying to share with me.
Even companies as large and smart as Google have made this "alternative site" mistake. For about 10 years, there was a special screen-reader interface for gmail. It was released once, and then never, ever updated. No bugs were fixed, no new features were added, and it got wildly out of sync with regular gmail. Eventually Google made the regular gmail accessible, and killed the screen-reader interface.
> How do ads affect the browsing experience?
Ads are so huge a problem that the vast majority of blind folks run ad blockers. However, affiliate links aren't really ads in the classic sense. In theory, they're useful and related to the main article. So long as you're not running ad network banners flashing and vibrating and playing music and demanding that your visitors spank the monkey, you're fine. You might consider reading about $1. The first example on that page is the correct way to do it: mark your article content as main, and your affiliate links as complementary. They're not really ads in the classic sense after all. If the article is a how-to guide, the links to purchase the required tools could actually be quite important. Also, using landmarks to mark other parts of the page (search, navigation, etc) would help provide the easy to use experience you're seeking.
> become PHP templates
Look at the default Drupal and Wordpress themes. They both do a really, really good job at accessability. And that's a huge win for blind people, because a lot of sites using Wordpress or Drupal get accessibility by default, as long as the developers don't do something to mess it up.
edit to add: For video, $1 will do everything you need.
U5efull [OP] 3 points 5y ago
Okay, so toss the alt site out the window.
Just add the nav link to skip to main content at the top.
Ads will not be animated or have any sound, huge no-no in my book, so that's covered.
I'll implement AblePlayer, I plan on using straight HTML 5 for video and this looks reasonable.
Thanks for the tips, back to coding!
Just add the nav link to skip to main content at the top.
Ads will not be animated or have any sound, huge no-no in my book, so that's covered.
I'll implement AblePlayer, I plan on using straight HTML 5 for video and this looks reasonable.
Thanks for the tips, back to coding!
Amonwilde 1 points 5y ago
There's nothing inherently wrong with buttons or a hamburger button. If you use it, label it, if you don't use it, don't worry about it.
I think having two sites, one for blind and one for sighted users, that need to be maintained separately isn't a good idea. It violates DRY (Don't Repeat Yourself), makes it hard to maintain your site, and often results in the accessible version getting short shrift. If you want this to be a model for other devs, they won't want to separate concerns like that either.
Screen readers have navigation options. That's not something you should worry about. You seem really serious about this, so you might want to download NVDA on Windows and try to learn a little about how it works, which might give you a better mental model.
With ads, use alt text that indicated they're ads. You don't really need to do much more.
For video description, I recommend checking out YouDescribe, a site that collects annotations for YouTube videos: https://youdescribe.org/
I think having two sites, one for blind and one for sighted users, that need to be maintained separately isn't a good idea. It violates DRY (Don't Repeat Yourself), makes it hard to maintain your site, and often results in the accessible version getting short shrift. If you want this to be a model for other devs, they won't want to separate concerns like that either.
Screen readers have navigation options. That's not something you should worry about. You seem really serious about this, so you might want to download NVDA on Windows and try to learn a little about how it works, which might give you a better mental model.
With ads, use alt text that indicated they're ads. You don't really need to do much more.
For video description, I recommend checking out YouDescribe, a site that collects annotations for YouTube videos: https://youdescribe.org/
Marconius 2 points 5y ago
If the images are purely decorative and don't offer any pertinent info to a blind user, just hide them from a screen reader by using empty quotes in the alt tag:
alt=""
We tend to use the latest browsers as every new update just helps with screen reader support along with the latest web rendering methods and compatibility. As long as you make your site keyboard accessible, that will go a long way to making your site not only accessible to the blind, but also to others with different disabilities so as motor and cognitive disabilities. Screen readers will account for responsive design, just make the placement consistent across all pages of your site.
Never over label links. Also never just make a link say "click here" etc. The links should be labeled with where they are taking the user, plus should include action text such as "link will open in new window".
Keep all your page info semantically logical and your DOM in linear order as that is how a screen reader interprets your site. Move things around with CSS, but keep all the sections in order use landmarks and don't throw divs everywhere without labeling them or giving them an ARIA role, and keep your headings in order and never use them as a decorative element! Only one h1 per page, please, and keep it under the nav and make it the title of the overall content on the page.
alt=""
We tend to use the latest browsers as every new update just helps with screen reader support along with the latest web rendering methods and compatibility. As long as you make your site keyboard accessible, that will go a long way to making your site not only accessible to the blind, but also to others with different disabilities so as motor and cognitive disabilities. Screen readers will account for responsive design, just make the placement consistent across all pages of your site.
Never over label links. Also never just make a link say "click here" etc. The links should be labeled with where they are taking the user, plus should include action text such as "link will open in new window".
Keep all your page info semantically logical and your DOM in linear order as that is how a screen reader interprets your site. Move things around with CSS, but keep all the sections in order use landmarks and don't throw divs everywhere without labeling them or giving them an ARIA role, and keep your headings in order and never use them as a decorative element! Only one h1 per page, please, and keep it under the nav and make it the title of the overall content on the page.
U5efull [OP] 1 points 5y ago
>Keep all your page info semantically logical and your DOM in linear order as that is how a screen reader interprets your site.
This is precisely what I've learned to do from you folks. I'm using flexbox and grid to modify the DOM but keeping the HTML in a very linear and logical order. Elements are stacked vertically and then just visually move around based on the screen size. Current format is like this:
<body>
<div class="flex-container">
<div class="Main-Grid">
<div class="nav">nav</div>
<div class="header">header</div>
<div class="article">article</div>
<div class="ads">ads</div>
<div class="footer">footer</div>
</div>
</body>
This is precisely what I've learned to do from you folks. I'm using flexbox and grid to modify the DOM but keeping the HTML in a very linear and logical order. Elements are stacked vertically and then just visually move around based on the screen size. Current format is like this:
<body>
<div class="flex-container">
<div class="Main-Grid">
<div class="nav">nav</div>
<div class="header">header</div>
<div class="article">article</div>
<div class="ads">ads</div>
<div class="footer">footer</div>
</div>
</body>
bradley22 1 points 5y ago
Hey. one thing that I don't think anyone has mentioned is labeling your edit boxes.
What do I mean?
Well let's say your site has a search feature and the word search is above the box in which the user searches. That's fine for someone who can see as they can skim down to that text and wil know what the box is for. For screen reader users however, we would need to press enter on the box, after pressing e for edit, then press escape to leave the box, then arrow up to read the text, arrow down to the box again and type in our name or what we are searching for. i'm sure you can see how adding <label> tags would make things alot easier. One more thing; if you have a limit on how many characters can be used in a text box, use ARIA for that. I mean let's say you have 10 then 5 then you've gone over the limit, a sighted person might see the numbers going down so they will know how much they can type. We on the other hand would have to do that thing I mentioned above where we'd press E, then arrow up to see how many characters are left. I'm sure you can see how that could get annoying.
What do I mean?
Well let's say your site has a search feature and the word search is above the box in which the user searches. That's fine for someone who can see as they can skim down to that text and wil know what the box is for. For screen reader users however, we would need to press enter on the box, after pressing e for edit, then press escape to leave the box, then arrow up to read the text, arrow down to the box again and type in our name or what we are searching for. i'm sure you can see how adding <label> tags would make things alot easier. One more thing; if you have a limit on how many characters can be used in a text box, use ARIA for that. I mean let's say you have 10 then 5 then you've gone over the limit, a sighted person might see the numbers going down so they will know how much they can type. We on the other hand would have to do that thing I mentioned above where we'd press E, then arrow up to see how many characters are left. I'm sure you can see how that could get annoying.
U5efull [OP] 1 points 5y ago
adding label tags is a pretty easy fix and something I'll implement absolutely
I'm looking up info on ARIA and will look into how I can implement this.
One concern from my cursory reading shows that this add more commenting to elements. I don't want to add extra comments to some elements that already have built in comments (provided by screen readers). I do see where there are a lot of pitfalls with using ARIA where a developer could inadvertently add more notifications to the same element so I'll have to be extra careful with this.
I'll read up on it and see what I can use, it's certainly a consideration and I'm sure I'll use it for lists and search boxes as you suggest.
thanks for your suggestions
I'm looking up info on ARIA and will look into how I can implement this.
One concern from my cursory reading shows that this add more commenting to elements. I don't want to add extra comments to some elements that already have built in comments (provided by screen readers). I do see where there are a lot of pitfalls with using ARIA where a developer could inadvertently add more notifications to the same element so I'll have to be extra careful with this.
I'll read up on it and see what I can use, it's certainly a consideration and I'm sure I'll use it for lists and search boxes as you suggest.
thanks for your suggestions
bradley22 1 points 5y ago
I'll be the first to admit i've not bilt my own website. i've looked into doing it and can do so but it's not my kind of thing. When you say that there are comments built in what do you mean? Also why would you use Aria for lists? I'll admit i've not looked much into ARIA myself but I do know it's good for messages for screen reader users.
U5efull [OP] 1 points 5y ago
>When you say that there are comments built in what do you mean?
most screen readers know an object by the tag, and some auto label the object, so I just want to prevent redundant messages that slow the user down
>Also why would you use Aria for lists?
Aria can help with lists. It's one of the features documented on the site. I don't have much experience with it as of yet, so I'll know more once I start using it heavily.
most screen readers know an object by the tag, and some auto label the object, so I just want to prevent redundant messages that slow the user down
>Also why would you use Aria for lists?
Aria can help with lists. It's one of the features documented on the site. I don't have much experience with it as of yet, so I'll know more once I start using it heavily.
bradley22 1 points 5y ago
The places I'd use ARIA are on the following things: the button when you've sent a message to the web developer. Instead of having to press escape then arrow down to read the message, it could be placed in an alert. For example: alert: your message has been sent, thanks. I'd also use ARIA on edit boxes that have a character limit. As i said in another message, it is not fun to press escape, arrow up, check your characters remaining and then to continue typing, I'd recommend on the 100 then the 50 then the10 then if you go over the limit, to have messages for those things. IF anyone wishes to disagree with me, feel free. I'm not exactly sure how to explain the character limit thing and hope I did a good job.
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.