
How to design websites for blind and partially sighted people - OJQD
http://whatusersdo.com/blog/how-to-design-websites-for-blind-and-partially-sighted-people/
======
zichy
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](http://a11yproject.com)

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

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

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

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

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

~~~
calibas
The US government also put out a set of accessibility guidelines:
[https://www.ada.gov/pcatoolkit/chap5toolkit.htm](https://www.ada.gov/pcatoolkit/chap5toolkit.htm)

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

~~~
wyldfire
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.

~~~
legostormtroopr
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](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](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.

~~~
wyldfire
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.

------
gnicholas
> _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.

------
syphilis2
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.

------
abhisuri97
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](http://abhinavsuri.com/aat)

~~~
trykei
This is really cool! Thanks for sharing.

------
wcummings
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](http://tvraman.github.io/emacspeak/blog/articles.html)

------
kutkloon7
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.

~~~
enschlnd
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.

~~~
mileycyrusXOXO
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.

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

