Blind and Visually Impaired Community
↑
3
↓
How to make a website more vision-impaired friendly? (self.Blind)
submitted by R1ckx
Hey! I'm designing a website with a couple of friends on which we want to share stories. Since we want to reach everyone, I was wondering on how to make the site as friendly as possible to vision impaired people using magnifying software and/or reading software. There are no wrong answers here, we can use anything!
Thanks for helping
Thanks for helping
Marconius 3 points 6y ago
There are full on online courses devoted to making websites accessible, but a few things in a nutshell:
1. Label everything. Use titles, names, ID attributes, and learn the aria attributes labeledby and describedby. Use titles, labels, and legends with fieldsets and form controls. Make sure hyperlinks are adequately written and don't just say things like "click here.
2. Group your website DOM in a logical and semantic manner.. screen readers move through the website in a linear fashion, so while visually you might have things all over the place, right the HTML code in the order that you want everything presented in a linear fashion. Screen readers will ignore position CSS but Will be affected by tab index. Screen readers use landmark such as headings and links to navigate quickly through elements on a page, so make sure to keep your heading levels in order of importance, and do not have more than one h1 on any given page. Do not use headings to make text bold or strong, only use them to semantically define appropriate information on the page.
3. Use the alt attribute with any important images on your site that you want everyone to experience. Right descriptive but brief descriptions in the alt attribute for images. If you want a screen reader to completely ignore a decorative image, just use the alt="" method.
4. Pay attention to colors and contrast if you are concerned about visually impaired people trying to read text and links/graphics on your site. Make appropriate, easy to read color choices with good contrast between the text and the background; no putting very light gray text on white, etc.
5. Title your page! Make sure the title of each page on your site is something logical that thoroughly defines what page we are on. That is the first thing the screen reader will encounter when loading a new page. Don't make it the same thing for each unique page, each unique page needs to have itself defined by its title.
6. Stay away from using any JavaScript unless you decide to completely learn and understand the aria attributes for live regions and dynamic content. It's not that hard to learn and implement, as long as you are thinking about it when designing anything with JavaScript interaction. Try not to use any deprecated code, keep everything simple and clean with HTML 5 and there landmark regions such as Maine, article, header, contentinfo, section, etc. rather than using divs all over the place.
7. Add a skip content link to the very top of each page before anything in the header. This link will make the screen reader cursor skip past the navigation bar and move down to where you want it to go, usually the first heading for the start of the main content in the page. This makes screen reader navigation a hell of a lot easier especially if you will have a lot of clutter or navigation links set up in the nav section.
Stick to those methods and you should have yourself a fairly accessible website. There is more to it, but you have to pay me to help you at that point :-)
1. Label everything. Use titles, names, ID attributes, and learn the aria attributes labeledby and describedby. Use titles, labels, and legends with fieldsets and form controls. Make sure hyperlinks are adequately written and don't just say things like "click here.
2. Group your website DOM in a logical and semantic manner.. screen readers move through the website in a linear fashion, so while visually you might have things all over the place, right the HTML code in the order that you want everything presented in a linear fashion. Screen readers will ignore position CSS but Will be affected by tab index. Screen readers use landmark such as headings and links to navigate quickly through elements on a page, so make sure to keep your heading levels in order of importance, and do not have more than one h1 on any given page. Do not use headings to make text bold or strong, only use them to semantically define appropriate information on the page.
3. Use the alt attribute with any important images on your site that you want everyone to experience. Right descriptive but brief descriptions in the alt attribute for images. If you want a screen reader to completely ignore a decorative image, just use the alt="" method.
4. Pay attention to colors and contrast if you are concerned about visually impaired people trying to read text and links/graphics on your site. Make appropriate, easy to read color choices with good contrast between the text and the background; no putting very light gray text on white, etc.
5. Title your page! Make sure the title of each page on your site is something logical that thoroughly defines what page we are on. That is the first thing the screen reader will encounter when loading a new page. Don't make it the same thing for each unique page, each unique page needs to have itself defined by its title.
6. Stay away from using any JavaScript unless you decide to completely learn and understand the aria attributes for live regions and dynamic content. It's not that hard to learn and implement, as long as you are thinking about it when designing anything with JavaScript interaction. Try not to use any deprecated code, keep everything simple and clean with HTML 5 and there landmark regions such as Maine, article, header, contentinfo, section, etc. rather than using divs all over the place.
7. Add a skip content link to the very top of each page before anything in the header. This link will make the screen reader cursor skip past the navigation bar and move down to where you want it to go, usually the first heading for the start of the main content in the page. This makes screen reader navigation a hell of a lot easier especially if you will have a lot of clutter or navigation links set up in the nav section.
Stick to those methods and you should have yourself a fairly accessible website. There is more to it, but you have to pay me to help you at that point :-)
HariboG 2 points 6y ago
Great comprehensive answer, this is what I always learned as protocol for making websites accessible. Headings are for navigation not for "pretty colors" and cosmetic features. Alt text for any images with a proper description, not just "picture of dog" more like "large brown dog running through tall grass."
R1ckx [OP] 1 points 6y ago
Thank god we already kept that in mind then :) Thank you for your reply!
R1ckx [OP] 1 points 6y ago
This is awesome, thank you very much! So much stuff we didn't think about. Currently our website is very javascript dependant, so we'll need to change some code and/or get rid of it completely I guess.
Little side question: what's the feasability of making a subdomain (like simple.domain.com or blind.domain.com) which loads the page with a different style that has high contrast, no cluttering menus (and other pointless divs like ads), less "animations" and larger text?
Little side question: what's the feasability of making a subdomain (like simple.domain.com or blind.domain.com) which loads the page with a different style that has high contrast, no cluttering menus (and other pointless divs like ads), less "animations" and larger text?
Marconius 2 points 6y ago
For overall design and not to segregate the user experience, I highly recommend that you just build in options within the main site that you can click on to switch over to a new CSS. Create new style sheets with larger text, different color contrast, etc., or otherwise make the design robust and easily readable and leave it to the individual user to utilize the browser zoom feature or their own magnification software to Peru's your content. It's honestly much less work to make your site completely accessible in one go rather than managing two different sites at once. Although ideal, you don't have to get rid of all your JavaScript as long as you learn and understand the aria attributes and workflows. Keep the use of JavaScript to a minimum and don't use it just to use it or because it make something look pretty. As long as it is functional and logical and properly labeled, it should mostly be OK.
Laser_Lens_4 2 points 6y ago
I don't know much about web design. I've only got rudimentary HTML knowledge and I forgot most of the CSS and Javascript I learned, but I will say this. Don't use light grey text on white backgrounds, or dark grey backgrounds behind light grey text. So many modern sites do this and it drives me up the wall.
It also helps to give links proper attributes. When my screen reader says "click here. link" it tells me nothing useful.
It also helps to give links proper attributes. When my screen reader says "click here. link" it tells me nothing useful.
intrepidia 2 points 6y ago
Great answer by Marconius. I always send people to this resource which is more comprehensive.
http://webaim.org/blog/wcag-20-checklist/
http://webaim.org/blog/wcag-20-checklist/
R1ckx [OP] 1 points 6y ago
Thank you! We'll definatally check this out as well!
HariboG 1 points 6y ago
> http://webaim.org/blog/wcag-20-checklist/
$1 is another useful tool. Not a catch all but a good place to start and test.
$1 is another useful tool. Not a catch all but a good place to start and test.
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.