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.”
Trusted Web Activity – “a new way to open your web-app content such as your Progressive Web App (PWA) from your Android app”. Basically, get your PWA in the App Store, create a feedback channel via ratings and reviews, use Play Billing.
The F-Word episode 9 – Vadders and I discuss Safari extensions, cascading layers of CSS, what’s new in WCAG 3
Tabula is a tool for liberating data tables locked inside PDF files. “Now you can work with your data as text file or a spreadsheet rather than a PDF!”
Spy pixels in emails have become endemic – “Hey’s review indicated that two-thirds of emails sent to its users’ personal accounts contained a “spy pixel”, even after excluding for spam.”
“Allow this app to personalize advertising for you?” – “Apple defines privacy in a way that benefits its own commercial interests and harms the commercial interests of its competitors. Apple has wrapped its arms around the open internet with a privacy bear hug that is designed to entrench and enrich its own closed ecosystem.”
Link o’ the week: Do accessible websites still need to support Internet Explorer 11? – TL;DR: Yes, because Edge (Chromium) doesn’t deliver a comparable experience for assistive technologies – especially JAWS, Dragon NaturallySpeaking and Zoomtext.(Graham Arnfield)
Prince 14 is out with CSS calc() support, Color emoji fonts and SVG fonts, Multipass formatting with JavaScript and New column and page float features. (Disclosure: I’ve done consultancy on PDF accessibility for them.)
A new history API, “app history” – ” This proposal introduces a new window.appHistory API, which is more directly usable by web application developers to address the use cases they have for history introspection, mutation, and observation/interception.”
Wix has 200 million registered users – like it or not, that’s a huge number of websites. I’d like to see Wix join W3C. (Disclosure: I used to work with Wix and have chums there.)
SmolCSS – “Minimal snippets for modern CSS layouts and components”
What’s Next For HTML Controls? -“In this episode, we’re talking about HTML controls. Why are they so hard to style, and how might that change in the future? Drew McLellan talks to Microsoft’s Stephanie Stimac and Melanie Richards to find out.
#accessiBe Will Get You Sued – Adrian Roselli’s magisterial post about the latest accessibility snakeoil salesmen. We should all buy him a pint as a thank you for researching this stuff in his own time. He’s like the Yoda of accessibility.
Like every other thought-leader, I follow Mike Taylr on social media. Ever since Shingy left AOL, “Mikey” has moved to the top spot of everyone’s Twitter “Futurist Gurus” Twitter list. This morning I awoke to read Twitter abuzz with exictement over Mike’s latest Nolidge Bom:
new interview question: on a whiteboard, re-implement the following in React (using the marker color of your choice) pic.twitter.com/o6F1iMzhQY
Of course, like anyone who’s ever sat a maths exam and been told to “show your working out”, you know that the widely diverse interview panel of white 20-ish year old men is as interested in how you arrived at your answer as in the answer itself. Given Mikey’s standing in the industry and the efficiency of his personal branding consultants, this question will soon be common for those interviewing in Big Tech, as it’s an industry that prides itself on innovative disruption by blindly copying each other. So let’s analyse it.
It’s obvious that the real test is your choice of marker colour. So, how would you go about making the right decision? Obviously, that depends where you’re interviewing.
If you’re interviewing for Google or one of its wannabes, simply set up a series of focus groups to choose the correct shade of blue.
If you’re interviewing for Apple or its acolytes, sadly, white ink won’t work on a whiteboard, no matter how aesthetically satisfying that would be. So choose a boring metallic colour and confidently assert any answer you give with “I KNOW BEST”.
If you’re interviewing for Microsoft, the colour doesn’t matter; just chain the marker to the whiteboard and say “you can’t change the marker, it’s an integral part of the whiteboard”, even after it stops working.
If you’re interviewing for Facebook or one of its wannabes, trawl through previous posts by the panellists, cross reference it with those of their spouses, friends and their friends to find their favourite colours, factor in their Instagram posts, give a weighting to anything they’ve ever bought on a site they’ve signed in using Facebook, and use that colour while whispering “Earth is flat. Vaccines cause cancer. Trump is the saviour. Muslims are evil. Hire me” subliminally over and over again.
Good luck in the new job! May your stocks vest well.
The other day I was tearing my hair out wondering why an HTML form I was debugging wouldn’t focus on the form field when I was tapping on the associated label. The HTML was fine:
<label for="squonk">What's your name, ugly?</label>
<input id="squonk">
I asked my good chum Pat “Pattypoo” Lauke for help, and without even looking at the form or the code, he asked “Does it turn off pointer events in the CSS?”
second time i've seen this recently, so to save others a lengthy bug-hunt: if you have a properly associated <label>, but clicking/tapping it doesn't set focus to its correctly associated <input>/form element… check if for some reason the <label> has pointer-events:none in CSS
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021
Lo and FFS, there it was! label {pointer-events:none;}! This daft bit of CSS breaks the browser default behaviour of an associated label, and makes the hit target smaller than it would otherwise be. Try clicking in the “What’s your name, ugly?” text:
I’m jolly lucky to have the editor of the Pointer Events spec as my chum. But why would anyone ever do this? (That line of CSS, I mean, not edit a W3C spec; you do the editing for the sex and the glory.)
— patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) February 5, 2021
And, yes—the presentation had originally been Material Design floating labels, and this line of CSS had been cargo-culted into the new design. So don’t disable pointer events on forms—and, while you’re at it, Stop using Material Design text fields!
That nice Marcy Sutton asked me to test and give feedback about a new product she’s involved with called Evinced, which describes itself as an “Enterprise grade digital accessibility platform for modern software development teams”. Quite what “enterprise grade” means is beyond me, but it’s basically software that can crawl a website from a root domain and check its code against some rules and report back. There are similar tools on the market, and I’ve recently been working with a Client to integrate Tenon into their workflow, so wanted to compare them.
“Now hang on!”, I hear you say. “automated tools are terrible!”. Well, yes and no. Certainly, overlays etc that claim to automatically fix the problems are terrible, but tools that help you identify potential problems can be very useful.
It’s also true that automated tools can’t spot every single accessibility error; they can tell you if an image is missing alternate text, but not that <img src=dog.png alt=”a cat”> has useless alt text. Only a human can find all the errors.
However, many errors are machine-findable. The most-common errors on WebAIM’s survey of the top million homepages are low contrast text, missing alternative text, empty links, missing form input labels, empty buttons and missing document language, all of which were found by running automated tests on them (which, presumably, the developers never did before they were pushed to production).
I personally feel that a good automated scanner is a worthwhile investment for any large site to catch the “lowest hanging fruit”. While some things can’t be automatically tested, other things can, and other aspects live in a grey area depending on the rigour of the test.
For example, a naive colour contrast test might compare CSS color with background-color, and give a pass or fail; a less naive test will factor in any CSS opacity set on the text and ignore off-screen/ hidden text. A sophisticated contrast test could take a screenshot of text over an image or gradient and do a pixel-by-pixel analysis. To do a test on a screenshot would require actually rendering a page. Like Tenon, Evinced doesn’t just scan the HTML, but renders the pages in a headless browser, which allows the DOM to be tested (although I don’t believe it tests colour contrast in this way).
Evinced uses Axe Core, and open-source library also used by Google Lighthouse. It also contains other (presumably proprietary secret-source) tests so that “if interactable components are built with divs, spans, or images – Evinced will detect if they are broken”.
Reporting
The proof of the pudding with automated site scanners is how well they report errors they’ve found. It’s all very well reporting umpty-squllion errors, but if it’s not reported in any actionable way, it’s not helpful.
Like all the automated scanners I’ve tried, errors are grouped according to severity. However, if those categories correspond with WCAG A, AA and AAA violations, that’s not made clear anywhere.
It’s a fact of corporate life that most organisations will attempt to claim AA compliance, so need to know the errors by WCAG compliance.
One innovative and useful reporting method is by what Evinced calls component grouping: “Consolidates hundreds of issues to a handful of broken code components”.
With other scanners, it takes a trained eye to look through thousands of site-wide errors and realise that a good percentage of them are because of one dodgy piece of code that is repeated on every page. Evinced analyses pages and identifies these repeated components for you, so you know where to concentrate your efforts to get gross numbers down. (We all know that in the corporate world, a quick fix that reduces 10,000 errors to 5,000 errors buys you time to concentrate on the really gnarly remaining problems.)
There’s a vague suggestion that this grouping is done by Artificial Intelligence/ Machine Learning. The algorithm obviously has quite clever rules, and shows me a screenshot of areas on my pages it has identified as components. It’s unclear whether this is real Machine Learning, eg whether it will improve as its corpus of naughty pages gets larger.
I don’t recall signing anything to allow my data to be used to improve the corpus; perhaps a discount for not-for-profits/ time-limited demos could be offered to organisations allowing their data to be added to the training data, if indeed that’s how it “learns”.
User Interface
Many of these site scanners are made by engineers for engineers and have the similar high levels of UX one would expect from JavaScripters.
Tenon has some clunkers in its web interface (for example, it’s hard to re-run a previously defined scan) because it’s most commonly accessed via its API rather than web back-end.
Evinced makes it easy to re-run a scan from the web interface, and also promises an API (pricing is not announced yet) but also suffers from its UI. For example, one of my pet peeves is pages telling me I have errors but not letting me easily click to see them, requiring me to hunt. The only link in this error page, for example, goes to the “knowledge base” that describes the generic error, but not to a list of scanned pages containing the error.
(After I gave feedback to the developers, they told me the info is there if you go to the components view. But that requires me to learn and remember that. Don’t make me think!)
There’s also terminology oddities. When setting up a new site for testing, the web interface requires a seed URL and to press a button marked “start mapping”, after which the term “mapping” is no longer used, and I’m told the system is “crawling”. Once the crawl was complete, I couldn’t see any results. It took a while for me to realise that “crawling” and “mapping” are the same thing (getting a list of candidate URLs) and after the mapping/ crawling stage, I need to then do a “scan”.
A major flaw is the ability to customise tests. In Tenon I can turn off tests on an adhoc basis if, for example, one particular test is giving me false positives, or I only want to test for level A failures. This is unavailable in Evinced’s web interface.
Another important but often-overlooked UI aspect of these “Enterprise” site scanners is the need to share results across the enterprise. While it’s common to sell “per-seat” licenses, it’s also necessary for the licensee to able to share information with managers, bean-counters, legal eagles and the like. Downloading a CSV doesn’t really help; it’s much more useful to be able to share a link to the results of a run and let the recipient investigate the reports and issues, but not let them change any configuration or kick off any new scans. This is missing in both Evinced and Tenon.
Conclusion
The system is currently in Beta and definitely needs some proper usability testing with real target users and UI love. One niggle is the inaccuracy of its knowledge base (linked from the error reports). For example, about the footer element, Evinced says
Since the <footer> element includes information about the entire document, it should be at the document level (e.g., it should not be a child element of another landmark element). There should be no more than one ><footer> element on the same document
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element… Here is a page with two footers, one at the top and one at the bottom… Here is an example which shows the footer element being used both for a site-wide footer and for a section footer.
I saw no evidence of this incorrect assumption about the footer element in the tests, however.
All in all, the ability of Evinced to identify repeated ‘components’ and understand the intended use of some splodge of JavaScriptted labyrinth of divs is a welcome feature and its main selling point. It’s definitely one to watch when the UX is sleeker (presumably when it comes out of Beta).
WCAG 3 Introduction (currently an incomplete draft) and request for comments
First Public Working Draft of CSS Cascading and Inheritance Level 5 – adds cascade layers: “Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way, without altering selectors or specificity within each layer, or relying on source-order to resolve conflicts across layers.”
A simple custom – “For whatever reason some people don’t like the standard HTML checkbox and radio button, they seek to jazz ’em up and in the process the often jizz up the usability/accessibility of these controls.” Steve Faulkner to the rescue!
Get safe – Jezza Keef on the difference between GET and POST
New JavaScript features in ES2021 – but don’t get hung up on version numbers, counsels Mathias Bynens: “numeric separators shipped in V8 v7.5/Chrome 75 in mid-2019. It’ll be part of ES2021 which only officially gets published in mid-2021”.
An Analysis of Privacy on the App Store – “The top 12 [most data-hungry] apps are all from the same company, Facebook. All of Facebook’s apps collect an ungodly amount of data, the nearest other app is LinkedIn which collects 37 fewer data types.”
Content-visibility and Accessible Semantics “if you’re using content-visibility on sections of content including headings and semantic structure, screen reader users won’t be able to benefit from that structure on load. This unfortunately degrades accessibility in favor of loading performance” by Marcy Sutton. Later update: “Update: lots of great discussion from the Chrome team, who say it shouldn’t have that effect and they’re looking into it.”
Rube Goldberg corner: Introducing Zero-Bundle-Size React Server Components – The React community is finally discovering the advantages of doing heavy lifting on the server instead of doing everything on the client.
Hotwire (“HTML Over The Wire”) is “an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.”
