At Barnardo’s, we have a very tight performance budget: All web pages on Barnardo’s products should be less than 100 kilobytes. (This is aspirational rather than a hard rule; as Big Al notes, “To serve users at the 75th percentile (P75) of devices and networks, we can now afford ~150KiB of HTML/CSS/fonts and ~300-350KiB of JavaScript (gzipped)”.)
So while I was prototyping a new project, I decided to use HTML popover to make a ‘lightbox’ when a user clicks on an image or video placeholder to make the media bigger and dim the page behind it. This isn’t quite ready for primetime yet, as it’s not implemented on Safari/Mac, and is still behind a flag in Firefox. But I wanted to kick its tyres because doing something declaratively reduces the amount of JavaScript, leaving more budget for actual content – you know, the thing that the user actually came for.
Also, it’s nice to use a new HTML thingie named after one of my favourite Soviet constructivist artists, Lyubov Sergeyevna Popova (Любо́вь Серге́евна Попо́ва).
As you can see from my popover demo page, it works splendidly for images, with no JavaScript required. Voiceover (on Chrome, as Safari/ Mac doesn’t support it yet) tells me the first image is a button (which it is; popover only works as an attribute on buttons) and that it’s collapsed. Hitting space tells me that the button is expanded, and pressing ctrl+alt+right focusses into the popover, which I can then explore. Hitting esc to dismiss it returns me to the ‘thumbnail’ button, which is announced as once again collapsed.
The video popover is more problematic. All works as expected, but if I start the video and hit esc or click outside the popover to dismiss it, the video disappears from view but the audio continues! Why does the Mr Astley audibly continue to reassure me of his undying devotion and, most importantly, why do those no longer-required bytes keep streaming?
The answer is that when a popover is dismissed, it is set to display:none. Whether the popover spec requires this, or whether that’s just the way the engineers decided to implement it, is unclear to me. You can check that this is how display:none behaves (outside the context of a popover) using this video of Mike Taylr’s legendary Don’t Stop, Donkey Punch video.
As I’m a good web standards wonk, I filed a Chrome bug. I accept that we can’t retrospectively change the behaviour of display:none, as that could break the web. And, as a Chrome engineer pointed out, “one can play audio (or video, e.g., to capture to a canvas) with an element that’s not even plugged into the DOM anywhere”.
So my question is really: should a popover dismissal invoke a special new display mode? display: unperceivable, or display: really-really-none or display: blackhole, or similar? I personally can’t think of a situation in which media showing in a popover should continue playing on dismissal. And if you did want that, you can do it with some JS flim-flam, just as we’ve made popovers for the last 250 years.
But if the point of a declarative standard is to reduce or remove the need for scripting for the most common use-cases, dismissing a video overlay/ lightbox/ popover should default to silencing it and stopping the data transfer, so 99.99% of authors don’t need to write that code.
Government Design Principles “The UK government’s design principles and examples of how they’ve been used.” There’s some great stuff in here.
Getting started with View Transitions on multi-page apps “The best part about MPA View Transitions, is that under the hood it’s just normal “dumb” page loads and we’re progressively enhancing our way into smart, sleek transitions all with zero JavaScript required.”
Where to Put Focus When Deleting a Thing – “TL;DR: When deleting something you should generally move focus to the prior equivalent control or its grouping container”, says glamorous Adrian Roselli
Safari is working on the Popover API, which is nice. Apple evidently want it to be a strong browser for when other engines are allowed to compete on iThings.
Talking of popovers, I found an interesting bug in display:none when looking at using popover as a lightbox for images and videos: Should AV content with display:none continue to play sound?. It seems to me that “display” refers to all perception/ senses. That is, if something is hidden from eyes it should be hidden from ears.
A few unpopular opinions about AI “The most dangerous prospect arising from the current generation of AI is not the technology, but the philosophy espoused by some of its technologists.” – similarly with cryptocurrency, which explains my deep queasiness about both techs.
I Blame the W3C’s HTML Standard for Ordered Lists – I can get unreasonably grumpy about standards, but this is God-tier: “Am I blaming the rise of fascism and the downfall of Western civilization on the W3C’s pig-headed and flawed implementation of the OL tag in HTML? A little, yes.”
On Friday, Vadim and I published episode 19 of our podcast, The F-word, with Léonie Watson as a special guest. Léonie is a web standards mover and shaker, a business owner, a total grooving cat, and also a screen reader user.
Some of her top tips for making sites accessible:
HTML5 introduced a whole bunch of elements nav, main, header, footer, aside and such. And from a screen reader user point of view these were one of the most amazing strides forward I can remember coming across.
Should you have very terse, or detailed descriptive alternate text for images? Léonie says,
Not everybody wants to listen to that detail, but you don’t have to listen to it. If it’s there, you can skip past it, or you can stop and listen to it. If somebody decides not to put it there, that choice has gone right out of my hands.
On ARIA:
should you be using ARIA at all? Because from experience the answer is almost always probably not. I’ve probably seen more websites brought down by using ARIA than I have made better for it. To be honest that’s probably one of the biggest accessibility problems I come across … you’ve got to use it sparingly and thoughtfully.
(This isn’t to say that ARIA is always bad. The W3C Using ARIA spec’s first rule of ARIA is “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so“.)
What’s the biggest accessibility bang for the buck a developer can achieve?
start off with just good quality code. That’s by far and away the best thing you could do for accessibility, especially screen reader accessibility. Screen readers are absolutely dependent on plain old semantic HTML. Divs and spans are our absolute worst thing you can do to us because they’re meaningless.
There you are! Use the right HTML elements for the job. There’s loads more nuance and InfoNuggetz™ in the podcast transcript.
I woke this morning to the news that Molly Holzschlag is dead. I can’t remember how I first met Molly. It feels like I’ve known her since I started working on the Web. She was definitely one of the people who helped me with the CSS for this very site when I made it in 2004 (she emailed me the code to centre the ransom note logo: .header img {margin: 0 auto;}; there was no social media back then).
Here we are at @media conference in London in 2005:
We co-edited a book together. She was perhaps the only person who could persuade me to go on stage with her at a conference dressed as a cowboy. She came to stay at my house, we got riotously drunk and she threw up on my guest bed. We fell out for a while when we both worked at Opera (about the WebKit engine, ridiculously but so typically). I suspect one team wasn’t big enough two Jupiter-sized egos. We made up again, at Future Insights 2014 in Las Vegas, and celebrated by getting so drunk I lost my laptop so we retraced our steps through the bars we could recall visiting, before I remembered I’d left it on my hotel bed.
And that was the last time I saw her. We stayed in touch occasionally after her illness; her last email was some gossip and backstory on persuading Bill Gates that web standards are good idea. She sent it to me after watching a video of me talking about Open Web Advocacy‘s efforts to end the Apple Browser Bans, which she cheered from the sidelines. Perhaps I’ll include some of it if I ever reprise that talk.
As the announcement in the Tucson Sentinel says
She was steadfast in her insistence that the World Wide Web be usable by disabled people, including sites being able to be parsed by screenreader technology for people with impaired vision.
I was about to type “rest in peace”, but Molly was Jewish, and Jewish chums tell me that the phrase “may her memory be a blessing” is more appropriate. But I think she would prefer “may her teachings about an open, inclusive and humane web be passed on”. They will be.
It’s the end of the road for Babylon Health, the London tele-health startup once valued at nearly $2 billion after being backed by likes of DeepMind and deep-pocketed health insurance companies. After the company’s U.S. shares became worthless and its operation turned insolvent earlier this month, last night, the U.K. subsidiary of the business formally went into administration. At the same time, the administrators sold a large chunk of its assets to eMed Healthcare UK, a new subsidiary of U.S. company eMed.
Before mid-December 2022, I worked for Babylon until the whole accessibility team (and over a hundred other people) suddenly didn’t work for Babylon any more. It was difficult to understand why; the company had a colossal swanky office opposite Harrods, full of exciting and expensive pot plants. It had floated on the New York Stock Exchange. The after-effects of Covid lockdowns, the continuing pandemic and consequent changes in the way people access healthcare seemed favourable to a telehealth business. Yet suddenly, everything started to go horribly wrong.
But why? The product hadn’t got worse.
It appears that the answer lies in capitalist conjuring. The flotation had been done through some magical process called SPAC: a “special purpose acquisition company” which Wikipedia describes as “a shell corporation listed on a stock exchange with the purpose of acquiring (or merging with) a private company, thus making the private company public without going through the initial public offering process, which often carries significant procedural and regulatory burdens”.
I didn’t know what that means, but everyone seemed very pleased. Lavish floral displays were commissioned for the HQ, staff were promised a commemorative baseball cap or beanie hat (mine never arrived) and best of all, the founder/ CEO Ali Parsa appeared via TV screen on top of a remote-controlled trolley to ring the NYSE bell:
Happy Days! But they were fleeting. Just 13 months later, Parsa described his own decision as “an unbelievable, unmitigated disaster”. Shares were re-wiggled (a technical term that means they were magically multiplied in value by a factor of fifteen to prevent delisting on the Sock Exchange). From a high of $250 they went down to 3 cents, then were delisted.
Sick people in the USA opened the app to login for an appointment to be told “Babylon’s clinical services and appointments are no longer available. For details about your health plan benefits and to find a new provider, contact your health plan”. US staff were terminated and Babylon filed for bankruptcy protection for two of its U.S. subsidiaries.
After I left the company, I spent a few months contracting before deciding what to do next; I work in tech where many companies are Trojan Unicorns: superficially attractive but packed full of asset-stripping shocktroops of venture captialism. I eventually accepted an offer from Barnardo’s, the children’s charity. I’m too jaded to work for an organisation whose fate is in the hands of Capitalist Conjurers, and hate seeing good work by talented people flushed away because of the vagaries and whims of Money Magicians.
Try as hard as I can, I’m finding it hard to summon up many tears for investors like Saudi Arabia’s sovereign wealth fund or Palantir, who won’t see their money again. But then I doubt that they spare much thought for 2.8 million Rwandan people whose healthcare is now in doubt after Babylon announced it is “winding down” Babyl Rwanda.
Luckily, work bezzie Stinky Taylar saw my lament on the Alumni chatgroup about my lack of SPACalicious Babylon beanie, so posted hers to me. It arrived the day before it all collapsed.
