A very old song that I wrote when I was about 17, inspired by melodic pop-punk of Buzzcocks and The Undertones. Shez and I gigged it in a school band, then I forgot it. When Pete Shelley of Buzzcocks died, I remembered it, so recorded it. My old chum Shez played bass when we were in a school band, and mixed it yesterday, 37 years later!
She just loves to be loved.
She just needs to feel needed
And you know she will tear you in half in the end.
She just likes to feel liked
And it doesn’t really matter who by
And you know she will break your heart, my friend.
Don’t ask her does she love you?
You’ll get a vague reply.
So what, she said she needs you?
Would she look you in the eye?
And when she upsets you
Don’t let her see you cry.
She feeds on your emotions
She’s gonna bleed you dry.
You thought that you’d got her to keep.
She says the novelty wore off after a week.
And you know she just loves to be loved.
She’ll love you for ten days
and then she won’t remember your face
And you know she just loves to be loved.
And now that you are just her ex,
and you see she’s moved on to her next.
And you know she just loves to be loved.
Masonry layout – Interesting (and very well thought-out) proposal to extend CSS Grid to allow ‘masonry’ layout, and discussion of whether masonry is conceptually an extension of Flexbox or a new display type
Hello, you divine diplodocus! Here’s the best of my reading from the last 2 weeks. Last week I was sunning myself in Marbella, Spain, at Forum for the Future, as a guest of the Joomla community. (I’m on their Open Source Matters Advisory Board.)
Anyhow, here we go!
Link o’the Week: Roles and relationships absolutely golden post by @codingchaos on the ARIA needed for those gnarly composite widgets (and very timely for a project I’m starting soon)
Opera: Phantom of the Turnaround – 70% Downside – If this report about Opera’s “pivot into predatory short-term loans in Africa and India, deploying deceptive ‘bait and switch’ tactics to lure in borrowers and charging egregious interest rates ranging from ~365-876%” is true, it would make me very sad
Snowpack – “With Snowpack you can build modern web apps (using React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.”
Reverberations – “how come a church organ doesn’t sound like a chip tune, which is also built up from simple waveforms? Well, actually it will, if you remove the church. And if you connect a Commodore 64 to a loudspeaker in a large hall, it will sound like an organ.”
city roads “This website renders every single road within a city” using OpenStreetMap and WebGL
The Guardian view on the gig economy: stop making burnout a lifestyle – “”Uncertain work is becoming the norm, with the result that unemployment statistics look better than the way Britons feel .. We ought to work and have careers that enable us to focus on our relationships and have soul-enriching pastimes. It cannot be socially good to consider leisure time as a lost commercial opportunity.”
Putting devs before users: how frameworks destroyed web performance – “So creatives, stop being so focused on your CV or personal convenience. Stop putting your own interests above those of your users, and wasting hundreds of kilobytes on stuff no one cares about. You are likely not Facebook or Google, and you shouldn’t be designing or building things as if you are.”
Rhasspy “(pronounced RAH-SPEE) is an open source, fully offline voice assistant toolkit for many languages that works well with Home Assistant, Hass.io, and Node-RED .. intended for advanced users that want to have a voice interface to Home Assistant, but value privacy and freedom above all else.”
Making GOV.UK more than a website – using schema.org structured markup allows “meeting users where they are, meeting user needs at the point of need”, for example on Voice Assistants or in Google OneBox search results.
Why <details> is Not an Accordion – “HTML really needs <accordion> , <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements”
CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS, by Harry Roberts
Why WeWork went wrong – “The office-space startup took a tumble when investors tired of its messianic CEO and lack of profits. But why were its backers – the House of Saud among them – so keen to pour billions into it in the first place?”. Long, and fascinating article.
State of European Tech report – “in 2019, 92% of funding went to all men teams, a similar level to the figures which shocked readers last year. When you break down the data by race, age, education and socioeconomic background, we see more problems emerge”
Ericsson Mobility Report November 2019 – “By the end of 2025, we expect 5G to have 2.6 billion subscriptions covering up to 65 percent of the world’s population and generating 45 percent of the world’s total mobile data traffic”. 76% of that data will be video.
Igalia Chats with Neil Soiffer on MathML – “Igalia’s Brian Kardell sat down with Neil Soiffer, long time MathML advocate and chair of the current MathML Refresh Community Group to chat about MathML, its history, challenges and what’s next.”
NIGERIA Digital Economy Diagnostic Report (World Bank) “As the biggest economy in Africa with one of the largest youth populations in the world, Nigeria is well-positioned to develop a strong digital economy. This would have a transformational impact”
Accessibility made the UK national TV news yesterday, hot on the heels of a report The business case for inclusive design by the UK disability charity Scope, which shows that around 50% of disabled people couldn’t buy something online that they wanted.
An accessible site is therefore a huge business opportunity, given that the latest Purple Pound estimate is £274 billion. (The Purple Pound a proxy for the purchasing power of the disabled community.)
Here’s a 4 minute interview on Channel 5 News to help persuade your bosses/ colleagues of the business case for accessibility.
Some people with disabilities say they are being shut out of online shopping because retailers don't make allowances for them.@scope says half of people avoid it because a website or app was too hard to use.
Last week I was moaning about the fact that 63% of developers surveyed don’t test accessibility. And I was banging on about editing a ‘learn HTML’ book which was riddled with basic accessibility errors, when Frederik replied in order to shut my whining and make me do something about it:
Bruce, as a complete amateur it’s hard to collect this information from scattered sources. Is there some kind of compendium or comprehensive source? It’s only a personal website but it’s a matter of principle.
This isn’t a comprehensive guide to accessibility, but we’ll look at ways to avoid the most common accessibility errors identified by the WebAIM accessibility analysis of the top 1,000,000 home pages, and the HTTPArchive 2019 Web Almanac analysis of 5.8 million pages. I’m not going to get philosophical; if you’re reading this, I assume you care about why, and just want some tips on how. (But if you need to convince someone else, here’s the 4 minute business case for accessibility.)
Insufficient colour contrast
83% of homepages have low colour contrast. There are several ways to check this. I personally use Ada Rose Cannon’s handy Contrast Checker Widget, which sits in my bookmarks bar like a useful Clippy and goes through the current tab and highlights where there isn’t enough contrast. Or you can use Firefox’s Accessibility Inspector in the devtools to check and tweak the CSS until you get a pass. To check a particular combination of colours, contrastchecker will give you AA and AAA ratings. whocanuse.com will tell you which particular types of visual impairments may have difficulty with your chosen colours.
Missing alternative text for images
A whopping 68% of homepages had missing alt text (NOT alt tags). Every <img> must have alternate text. Here are basic rules:
If the image is purely decorative, it must have empty alt text: alt="". But it should probably be in CSS, anyway.
If an image is described in body text it should have empty alt alt="", to avoid repetition. But be careful if it’s an <img> in a <figure> (hat-tip to Mallory).
If an image is the content of a link (for example, your organisation’s logo can be clicked to go to the homepage) the alternate text should describe the destination of the link. For example, alt="home page".
I don’t know why anyone would do this, but apparently 58% of homepages tested had empty links, and 25% had empty buttons. I’m assuming this means they were empty of text, and contained only an image or an image of text. In the case of buttons, HTTPArchive Almanac says “often the reason this confusion occurs is due to the lack of a textual label. For example, a button displaying a left-pointing arrow icon to signify it’s the “Back” button, but containing no actual text”. (They found 75% of pages do this.) If that’s the case, the image needs alternate text that describes the function of the button or destination of the link. And don’t use icon fonts.
I find it’s more robust than associating a form with a label using the for="id" pattern. If you can’t use an HTML label element, you can label an input for assistive technology using aria-label="useful instruction" or (less useful) a title attribute on the input. Use Heydon’s revenge.css bookmarklet to test these. WebAIM has more advanced form labelling techniques.
Missing document language
23% if homepages didn’t declare the human language of the document. This matters because (for instance) the word “six” is pronounced by a French screen reader very differently from an English screen reader. It’s simple to do: <html lang="en"> tells assistive tech that the main language of this page is English. The codes are defined in BCP47.
Missing <main> elements
The HTTPArchive study of 5.8million pages shows that only 26% of pages have a <main> element and 8.06% of pages erroneously contained more than one main landmark, leaving these users guessing which landmark contains the actual main content.
Solution: wrap your main content, that is, stuff that isn’t header, primary navigation or footer, in a <main> element. All browsers allow you to style it, and assistive technologies know what to do with it.
Happily, more than 50% of pages use <nav> <footer> and <header>. In my opinion, <nav> should go around only your primary navigation (and can be nested inside <header> if that suits you). In its survey of screen reader users, WebAIM found that 26% of screen reader users frequently or always use these landmarks when navigating a page.
Here’s a YouTube video of blind screenreader user Leonie Watson talking through how she navigates this site using the HTML semantics we’ve discussed.
It’s been a busy week for one of the projects I’m involved with, along with my old chum Håkon Wium Lie (co-creator of CSS). Prince is a software package that produces beautiful, accessible PDFs from HTML, SVG and CSS. On Tuesday we released Prince 13 with support for CSS variables (aka custom properties), lots of goodies for non-Latin scripts like Arabic & Indic, & support for fragmenting single-column/row flex containers across multiple pages. Give it a whirl if you need to produce PDFs – it’s free for non-commercial use.
Then the next day, we open-sourced our Allsorts font parser, shaping engine, & subsetter for OpenType, WOFF, and WOFF2 under the Apache 2.0 license so everyone can have better Chinese, Japanese, Korean, and Indic scripts in PDF. Allsorts was extracted from Prince and is implemented in Rust.
Web Almanac 2019 – HTTPArchive’s 20 chapters looking at what the made is made from, data mining from nearly 6 million web pages
e-Conomy SEA 2019 – Southeast Asia’s internet economy hits $100 billion; 90% of SE Asia’s 360m web users connect primarily through their mobile phones. And, for the love of Dawkins, stop treating a good user experience as subordinate to a good developer experience. Or your competitors will eat your noodles.
Creating complex layouts using CSS Grid – “This tutorial is for people who have heard of css-grid and are interested to see what it can do or perhaps are not sure how to fit it into their workflow.”
The Front-End Tooling Survey 2019 – “63.13% of respondents said that they didn’t use any tools to accessibility test their projects”. FFS. “just 5.79% of developers said that they were implementing AMP (Accelerated Mobile Pages) on their projects.”
Things We Can’t (Yet) Do In CSS – a very good article by @rachelandrew. As she says, many can’t be done on the web, but can with Prince, which you can get for free (for non-commercial use) to try it out.
free-for.dev – “This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.”
Focusing on focus – “focus was and is still quite complex to understand. But, at least now there’s a clear source of truth for it, and the browser vendors are working to make it interoperable”
What I’ve learned about accessibility in SPAs by @nolanlawson. “Here’s the best piece of accessibility advice for newbies: if something is a button, make it a <button>. If something is an input, make it an <input>.” Preach it, nephew!