Blind and Visually Impaired Community
↑
3
↓
What do you use to make websites more accessible that may not have been accommodated for the visually impaired? (self.Blind)
submitted by TekTekDude
And, if you would like to answer, what can be done to make a website more accessible for the visually impaired? Web developer here.
dmazzoni 4 points
Hi - I'm an engineer specializing in making websites more accessible to blind and other disabled users.
Here are the first few things to think about:
* For any important images, give them an accessible alternate description: <img src="foo.bar" alt="Picture of a cat playing a piano">. If the image is unimportant - like purely decorative, it's better to add alt="" because otherwise the screen reader may try to guess the image's title anyway.
* Use headings (h1, h2, etc.) to logically lay out the page. One of the easiest ways for a blind person to skip around in a page is by jumping to the next or previous heading.
* Make sure every form control has a label. Use a <label> element 90% of the time, but when that's not possible, use the title attribute, or aria-label as a last resort. Placeholder text is okay, it's accessible.
Now, if you have a really simple site, you might already be in good shape! But here are some tips if you have something more interactive:
* Built-in HTML links and form controls are all accessible: links, buttons, checkboxes, text fields, sliders, etc. - if you use those, you're great. However, if you roll your own, they won't be. Either use a UI library that has already taken care of accessibility, or plan on doing a lot of extra work.
* If text appears out of nowhere, use a *live region* to make it announced immediately.
Some myths:
* Myth: blind people can't use JavaScript. Hasn't been true for years! Modern browsers and screen readers handle JavaScript just fine. The trick is to just make sure that the page isn't changing in a confusing way. Yes, it takes more work to make a very dynamic site accessible, but it's not because JavaScript itself is the problem.
* Myth: I need to add keyboard shortcuts to my page or it will take forever for a blind person to find anything. Nope, not really. First of all, they're probably listening to your page at supersonic speeds, but furthermore they're probably skipping around by headings, or searching for text they remember earlier using the Find function to quickly jump around. Focus on logical organization of the content, not keyboard shortcuts.
Further reading:
* http://webaim.org/intro/
* http://dev.opera.com/articles/view/introduction-to-wai-aria/
Here are the first few things to think about:
* For any important images, give them an accessible alternate description: <img src="foo.bar" alt="Picture of a cat playing a piano">. If the image is unimportant - like purely decorative, it's better to add alt="" because otherwise the screen reader may try to guess the image's title anyway.
* Use headings (h1, h2, etc.) to logically lay out the page. One of the easiest ways for a blind person to skip around in a page is by jumping to the next or previous heading.
* Make sure every form control has a label. Use a <label> element 90% of the time, but when that's not possible, use the title attribute, or aria-label as a last resort. Placeholder text is okay, it's accessible.
Now, if you have a really simple site, you might already be in good shape! But here are some tips if you have something more interactive:
* Built-in HTML links and form controls are all accessible: links, buttons, checkboxes, text fields, sliders, etc. - if you use those, you're great. However, if you roll your own, they won't be. Either use a UI library that has already taken care of accessibility, or plan on doing a lot of extra work.
* If text appears out of nowhere, use a *live region* to make it announced immediately.
Some myths:
* Myth: blind people can't use JavaScript. Hasn't been true for years! Modern browsers and screen readers handle JavaScript just fine. The trick is to just make sure that the page isn't changing in a confusing way. Yes, it takes more work to make a very dynamic site accessible, but it's not because JavaScript itself is the problem.
* Myth: I need to add keyboard shortcuts to my page or it will take forever for a blind person to find anything. Nope, not really. First of all, they're probably listening to your page at supersonic speeds, but furthermore they're probably skipping around by headings, or searching for text they remember earlier using the Find function to quickly jump around. Focus on logical organization of the content, not keyboard shortcuts.
Further reading:
* http://webaim.org/intro/
* http://dev.opera.com/articles/view/introduction-to-wai-aria/
TekTekDude [OP] 1 points
For a blind user, what does the "title" of the image do differently from the alternate description? I debated using both and giving them the same value, or does accessibility software tend to look at alternate descriptions more than titles?
Great reply, thank you. It was exactly what I needed. I wanted to make a website built for accessibility but not specially built *just* for blind users.
Great reply, thank you. It was exactly what I needed. I wanted to make a website built for accessibility but not specially built *just* for blind users.
dmazzoni 2 points
As a general rule of thumb:
For image elements: a screen reader will prefer alt, but if that's missing it will use the title.
For form controls: a screen reader will prefer a <label> associated with the control, but if it's missing it will use the title.
There are a lot of screen readers out there, and they're not all quite in agreement about these rules. If at all possible, try to avoid using multiple ways to label the same element, especially when they conflict.
For image elements: a screen reader will prefer alt, but if that's missing it will use the title.
For form controls: a screen reader will prefer a <label> associated with the control, but if it's missing it will use the title.
There are a lot of screen readers out there, and they're not all quite in agreement about these rules. If at all possible, try to avoid using multiple ways to label the same element, especially when they conflict.
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.