Bruce Lawson’s personal site

It’s been a while; since the last Reading List! Since then, Vadim Makeev and I recorded episode 6 of The F-Word, our podcast, on Mozilla layoffs, modals and focus, AVIF, AdBlock Plus lawsuit. We also chatted with co-inventor of CSS, Håkon Wium Lie, and Brian Kardell of Igalia about the health of the web ecosystem. Anyway, enough about me. Here’s what I’ve been reading about the web since the last mail.

• An Important Month for Public Sector Web Accessibility – “As of the 23rd of this month, all [UK] public bodies will be expected to conform to Web Content Accessibility Guidelines 2.1”
• RNIB: Challenge inaccessible websites with our new toolkit – “We want to make challenging all inaccessible websites a straightforward process so we’ve created a toolkit to support the public in using the Equality Act & the Regulations to call out websites.”
• Heading off confusion: When do headings fail WCAG?
• How screen readers navigate data tables by permaglam Leonie Watson
• On not choosing WordPress for the W3C redesign project – the agency redesigning the W3C site has chosen Craft CMS rather than WordPress due to accessibility concerns of Gutenberg
• New Apple accessibility features in iOS 14, iPadOS 14, and watchOS 7 – “Apple makes accessibility top-tier importance, which makes the entire experience better for everyone.”
• Adobe unveils ambitious multi-year vision for PDF: Introduces Liquid Mode “Liquid Mode uses AI .. to understand and identify parts of a PDF, like headings, paragraphs, images, lists, tables, and more. It also attempts to understand the hierarchy and ordering of those parts to reformat a static PDF into a more dynamic and customizable experience.”
• On the Web Share API by Chris Coyier
• Reduce the barrier between your Web App and Native Apps with one quick step – “Make your app a Web Share Target to enable cross app interactions” by Ada Rose Cannon
• Interaction Media Features and Their Potential (for Incorrect Assumptions) – cracking article by Chucklin’ Pat Lauke
• Eruda – Console for Mobile Browsers
• Elements of AI – free course in Artificial Intelligence, from University of Helsinki, translated into all EU languages. “Our goal is to educate 1% of European citizens in the basics of AI”
• Giving users and developers more control over focus – Chromium’s focus-visible and Quick Focus Highlight: a user preference that causes the currently focused element to display an indicator for two seconds, regardless of developer’s CSS devilry
• Full bleed layout using simple CSS – “I try to use the least powerful feature of the language to get the job done”, ah music to my ears
• The failed promise of Web Components by Lea Verou
• Bringing the browser developer tools to Visual Studio Code
• Wikipedia Matters (PDF, 48pp) – “a randomized field experiment to
  test whether additional content on Wikipedia pages about cities affects tourists’ choices of overnight visits. Our treatment of adding information to Wikipedia increases overnight stays in treated cities compared to non-treated cities”
• Family wrongly accused of uploading pedo material to Facebook – due to US-EU date confusion in IP address log – “Site accessed on 10/11/2016… is that November 10 or October 11?”
• Mozilla is hiring again after laying off 25% of their staff. It’s interesting to speculate on the new strategy; vacancies include a Strategic Finance Manager running mergers and acquisition, and a Head of Mobile who *must* be in USA, not Asia/ Africa where the action is.
• Top 4 Dying Programming Languages of 2020 – “Don’t learn these 4 languages”. Eh? Learn them! You’ll be in demand when those systems need tweaking. I was offered loads of money because I know COBOL & Fortran. So the cool kids don’t talk about them, but they run Business.
• Zhenhua Data leak: personal details of millions around world gathered by China tech company -“with reported links to the country’s military and intelligence networks”
• we are beautiful – “Our photographer takes photos of volunteers and processes these photos to produce 3D models of their genitals and other body parts. These 3D models are freely available for viewing .. so that you may print them on your own 3D printer”
• The Government Digital Service truly was once world-beating. What happened? – “The UK briefly led the globe in government online services. How has it squandered that lead, asks a former insider”
• Our Voice Assistant Spoke to Google Duplex. Here’s What Happened… – “the first naturally-occurring conversation between AI voice assistants in the wild”

• 5 most annoying website features I face as a blind person every single day – and they are all trivially easy to avoid. No tech esoterica or tricky testing required.
• Intent to Prototype: Customizable <select> Element – “This feature introduces a customizable select HTMLElement, with the working name of <selectmenu>. The element will offer authors full control over its appearance without requiring them to rewrite the model and controller logic underpinning its function.” Exciting work from the Microsoft Edge team.
• AVIF has landed – by Jank Architect – AVIF (pronounced [əˈ vif]) is a new image format that seriously outperforms JPG and PNG. Thanks to <picture>, you can use it now for performance wins.
• Just how much faster is vanilla JS than frameworks? TL;DR: lots. “If you can get away with just vanilla JS, it will give you the best experience, period.If you need state-based UI, Preact is not just smaller than React, but far more performant, too.”
• RFC8890: The Internet is for End Users “when there is a conflict between the interests of end users of the Internet and other parties, IETF decisions should favor end users”. The author of this RFC, Mark Nottingham, blogs about why it is necessary to state this.
• Update on Gutenberg accessibility audit is WordPress doing any better after the crowdfunded audit?
• React Native Accessibility: What, Why, and How? – if you must use it, use it properly.
• Modal – “A simple, accessible modal dialog web component” from Filament Group
• WAI-ARIA usage bookmarklet – by Paciello Group
• How Shopify Reduced Storefront Response Times with a Rewrite “server response times for the new implementation are 4x faster”
• Chinese-Made Smartphones Are Secretly Stealing Money From People Around The World – “Preinstalled malware on low-cost Chinese phones has stolen data and money from some of the world’s poorest people”
• Algorithmic Colonization of Africa “Not only is Western-developed AI unfit for African problems, the West’s algorithmic invasion simultaneously impoverishes development of local products while also leaving the continent dependent on Western software & infrastructure.”

• Enabling Custom Control UI – Interesting doc on potential standard to allow styling any arbitrary part of a native form control, add arbitrary content into any part of a native control while retaining native accessibility & browser behaviours.
• Mobile devices are too expensive for billions of people — and it’s keeping them offline – Nearly 2.5 billion people live in countries where the cost of the cheapest available smartphone is a quarter or more of the average monthly income. This is equal to the share of monthly income the average European household spends on housing and utilities. In Sierra Leone, the average person needs to save six months’ salary to buy the cheapest available smartphone. In India, home to 18% of the world, the price of the cheapest smartphone from leading operator Jio was 206% of average monthly income.
• How to create accessible subtitles – use role=role="doc-subtitle", by Chris Ferdanini. (Why the “doc” prefix? I guess to stop people thinking it’s for video subtitles)
• Modern CSS Solutions for Old CSS Problems – now on my bookmarks bar
• the end of development for PhoneGap and PhoneGap Build – as Anssi wrote, “It’s been a 10+ year journey to make PhoneGap redundant by gradually adding new capabilities to the web platform through standards. The gap has been filled.”
• HTML5 Accessibility “Things are looking pretty damn rosy as far as Accessibility Support in browsers.” – cheery words from Chucklin’ @stevefaulkner
• Designing Adaptive Components, Beyond Responsive Breakpoints – a talk by Stephanie Walter
• A CSS only “click to animate gif” solution by Chris Heilmann
• Unholy Albatross – “responsively stack all columns into rows based on container size, without an intermediary step where some of the columns becomes rows but not other” by Xiao Zhuo Jia
• Using Chrome to generate more accessible PDFs – “Chrome will automatically generate a tagged PDF when you print a web page and choose the “Save as PDF” destination. Tagged PDFs are more accessible to users with disabilities”
• Mozilla’s laying off another 250 people – I hope Firefox can survive.
• Telling China’s Story: The Chinese Communist Party’s Campaign to Shape Global Narratives – Paper by Stanford Internet Observatory & Hoover Institution examining China’s covert and overt capabilities in the context of modern information operations (e.g., propaganda)

If you don’t know the name Igalia, you’ve still certainly used their code. Igalia is “an open source consultancy specialized in the development of innovative projects and solutions”, which tells you very little, but they’ve been involved in adding many features to the open-source browsers (which is now all browsers) such as MathML and CSS Grid.

One of their new initiatives is very exciting, called Open Prioritisation (I refuse to mis-spell it with a “z”). The successful campaign to support Yoav Weiss adding the <picture> element and friends to Blink and WebKit showed that web developers would contribute towards crowdfunding new browser features, so Igalia are running an experiment to get the diverse interests and needs of the web develoment community to prioritise which new features should be added to the web platform.

They’ve identified some possible new features that are “shovel-ready”—that is, they’re fully specified and ready to be worked on, and the Powers That Be who decide what gets upstreamed and shipped are supportive of their inclusion. Igalia says,

Igalia is offering 6 possible items which we could do to improve the commons with open community support, as well as what that would cost. All you need to do is pledge to the ‘pledged collective’ stating that if we ran such a campaign you’re likely to contribute some dollars. If one of these reaches its goal in pledges, we will announce that and begin the second stage. The second stage is about actually running the funding campaign as a collective investment.

I think this is a brilliant idea and will be pledging some of my pounds (if they are worth anything after Brexit). Can I humbly suggest that you consider doing so, too? If you can’t, don’t fret (these are uncertain times) but please spread the word. Or if your employer has some sort of Corporate Social Responsibility program, perhaps you might ask them to contribute? After all, the web is a common resource and could use some nurturing by the businesses it enables.

If you’d like to know more, Uncle Brian Kardell explains in a short video. Or (shameless plug!) you can hear Brian discuss it with Vadim Makeev and me in the fifth episode of our podcast, The F-Word (transcript available, naturally). All the information on the potential features, some FAQs and no photos of Brian are to be found on Igalia’s Open Prioritization page.

Read More

• Open Prioritization and Advocacy – Brian on the experiment and what he personally has decided to pledge
• The F-Word: Brian Kardell on Open Prioritization experiment, Igalia, MathML and the Web commons

• The F-word Episode 5 – Wow, a sonic double whammy! Not only did Taylor Swift release Folklore, but Episode 5 of @fword_dev is just out. Vadim and I invited the George Clooney of web standards, Brian Kardell, to tell us about the Open Prioritization experiment, Igalia, MathML and the Web commons.
• ARIA Grid As an Anti-Pattern – Uncle Aadrdian points out more more bad advice in the ARIA Authoring Practices note. Is there a good, trustworthy alternative to ARIA Authoring Practices guide that devs can copy/ paste from?
• Grids Part 1: To grid or not to grid – “When do you use a grid vs. a table, and why?” by Sarah Higley
• Web Accessibility Checklist – I updated my massive Web Accessibility checklist to include turning off smooth scroll if use prefers reduced motion and to warn against some bits of the ARIA authoring practices, and to trust Uncle Adrian instead
• Inclusively Hiding & Styling Checkboxes and Radio Buttons by Sara Soueidan
• One web component to rule them all? – by Scott Jehl
• All the Ways to Make a Web Component – June 2020 Update – “Compare coding style, bundle size and performance of 33 different ways to make a Web Component.”
• The rise and fall of Adobe Flash – “Before Flash Player sunsets this December, we talk its legacy with those who built it.”
• Ask an expert: Why is CSS . . . the way it is? – Have you ever rolled your eyes and muttered “Just what were the @csswg smoking?”. Web Methuselah Chris Lilley tells you how some of the weirdness got there.
• Google: Mobile-first Indexing – “we’ve begun experiments to make our index mobile-first … our algorithms will eventually primarily use the mobile version of a site’s content to rank pages … If you have a responsive site…you shouldn’t have to change anything.”
• Review of Mozilla’s new Wireguard-based $5/mo VPN service – Mozilla’s VPN is available now for Windows, Android, and iOS.
• Microsoft Announces that it will drop official support of PHP on Windows – “the bottom line is there will likely be very little change for Windows users.”
• Just Too Efficient – Tim Bray
• The Whimsical Club – Websites that spark joy. A curated list of sites with an extra bit of fun.

Yesterday I asked “What’s the most up-to-date info on aria-live regions (and

) support in AT?” for some client work I’m doing. As usual, Twitter was responsive and helpful.

Heydon replied

Should be fine, support is good for live regions. Not sure about output, though … Oh, you’re adding the p _with_ the other XHR content? That will have mixed results in my experience.

Brennan said

I’ve seen some failed announcements with live-regions on VoiceOver, especially with iframes. (Announcement of the title seems to kill any pending live content).output has surprisingly good support but (IIRC) is not live by default on at least one browser (IE, I think).

Some more resources people pointed me to:

• ARIA live regions explainer doc on MDN
• On Demand Live Regions A tiny module for making screen readers announce text on demand, without a visual change to the interface, by Heydon Pickering
• output: HTML’s native live region element – Use role="status" to bridge some gaps in browser/ AT support of <output>
• Accessibility Support Will your code work with assistive technologies?

My chum and co-author Remington Sharp tweeted

We need a universally recognised icon/image/logo for "works offline".

Like the PWA or HTML5 logo. We need to be able to signal to visitors that our URLs are always available.

To the consumer, the terms Progressive Web App or Service Worker are meaningless. So I applied my legendary branding, PR and design skills to come up with something that will really resonate with a web user: the fact that this app works online, offline – anywhere.

So the new logo is a riff on the HTML5 logo, because this is purely web technologies. It has the shield, a wifi symbol on one side and a crossed out wifi symbol on the other, and a happy smile below to show that it’s happy both on and offline. Above it is the acronym “wank” which, of course, stands for “Works anywhere—no kidding!”

Take it to use on your sites. I give the fruits of my labour and creativity free, as a gift to humanity.

• Me me me corner: The F-word episode 4 in which Vadim Makeev and I discuss Apple’s game of monopoly, form slappers, where’s Houdini, browser bugs and Web compat, chicken-killin’ Mike Taylor, and I make another Great Joke.
• Thought Leadership o’the Week: Platform Adjacency Theory by Alex Russell. There’s a lot to get my head around in this article, so I don’t know what I think yet. But I’ll probably end up agreeing with him, because he’s always bloody right about everything (except fashion).
• July’s CSS News – Wooo! Flexbox Gaps, Aspect Ratio Unit, Native Masonry Support, Subgrid in Chrome, prefers-reduced-data, :marker. Auntie Rachel has all the latest CSS news!
• Quick Tips for High Contrast Mode by Sarah Higley
• When Sass and New CSS Features Collide by the splendid Ana Tudor
• Tabler Icons – A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects.
• Accessibility for Product Managers by @petervangrieken
• India bans TikTok, dozens of other Chinese apps – Also UC Browser and UC News, CM Browser and the QQ apps.
• A/B Street – “Ever been stuck in traffic on a bus, wondering why is there legal street parking instead of a dedicated bus lane? A/B Street is a game exploring how small changes to a city affect the movement of drivers, cyclists, transit users, and pedestrians.”
• CRAPCHA: Completely Ridiculous And Phony Captcha that Hassles for Amusement – Wonderful and useless.

I’ve been working on a client project and one of the tasks was remediating some data tables. As I began researching the subject, it became obvious that most of the practical, tested advice comes from my old mates Steve Faulkner and Adrian Roselli.

I’ve collated them here so they’re in one place when I need to do this again, and in case you’re doing similar. But all the glory belongs with them. Buy them a beer when you next see them.

• How screen readers navigate data tables by Léonie Watson
• Short note on what CSS display properties do to table semantics TL;DR – changing the display property hides the semantics from the accessibility tree in some browsers and therefore from assistive tech.
• Functions to Add ARIA to Tables and Lists – Adrian shows how to restore table semantics with ARIA
• Short note on improving usability of scrollable regions – if your tables horizontally scroll, make sure that keyboard users can access the scrollers
• Fixed Table Headers – If you have scrolling tables, you might want ‘sticky’ headers that don’t scroll. Uncle Adrian shows you how.
• Tables, Tequila and Beer – Uncle Steve shows that simple tables don’t need the scope attribute to identify a th as a row or column header.
• Web Typography: Designing Tables to be Read, Not Looked At by Uncle Richard Rutter
• Table Design Patterns On The Web – Bonus link! Cousin Jing shows some different design patterns for responsive, accessible tables.

• News o’the Week: Antitrust: European Commission opens investigations into Apple’s App Store rules – “The investigations concern in particular the mandatory use of Apple’s own proprietary in-app purchase system and restrictions on the ability of developers to inform iPhone and iPad users of alternative cheaper purchasing possibilities outside of apps.”
• Related: Apple Threatens to Move Basecamp’s New Email App to Trash – “Scrutiny of Apple’s App Store policies heats up as the company heads into its annual software conference.”
• Igalia Chat – Brian Kardell sits down with Jeremy Keith and Stuart Langridge to chat about rendering engine diversity, history and the health of the web browser ecosystem.
• Flow: A New Browser Engine by Sam Sneddon
• Safari 14 Beta Release Notes
• Make your PWA feel more like an app – some nice little tips for making it more ‘native’.
• CSS custom properties and the cascade by Jeremy Keith
• CSS Custom Properties Fail Without Fallback – Matthias Ott looks at what you can do about the issue Jeremy raises
• Hybrid positioning with CSS variables and max() by Lea Verou
• Warning—Apple Suddenly Catches TikTok Secretly Spying On Millions Of iPhone Users – Tiktok on iOS caught stealing the contents of users’ clipboard every 2-3 keystrokes. “Now Apple’s welcome iOS 14 security and privacy changes have caught them red-handed still doing something they shouldn’t. Something they said was fixed.”
• Meaningful connectivity – Alliance for Affordable Internet pushes for its new standard: “We have meaningful connectivity when we can use the internet every day using an appropriate device with enough data and a fast connection.”
• Google blew a ten-year lead – “something happened at Google. I’m not sure what. But they stopped innovating on cloud software. Docs and Sheets haven’t changed in a decade. Google Drive remains impossible to navigate. Sharing is complicated.”
• SVGuitar – library to create beautiful SVG guitar chord charts directly in the browser
• Machine learning-generated Peanuts comics and an interesting rumination on what Art is: “In some ways, the model represents the disembodied essence of the Peanuts aesthetic, but do I have Charles Shulz soul? For many obvious reasons, I do not – this model knows nothing of the motivations, desires and intentions behind Charles Shulz and his works.”