
Tota11y - chrtze
http://khan.github.io/tota11y/
======
prezjordan
Hey HN!

I built this utility with the help of two colleagues[0][1] after working on
accessibility at Khan Academy for a few weeks, and seeing first-hand the
process of evangelizing accessibility on a dev team. Our automated tests were
far from approachable (and became more annoying than helpful), so we built
tota11y to make the _manual_ testing experience more interactive and
educational (we like teaching things).

I touch on this in our engineering blog [2]

Anyway, super thrilled to see tota11y near the top of HN this morning, and
happy to answer any questions you may have.

[0]: [https://twitter.com/himichelletodd](https://twitter.com/himichelletodd)

[1]: [https://twitter.com/rileyjshaw](https://twitter.com/rileyjshaw)

[2]:
[http://engineering.khanacademy.org/posts/tota11y.htm](http://engineering.khanacademy.org/posts/tota11y.htm)

~~~
aikah
Nice, what would be cool is to have something like this online (as a service),
that could fetch a page and make a report.

The report could then be shared with web designers who use an insufficient
contrast ratio between their background and their text for instance, no need
to be visually impaired to be bothered by sites who do that kind of stuff, and
they are way too many.

~~~
breckenedge
WAVE[1] at WebAIM will do this for you. It was built by a non-profit dedicated
to online accessibility. Just type in an address and go. They also have a
Chrome plugin [2] that runs the same accessibility checks in your browser and
produces a report. I found it very helpful on a recent accessibility project.
Nice to see more developers caring about this.

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

[2] [https://chrome.google.com/webstore/detail/wave-evaluation-
to...](https://chrome.google.com/webstore/detail/wave-evaluation-
tool/jbbplnpkjmmeebjpijfedlgcdilocofh)

------
metaobject
I'll post this here since people interested in accessibility will be reading
this thread.

I have terrible vision. One of my pet peeves is when I go to a website on my
phone through safari that doesn't allow me to zoom the text. For those
occasions, I came across a JavaScript bookmark that I created on my phone that
runs to undo whatever is preventing me from zooming in.

I'm not a web developer (I do desktop/server software development), so I have
no idea how or why certain pages implement this policy/style. It just seems a
little arbitrary to choose a font size for your site and not allow visitors to
zoom-in in case they have trouble reading the text.

~~~
Rifu
I believe one of the reasons for preventing zoom-in is because it plays havoc
with any element that is "fixed" in your browser (ie pretty much every nav
bar/fixed header you'll ever encounter).

~~~
jakobegger
While we're at it, please also get rid of fixed elements, especially on mobile
devices. They obscure parts of the page for limited value, and they often
break in horrible ways.

~~~
leppr
But with more and more mobile web browsers hiding the address bar, how is that
person reading over your shoulder going to know what's the name of that
awesome site you are viewing?

------
rcaught
This is really great. Just two suggestions.

While minimised, the tab could display a score like A+ - this could
incentivise websites to permanently present it on their pages as a badge of
pride (while ensuring visibility to any changes that degrade the score).

Secondly, if you link to the project within the maximised tab, you'll likely
see greater adoption.

~~~
Kartificial
But why would you place this tab on a live site? It's a great tool for
developers, but there's no need to place this in production imo.

~~~
sparaker
Yeah spot on. Accessibility is not something you show an award for. It's
expected it will work on its own.

~~~
rcaught
It wouldn't be an award, it would be a grade. Compliance and accessibility
notices on websites have been used extensively over the years.

~~~
Roodgorf
But what would be the incentive for other site owners to use it then? It seems
like in this scenario, the only time anyone would want to use the tool on
their live site would be when they are sure they are getting an A+, any other
sites that don't care about that score just wouldn't add the tool and any
changes that might lower that score would presumably being taken care of
before rolling out to production.

It seems like it would just turn into unnecessary bragging for the site owner.
I wonder if the scoring would still be useful for development though, or if
they would just try to fix as many problems as possible anyway.

------
corney91
It looks very similar to this tool:
[https://squizlabs.github.io/HTML_CodeSniffer/](https://squizlabs.github.io/HTML_CodeSniffer/)

Very handy having things like these as bookmarks.

~~~
prezjordan
That's a huge compliment, thank you!

HTML_CodeSniffer is significantly more comprehensive than tota11y, so I
encourage everyone reading this to also check out corney91's link.

tota11y takes more of a visualization approach, because in our experience
being greeted with several dozen errors which we've never seen before didn't
motivate us to keep the site accessible. My aim was to make the experience
more interactive while explaining errors (and fixes!) as best I can.

We're still figuring out where tota11y fits in this great big world of a11y
testing, but so far folks have responded well to this approach.

------
csomar
Here is a WordPress Plugin for it: [https://github.com/omarabid/wp-
tota11y](https://github.com/omarabid/wp-tota11y)

The script will be loaded only if an admin user is logged. So you can rest
assured this will not annoy your users.

------
liviu-
Maybe I'm in minority, but I'd have preferred a userscript/extension
alternative for those who don't use a bookmarks bar.

edit: Never mind, made a quick one for myself seeing that's MIT licensed
[https://gist.github.com/liviu-/62e8ce91b8723ef1a10a](https://gist.github.com/liviu-/62e8ce91b8723ef1a10a)

~~~
prezjordan
Definitely not in the minority. Bookmarklet was a little easier to get out the
door, and I haven't found a great way to maintain extensions for several
browsers. Will definitely up its priority.

Userscript is an awesome idea, thanks for taking the time to build this out.
Is this something that will work in all browsers? What's the installation
process like? Perhaps we can build one of those into the project page as well.

~~~
liviu-
Although userscripts themselves are cross-browser compatible, I don't know of
any browser that offers native support for them. However, there are extensions
that manages them (Greasemonkey for Firefox, Tampermonkey for Chrome, etc.)
Once the user has a userscript manager installed, the installation process is
a matter of a one click job.

~~~
ryukafalz
Chrome/ium apparently has had built-in support for a while:

[https://www.chromium.org/developers/design-documents/user-
sc...](https://www.chromium.org/developers/design-documents/user-scripts)

------
StavrosK
This is fantastic, I love how it's a bookmarklet, which means I don't have to
mess around with bower to make my sites accessible. Great job!

------
agentgt
I am surprised the tool doesn't do any color blind checking (ie putting red
and green next to each other is generally not a good idea).

~~~
elliottcarlson
I wonder how hard it would be to cover all types of color blindness - red and
green is only one possible issue with deuteranopia - there are other potential
color combinations within that, and two other types of color blindness as
well.

~~~
edraferi
Hmm you could integrate some information about the prevalence of different
types of color blindness.

"This color combination causes mild problems for 15% of people and severe
problems for 5%. Consider X and Y to reduce impact to 3%"

------
jkoudys
The programmer in me loves how accessibility auditing enforces best-practices
around semantic HTML, and my business-side loves making it cheaper to reach a
wider audience.

Great project!

------
cupofjoakim
Oh, I've been looking for something like this. It's definitely going to help
me with accessibility.

~~~
prezjordan
Really glad to hear that :) Let me know how the experience goes for you!

------
hofstee
I remember seeing a chrome extension a while ago that I hoped would be like
this, but instead was a plaintext list of guidines and reminders that didn't
react to your site at all.

------
donatj
I'm confused about how this is MIT yet to contribute I have to sign a Khan
Academy CLA? That doesn't seem ... MIT-y

------
Joe8Bit
Is there a plan to able to run this in a CI environment?

~~~
mkozlows
If you want a11y testing for a CI environment, take a look at aXe, which is
designed specifically for that purpose: [https://github.com/dequelabs/axe-
core](https://github.com/dequelabs/axe-core)

~~~
Joe8Bit
Awesome, thanks!

------
kungfooman
Many thanks for MIT license, would just ignore this if it had anything with
GPL in name.

------
Nzen
This was on hn 17 and 21 days ago.
[https://news.ycombinator.com/item?id=9710958](https://news.ycombinator.com/item?id=9710958)
It's nice, I was able to see, via the bookmarklet that my <a> colors are
unclear.

------
ohitsdom
Having an <h4> tag below an <h2> tag is an accessibility concern? What does
incrementally decreasing in heading size have to do with accessibility?

~~~
vanderZwan
Couldn't even be bothered to read the explanation, could you?

> _" [...] In order to maintain a consistent outline of the page for assistive
> technologies..."_

~~~
ohitsdom
I read that. I still don't understand how an h4 directly under an h2 impairs
accessibility.

~~~
edraferi
Perhaps screen readers can be set to read out the major headings to help
people figure out what part of the document they want to read. This would have
a level of detail or verbosity control.

First you read h1, find the right header. Then h2 with 2 levels of detail,
which hits h2 and h3. You miss the sub-section you wanted because it was
marked h4 instead of h3.

It's a broken tree structure... that'll cause problems any time somebody wants
to do a logical traversal.

~~~
steveax
Yes. Screen readers load the page contents into a buffer and allow users to
scan headings, links, etc. having a broken outline structure is potentially
confusing [1]. This is also why descriptive linked text is important (ie: no
"click here") [2]

[1]:
[http://www.w3.org/TR/WCAG20-TECHS/H42.html](http://www.w3.org/TR/WCAG20-TECHS/H42.html)
[2]:
[http://www.w3.org/TR/WCAG20-TECHS/H30.html](http://www.w3.org/TR/WCAG20-TECHS/H30.html)

------
c0lDz3r0
dat is awesome!

------
c0lDz3r0
dat is awes0m3

