TL;DR: I’ve forked the splendid but dated Tota11y accessibility visualisation toolkit, added some extra stuff and corrected a bug, and my employer has let me release it for Global Accessibility Awareness Day.
A while ago, my very nice client (and now employer), Babylon Health, asked me to help them with their accessibility testing. One plan of attack is an automated scan integrated with the CI system to catch errors during development (more about this when it’s finished). But for small content changes made by marketing folks, this isn’t appropriate.
We tried lots of things like Wave, which are great but rather overwhelming for non-technical people because they tend to cover the page being analysed with arcane symbols, many of which are beyond a CMS content editor’s control anyway. There are lots of excellent accessibility checks in Microsoft Edge devtools, but to a non-technical user, this is how devtools look:
Then I remembered something I’d used a while ago to demo heading structures, a tool called Tota11y from Khan Academy, which is MIT licensed. Note, this is not designed to check everything. Tota11y is a simple tool to visualise the most widespread web accessibility errors in a non overwhelmingly-techy way. It aims to give content authors and editors insights into things they can control. It’s not a cure-all.
There were a few things I wanted to change, specifically for Babylon’s web sites. I wanted the contrast analyser to ignore content that was visually hidden using the common clip pattern and to correct a bug whereby it didn’t calculate contrast properly on large text, and reported an error where there isn’t one. False positives encourage people to ignore the output and this erodes trust in tools. The fix uses code from Firefox devtools; thank you to the Mozilla people who helped me find it. There’s loads of other small changes.
Khan Academy seemed to have abandoned the tool, so I forked it. Here it is, if you want to try it for Global Accessibility Awareness Day. Drag the attractive link to your bookmarks bar, then activate it and inspect your page. The code is on GitHub–don’t laugh at my crap JavaScript. It was also an “interesting” experience learning about npm, LESS, handlebars and all the stuff I’d managed to avoid so far.
Feel free to use it if it helps you. Pull requests will be gratefully received (as long as they don’t unnecessarily rewrite it in React and Tailwind), and I’ll be making a few enhancements too. Thanks to Khan Academy for releasing the initial project, to my colleagues for testing it, to Jack Roles for making it look pretty, and to Babylon for letting me release the work they were nice enough to pay me for.
Update: Version 1.1 released
17 June 2021: I’ve made some tweaks to the Tota11y UI. A new naming convention replaces “adjective+animal I’ve never eaten”. V 1+ are “adjective+musical instrument I’ve never tried to play”. V1.1 is “Rusty Trombone”.
Since Stuart Langridge and I released Which Three Birdies, it has taken the web by storm, and we’ve been inundated with requests from prestigious institutions to give lectures on how we accomplished this paradigm shift in non-arbitrary co-ordinates-to-mnemonic mapping. Unfortunately, the global pandemic and the terms of Stuart’s parole prevent us from travelling, so we’re writing it here instead.
The name
A significant advance on its predecessors was achievable because Bruce has a proper degree (English Language and Literature with Drama) and has trained as an English Language teacher. “Which” is an an interrogative pronoun, used in questions about alternatives. This might sound pedantic, but if a service can’t make the right choice from a very limited set of interrogative pronouns, how can you trust it to choose the correct three mnemonics? Establishing trust is vital when launching a tool that is destined to become an essential part of the very infrastructure of cartography.
The APIs
The mechanics of how the service locates and maps to three birds is extensively documented. Further documentation has been provided at the request of the Nobel Prize committee and will be published in due course
Accessibility
The Web is for everyone and anyone who makes sites that are inaccessible is, quite simply, not a proper developer and quite possibly a criminal or even a fascist. Therefore, W3B offers users the chance to hear the calls of the most prevalent birds in their location, and also provides a transcript of those calls.
Given that there are 18,043 species of birds worldwide, transcribing each one by hand was impractical, so we decided to utilise –nay, leverage– the power of Machine Learning.
Birdsong to Text via Machine Learning
Stuart is, by choice, a Python programmer. Unfortunately, we learned that pythons eat birds and, out of a sense of solidarity with our feathered friends, we decided not to progress with such a barbaric language so we sought an alternative.
Stuart set about learning R, but the we hit another snag: we couldn’t use the actual sounds of birds to train our AI, for copyright reasons.
Luckily, Bruce is also a musician with an extensive collection of instruments, including the actual kazoo that John Cale used to record the weird bits of Venus In Furs. Here it is in its Sotheby’s presentation case:
Whereas the kazoo is ideal for duplicating the mellifluous squawk of a corncrake, it is less suitable to mimic the euphonious peep of an osprey. Stuart listens to AC/DC and therefore has no musical sense at all, so he wasn’t given an instrument. Instead he took the task of inhaling helium out of childrens’ balloons in order to replicate the higher registers of birdsong. Here’s a photo of the flame-haired Adonis preparing to imitate the melodious lament of the screech owl:
After a few evenings re-creating a representative sample of birdsong, we had enough avian phonemes in the bag to run a rigorous programme of principal components analysis, cluster analysis and (of course) multilinear subspace learning algorithms to learn low-dimensional representations directly from tensor representations for multidimensional data, without reshaping them into higher-dimensional vectors.
All known birds can now reliably be transcribed with 94% accuracy, except for the Crested Anatolian Otter-Catcher. We suspect that the reason for this is the confusion introduced by the Turkish vowel harmony and final-obstruent devoicing. In practice, however, this exception doesn’t affect the utility of the system, because the Crested Anatolian Otter-Catcher is now very rare due to its being extensively hunted in the 19th century. (Fun fact, the bird was once so famous and prevalent that the whole region was known as the Otter-munch Empire.)
Hopefully, this in-depth breakdown of how Which Three Birdies? works will encourage other authors of revolutionary new utilities to open-source their work as we have done for the betterment of all humanity. We’d like to thank the nice people at 51Degrees for commissioning Which Three Birdies?, giving us free rein, and paying us for it. The nutters.
The project offered a simple HTML template to be downloaded, the graphic design of which could be customized by any web designer, but only with the help of cascading styles and one’s own pictures. The goal of the project was to demonstrate the various possibilities of CSS in creating visual web design. The CSS Zen Garden gallery exhibited hundreds of examples of diverse web design, all based on a single template containing the same HTML code.
I too designed a theme, which never made it to creator Dave Shea’s official list, but did the rounds on blogs in its day. For a long time, it languished rather broken, because Dave had rejigged the HTML to use HTML5 elements and changed the names of the classes and IDs that I had used as selectors for styling. To mark the occasion, I spent a while reconstructing it. You can enjoy its glory at Geocities 1996 (Seizure warning!). (You might want to use Vivaldi browser which allows you to turn off animated GIFs).
After I tweeted the link on Saturday to celebrate CSS Zen Garden’s birthday, a number of people noted that the site isn’t responsive, so looks broken on mobile. This is because there weren’t any mobile devices when I wrote it in 2003! Sure, I could rewrite the CSS and use Grid and all the modern cool stuff, but that wasn’t my intent. Apart from class and ID names, the only things I changed were the mechanism of hiding text that’s replaced by images. Tt’s now color:transparent as opposed to floating h3 span off screen, as Dave got rid of the spans. The * html hacks for IE6 are still there. (If you don’t know what that means, lucky you. It was my preferred way to target IE6, which believed there was an unnamed selector above the html element in the tree, so * html #whatever would select that ID only in IE6. I liked it because it was valid CSS, albeit nonsensical.)
It’s there as a working artefact of web development in the early 2000s, in the same way as its “exuberant” design is a fond homage to the early web aesthetic that I first discovered in 1996. And what better accolade can there be than this:
As the former Sr Community Coordinator at Geocities, I salute this!
Dave’s project opened the eyes of many designers and sent a message across our then-small community of Web Standards wonks that CSS was ready for prime-time. I’m told by many that the Zen Garden is still used by educators, 18 years later. Thank you, Dave Shea!
Progress Delayed Is Progress Denied – Do App Store policies harm developers? Is the web a credible alternative? A look at the data from the Dr Caligari of web standards, Big Al
Finger spelling uses your webcam and machine learning to analyze your hand shapes so you can learn to sign the American Sign Language alphabet. Made by American Society for Disabled Children; “We believe that deafness is not a disability, but language deprivation is.”
Seeing the wood for the trees: demystifying markup in 2021 – Ian Lloyid’s HTML De-crapulator will at least allow you to scrutinise the ringpiece of the HTML produced by your framework, without the oozing haemorrhoids of its endless data-, class and onclick attributes.
The talent race is also an ethical race – “good candidates are increasingly dubious of Big Tech’s ethical credentials … technologists know the industry intimately and recognize that toxic companies can blight a résumé” by Cennydd Bowles
You don’t change the world by sitting around being a good person. You change the world by shipping products and making money.
As I wrote in my seminal management book Listen to me because I’m rich, white and clever, IBM wouldn’t have made a shitload of money in wartime Europe if they’d engaged in endless navel-gazing about politics. Their leadership told the staff to Stop Running in Circles and Ship Work that Matters, and get on with compiling a list of people with funny names like “Cohen” or “Levi”.
So here at Brucecamp, we’ve decided that it’s best if our productbots (formerly: employees) do not discuss the sausage machine while we push them into the sausage machine. As I wrote in our other book It doesn’t have to be full of whimpering Woke retards at work, “if you don’t like it, well, there’s the door. Enjoy poverty!”. And that’s all we have to say on the matter. Until the next blogpost. Or book.
In other news, Apple are wankers and I bought a sauna.
Browser Standards Rampage: Can We Have Nice Things? – JS Jabber talk with Jake Archibald about Portals, iframes, App Cache, Service Workers, HTML, Browser History and more. Wouldn’t it be lovely if all podcasts have transcripts?
Space Jam – an analysis of the original 25 year-old site and its replacement: “Although connection speeds and devices keep getting better and better, the web is actually getting slower. We see the increasing bandwidth as an invitation to use more and more stuff in our websites. More images, more videos, more JavaScript.”
They Hacked McDonald’s Ice Cream Machines—and Started a Cold War – “Secret codes. Legal threats. Betrayal. How one couple built a device to fix McDonald’s notoriously broken soft-serve machines—and how the fast-food giant froze them out” – A surprisingly interesting article.
At Facebruce, we strongly disapprove of the recent data leak of 50 million account details. There’s nothing more important to us than your data. Really, nothing. Have you any idea of how much we could have charged people for the information about you that is now out there, available for free, on Torrent sites and on Russian servers?
We had a deal almost signed to show messages to all people who fast during Ramadan, saying “Want some free money? Just send us your home address!”, paid for by “Patriots for the Second Amendment and Jesus”. Of course, it isn’t the money that drives us, it’s that Facebruce is facilitating community by introducing two groups. At Facebruc, we love spreading love and connection, so need to raise a little money to run the service.
So, please, trust us with your data, and click ‘Like’ to keep our engagement figures riding high as our share price!
Next on feed: LGBT+ folks! Send us your address to get a free Rainbow Pride t-shirt! (sponsored by Westboro Baptists)
Link o’ the Week: Accessible Text Labels For All – Sara Soueidan “On improving eCommerce experiences for screen reader users without breaking them for speech-input users”
The F-word, episode 10 in which Vadim and I ruthlessly interrogate Eric Meyer about joining Igalia, what’s coming, CSS Nesting and Cascading Layers
Form design “Best practice, research insights and examples”
The End of AMP – “Google announcing that sites with passing core web vitals will receive a ranking boost on mobile. However, there is another important item in the update – the end of special treatment for AMP pages.”
Web in Play with Bubblewrap – Learn how to transform your Progressive Web App into an Android package with Trusted Web Activity and Bubblewrap.
The end of Applets – This year we bade farewell to Flash, and Applet APIs are to be removed from Java. Interoperable open standards for the win!
Overlay Fact Sheet – Factsheet about deceptive accessibility “repair” overlays (signed by me and 300+ other people in the industry)
AccessiByeBye! – Chrome extension to block overlays like AccessiBe, EqualWeb, MaxAccess, and UserWay.
Survey of Web Accessibility Practitioners #3 Results – “Web accessibility practitioners have notably higher average salaries on average than those reported on the 2020 Stack Overflow developer survey.” Personally, I do it for the drugs, groupies and glory rather than the riches.
Technology sector trust decline deepens – ” the main reason for the trust fall is the increasingly “complicated” relationship between the public and technology — including the spread of misinformation, rising privacy alarm and bias in artificial intelligence.”
Is COBOL holding you hostage with Math? – “floating point math has blown lots of stuff up completely by accident.” why is it so hard to migrate legacy systems?
“Look, I”m fed up at people complaining about Facebruce allegedly “facilitating” genocide. Since we began, we’ve always been about connecting people–initially some nerds to chicks we rated as hot, but now it’s about connecting everybody. We’d like to teach the world to sing, in perfect harmony.
Unfortunately, not everyone wants to sing in perfect harmony. Some people, we are shocked to learn, aren’t actually very nice people. How were we at Facebruce to know what would happen when our algorithms repeatedly recommended members of The Hutu Machete Enthusiasts Club also join the Death To Tutsi Cockroaches group?
We’re not in the content policing business. There’s simply too much of it. And anyway, we’re just a platform. We already have thousands of servers running 24/7 to weed out pictures of nipples (women’s nipples, to be precise) so your Auntie Martha doesn’t clutch her pearls, because offending people in high ARPU markets leads to a drop in engagement.
So there was literally no way for us to know that the Death To Tutsi Cockroaches group was not simply a pest control company. I even went so far as to attempt to verify this, by walking around the HQ trying to find an African person to ask whether cockroaches are a problem, but there was no-one matching that description in the boardroom.
Facebruce is about building communities. We are very active in the GraphQHell community and the Reactionary community. In fact, only last week, we offered free afterhours use of a meeting room in our fifty storey gold-plated HQ to host a meeting of GraphQHell Engineers Against Killing Rohingyas, and even sponsored $100 of pizza for attendees. This shows that we’re taking real action and putting real resources into counteracting Hate Speech on the Facebruce platform.
So that’s cleared up then. Be sure to press “Like!” to demonstrate engagement.”
Next on Timeline: Why Covid is a hoax – evidence from the Protocols of the Elders of Zion!
Link o’ the Week: The Performance Inequality Gap, 2021 – Big Al’s update on devices, networks, browsers, and the new baseline scenario for web performance. A must-read.
Improving React Native Accessibility – “Since May, Facebook has spent that time thoughtfully reviewing and documenting accessibility gaps within React Native. So far the gap analysis has surfaced 90 issues, all of which have been translated to Github issues. Overall, we found that React Native APIs provide strong support for accessibility. However, we also found many core components do not yet fully utilize platform accessibility APIs and support is missing for some platform specific features.”
Launching the Facebook Map “Neighborhoods, parks, and social places are emphasized over “traditional” features like road networks … Our base map design with pale colors and no icons allows overlaid social layers that use more saturated colors to come to the foreground.”
Introducing the Framework Laptop – “the Framework Laptop, a thin, lightweight, high-performance 13.5” notebook that can be upgraded, customized, and repaired in ways that no other notebook can. We’re here to prove that designing products to last doesn’t require sacrificing performance, quality, or style.”
The Kilobyte’s Gambit “Can you beat 1024 bytes of JavaScript?” Combines an incredibly tiny (1.2K) chess engine with pixel art imagining The Queen’s Gambit as an MS-DOS game
The UX on this small child is terrible – “Not only am I VP of Reproduction for this household, but I’ve also been the end-user of this Small Child for over three years now. I’m going to give it to you straight. The user experience is terrible.”
