10 ms·
Tota11y
- StavrosK 11y agoThis 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!
- rcaught 11y agoThis 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 11y agoBut 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 11y agoYeah spot on. Accessibility is not something you show an award for. It's expected it will work on its own.
- rcaught 11y agoIt wouldn't be an award, it would be a grade. Compliance and accessibility notices on websites have been used extensively over the years.
- Roodgorf 11y agoBut 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 11y agoIt 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 11y agoThat'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.
- cupofjoakim 11y agoOh, I've been looking for something like this. It's definitely going to help me with accessibility.
- prezjordan 11y agoReally glad to hear that :) Let me know how the experience goes for you!
- liviu- 11y agoMaybe 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 11y agoDefinitely 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- 11y agoAlthough 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.
- prezjordan 11y agoInteresting, thanks for the explanation. Perhaps we can detect if a popular userscript manager is installed and provide a one-click link that way. Not sure if this is possible though.
- ryukafalz 11y agoChrome/ium apparently has had built-in support for a while: https://www.chromium.org/developers/design-documents/user-scripts https://www.chromium.org/developers/design-documents/user-sc...
- Joe8Bit 11y agoIs there a plan to able to run this in a CI environment?
- mkozlows 11y agoIf 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 11y agoAwesome, thanks!
- prezjordan 11y agoTo echo mkozlows, definitely check out axe-core. They recently open-sourced the tool and it's chock full of great a11y testing. At Khan Academy we use Chrome's Accessibility Developer Tools (https://github.com/GoogleChrome/accessibility-developer-tools/ https://github.com/GoogleChrome/accessibility-developer-tool...) as part of our testing infrastructure. A few of us also have the browser extension to do some manual testing, which is what tota11y is for. tota11y uses Accessibility Developer Tools internally.
- ohitsdom 11y agoHaving an <h4> tag below an <h2> tag is an accessibility concern? What does incrementally decreasing in heading size have to do with accessibility?
- vanderZwan 11y agoCouldn't even be bothered to read the explanation, could you? > "[...] In order to maintain a consistent outline of the page for assistive technologies..."
- ohitsdom 11y agoI read that. I still don't understand how an h4 directly under an h2 impairs accessibility.
- a3n 11y ago1.2 1.2.1 1.3 1.3.1.1
- edraferi 11y agoPerhaps 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 11y agoYes. 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
- agentgt 11y agoI 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 11y agoI 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 11y agoHmm 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%"
- edraferi 11y agoDoes the contrast checking catch that?
- acdha 11y agoThe problem is that you'd need to run the contrast test after applying the transform for various types of color blindness because they're fairly different and some seemingly high-contrast color combinations end up fairly similar: http://www.color-blindness.com/2008/10/02/color-blindness-simulator-new-tool-released-on-colblindor/ http://www.color-blindness.com/2008/10/02/color-blindness-si... If you want to test this on your own, http://colororacle.org/ http://colororacle.org/ acts as a screen overlay so you can load any sort of application, web page, etc. and hit a hot-key to see what it looks like with each of the different types of color blindness.
- mkozlows 11y agoWCAG contrast calculations are designed to account for this: "Color deficiencies can affect luminance contrast somewhat. Therefore, in the recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text and the background." http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contr... So if you pass WCAG color contrast checks, you'll be accessible to users with color deficiency as well as low vision.
- csomar 11y agoHere 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.
- metaobject 11y agoI'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.
- davidbarker 11y agoI agree — disabling zooming is frustrating. Have you tried the "Reader" option in Safari? It works well for a lot of websites.
- cycomachead 11y agoThe reader option is awesome when it exists, but there's currently no way to set a site to always enable it. Safari itself makes the determination on a page by page basis. Or at least that used to be the case.
- Rifu 11y agoI 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).
- jameshart 11y agoAlso screws with ad layout and visibility. For sites that are primarily beholden to ad revenue, that can be a dealbreaker.
- locokoko 11y agoI just ran into this very problem. My workaround includes checking the window width with JQuery and changing the fixed status box (originally on the right side of the page) to floating at the top should the width be below a certain margin. Is this an acceptable solution? (I am just beginning web dev in lisp)
- prezjordan 11y agoHey 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
- paulirish 11y agoThis project arrived at the right time. We're adding accessibility insight & debugging tools like this directly into the Chrome DevTools and the lead developer of the Chrome Accessibility Developer Tools extension is leading the effort. Our mocks actually look quite similar to what you have here and I'll definitely ping you separately to get feedback on what the browser can do to help. Thanks
- prezjordan 11y agoHey Paul, Love the work Alice & co are doing. We're big users of Accessibility Developer Tools (https://github.com/GoogleChrome/accessibility-developer-tools/ https://github.com/GoogleChrome/accessibility-developer-tool...) at Khan Academy both as part of our automated testing process and now as part of tota11y. Really excited to see it to make its way into DevTools proper! Been rocking the extension for a few months now.
- aikah 11y agoNice, 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.
- jkoudys 11y agoThe 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!
- kungfooman 11y agoMany thanks for MIT license, would just ignore this if it had anything with GPL in name.
- c0lDz3r0 11y agodat is awesome!
- c0lDz3r0 11y agodat is awes0m3
- hofstee 11y agoI 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 11y agoI'm confused about how this is MIT yet to contribute I have to sign a Khan Academy CLA? That doesn't seem ... MIT-y
- Nzen 11y agoThis 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.