Babylon-flavoured Tota11y One-stop Turnkey Enterprise Visual Accessibility Checking Solution

Tota11y is a simple tool to visualise the most widespread web accessibility errors in a non overwhelmingly-techy way. You can read the instructions.

Drag this link to your Firefox/ Chromium/ Safari bookmarks bar:

Tota11y

See code on Github.

(Here's the bookmarklet for testing the dev version, and here's a Chromium extension)

Version 1.3.1 ("Venomous Harmonica")

Some silly sausage (me) forgot that the marvellous HTML5 <details> element is keyboard-focussable, so that's now also in the Focus Order plugin. As it can contain other focussable elements, the plugin will open all details blocks so that any inner elements' tab order can be displayed (and give the auto-opened details element a green outline).

Version 1.3.0 ("Saxon Violins")

Adds Focus order plugin exposes elements that naturally take focus, or have a tabindex applied to make them focussable. Basically, if you have a pseudo-button or similar control made out of divs and JS and it is not highlighted, you have a problem.

It will guess at the tab order (not guaranteed due to under-specification of tabindex, different browser behaviours, and also clickable things in iframes). Verify any weirdness by simply advancing through the page with the 'tab' key.

Thanks to flame-haired FOSS Adonis Stuart Langridge for help with some jQuery.

Version 1.2.0 ("Lame Duckcaller")

Version 1.2.0 adds Black Duck security testing.

Version 1.1.0 ("Recalcitrant piccolo")

A PR from an external org! This uncomments out the Labels plugin that I had commented out. (Didn't hurt to restore it as they needed it).

Version 1.0.1 ("Rusty trombone")

New naming convention replaces adjective+animal I've never eaten. Version 1+ are adjective+musical instrument I've never tried to play.

Bug fixes:

• Tweaked CSS to never transform text style. (whitehouse.gov was setting all labels to be uppercase)
• Main overlay now has scroll:auto

Version 1! ("Justifiably melancholic otter")

Tarted up the design so it has a nice border and will show up against dark cookie banners etc.

Version 0.7 ("Psychopathic tapeworm")

• Contrast checker now ignores transparent (therefore, invisible) text, eg on Amazon, Guardian

Version 0.6 ("Concupiscent hedgehog")

• Empty elements plugin: downgrade empty p and multiple br elements to warning (was error), as they may indicate shonky CSS but aren't a disaster for a11y
• Add tests for empty nav, header, main, aside, footer, figcaption. These might be announced to screen reader users (but will be empty) and justifiably make people grumpy.
• When hovering over a tota11y label, max its z-index in case it is obscured by a nearby label in busy pages.
• Make the menu responsive when screen is zoomed to 200%

Version 0.5 ("Insouciant cormorant")

• A criminally ugly test to suppress reporting contrast violations if text is visually hidden using the common clip pattern which we use on Babylon. This is to reduce false positives which erode trust in the test.
• Feelthy hack to fix clean-up bug in new Titles module

Version 0.4 ("Sultry panda")

• New Titles module to show missing titles on iframes (error), and warnings for superfluous titles on other things erroneously put there to placate the false idols of Search Engine Optimists (see The Trials and Tribulations of the Title Attribute)

Version 0.3 ("Mellifluous ostrich")

• Correct calculation of contrast ratio in the contrast module to take account of boldness of text and not just rely on font-size. (Thanks Mozilla dev tools!)

Version 0.2 ("Uninhibited gibbon")

• New module to highlight empty elements, eg heading and paragraphs, which was a constant bugbear
• Tweaked img/alt module to ask users to check accuracy of alt text (rather than perhaps falsely-reassure that presence of alt text is actually useful)

Version 0.176303987 ("Lachrymose rhinoceros")

• Add links to Babylon DNA guidance where applicable
• Split out modules into 'designers'/ content editors and Developers (was 'Experimental')

Version 0.1 ("Obstreperous lemur")

• New module to expose HTML5 landmarks (footer, header etc) and explicitly set ARIA roles (but not those that are implicit, because that's not as useful for diagnosing coder errors)
• change the name of "screenreader wand", which over-promises (screen readers often give other info about form fields, e.g. required). Don't want to suggest that Tota11y replaces testing with Assistive Technologies. added exposure of value attribute on input type=submit fields (as that is what gets exposed and wasn't being reported). Add value of aria-describedby attributes as that is also passed to AT, especially as hints/ instructions on form fields

Blah blah

Forked from Khan Academy (who seem to have abandoned it) by Bruce for Babylon Health. Contains MPL 2.0 code from Firefox devtools (module plugins/contrast/index.js).