How to design websites for blind and partially sighted people | Hacker News Reader

How to design websites for blind and partially sighted people

whatusersdo.com

70 pointsOJQD19 comments

Accessibility (a11y) is an interesting and exciting topic, but it's exhausting to see yet another SEO guy to add his two cents about it. From a technical point of view, web a11y is almost exclusively about semantics or machine readability. There are two kinds of machines: web crawlers and screen readers for visually impaired humans. For whom would you like to work? You are not magically improving a11y by doing good SEO, you are magically improving SEO by doing good a11y. Stop listening to SEO consultants. Build good websites.

Recommendable a11y resources include the A11Y Project[1], WebAIM[2], the W3C[3], and GOV.UK[4]. The WAVE tool[5] and the Vox Media accessibility guidelines[6] are also really helpful.

[1] http://a11yproject.com

[2] http://webaim.org/intro/

[3] https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html

[4] https://accessibility.blog.gov.uk

[5] http://wave.webaim.org

[6] http://accessibility.voxmedia.com

The US government also put out a set of accessibility guidelines: https://www.ada.gov/pcatoolkit/chap5toolkit.htm

I've had a couple US clients specifically request "ADA compliance".

In Germany it's the BITV: http://www.barrierefreies-webdesign.de/bitv/bitv-2.0.html

Is there a verifier/validator that will flag misuses/non compliance? Even if it's an incomplete set of misuses, it would still be useful.

I built a tool that does just this.

Its a CLI tool that inspects HTML pages and determines if it meets a limited number of WCAG checks.

https://github.com/data61/wcag-zoo

Here is an ASCIInema that shows how it works (which I should embed in the readme)

https://asciinema.org/a/104903

It was mostly build so I could add it to my CI builds to check WCAG compliance and stop deploys that didn't meet it.

Thanks, this looks really useful.

My $.02 from an uneducated view on this topic is that it would be nice to be able to have a mode to "test the whole zoo" or "the whole zoo, excluding: '...' ". The zoo metaphor is a little odd btw.

> Use high contrast between the background colour and text: WCAG 2.0 AA requires a contrast ratio of 4.5:1 for normal text and 3.1 for large text. Large text is considered 14 point and bold text, or 18 point or larger text.

Grey text is all the rage these days, as are gray backgrounds. Dark grey text on a light grey background is difficult for many fully-sighted people to read, yet it persists on many websites (including HN — the visited link at the top of the page is #828282 and it's presented on a background of #F6F6F0. This yields a contrast ratio of 3.54:1, well shy of the recommended 4.5:1.)

The contrast problem also manifests on websites that have scrolling background images, which move underneath text and can create tricky contrast issues. Ironically, I've even seen these problems on accessibility-focused websites.

To be honest, I'm not sure how to fully solve this problem. I think as long as scrolling background images are popular, this will continue to be an issue. The only "fix" I can think of is to only use images that are mostly light or mostly dark, so that a single color of text can comfortably be read on top of them. But most images that people like to use in this scrolling are bright and dynamic, with light regions and dark regions. This doesn't bode well for text contrast or accessibility.

Something I ran into while building a personal website was HTML elements tied to styling elements. Some issues were fixed by using the correct semantic element and overriding every unwanted default style, but some styles and features simply aren't available for the correct semantic element. I felt I was constantly abusing the language to get the look and features I wanted.

I actually made a chrome ext that uses im2txt to help blind/partially sighted individuals get scene descriptions for images. Perhaps that can make up for the fact that a lot of devs don't take the time to write alt tags for their images.

http://abhinavsuri.com/aat

This is really cool! Thanks for sharing.

If you're interested in this, I highly recommend the author of EMACSPEAK's blog [1]. Very interesting, innovative stuff (at it least seems that way to me, I'm not an expert on TTS systems or anything).

[1] http://tvraman.github.io/emacspeak/blog/articles.html

Making websites for the blind sounds a lot like 'making music for the deaf'. It can be done and people are doing it, but it just seems like the most inefficient thing to do.

I don't know whether you are some miserable provocateur or just an idiot. Either way, that was a very bad analogy. And I don't say 'bad' with a moral connotation. It was just stupid, really.

I see that you maybe were alluding to the fact that blind people can't SEE the page, but you ignore that they can READ it with assistance of software/hardware in a variety of ways. The article goes in detail about that.

While I completely agree with you, your comment isn't very constructive. It attacks the user, informs him his argument is weak, and provides no argument or counterpoint to the discussion.

Yes, I'm sorry. I was offended by that comment. Hopefully the edit fixes that.

> I don't know whether you are some miserable provocateur or just an idiot.

I like to think of myself of neither of those, but if I have to choose I'd rather be a happy idiot than a miserable provocateur.

> I see that you maybe were alluding to the fact that blind people can't SEE the page, but you ignore that they can READ it with assistance of software/hardware in a variety of ways. The article goes in detail about that.

I noticed that, yeah.

The point that I failed to get across (OK, maybe I was being a provocateur - or maybe I was just too lazy to properly make my point, I don't remember) was that I think that blind people should have a better alternative than a website which was primarily designed as a visual thing, but then made accessible for them as an afterthought.

When you are making a site accessible for blind people, do it well and provide a separate page for them, without the visual and textual cruft. For governmental websites, it might be even appropriate to have a dedicated phone number.

It's also "inefficient" to build elevators. I wonder why people do that …

Making wheelchair ramps and wide doors for the physically disabled sounds a lot like 'making music for the deaf'. It can be done and people are doing it, but it just seems like the most inefficient thing to do.

We design buildings with accessibility in mind, why should we not do the same for websites? Blind and visually impaired people have just as much use for the internet as you do.

Edit:

'Making music for the deaf' is a poor use of simile that doesn't really represent the reality of the situation. A more realistic and illuminating analogy would be websites for the visually impaired are like subtitles for the deaf.

People who are deaf can still enjoy music...just crank the bass up. http://www.huffingtonpost.com.au/entry/deep-bass-sounds-musi...

Reply on news.ycombinator.com