Jeremy Keith's Blog, page 45

2020 in numbers

I posted to adactio.com 1442 times in 2020. sparkline

March was the busiest month with 184 posts. sparkline

This month, December, was the quietest with 68 posts. sparkline

Overall I published:

2 articles,
110 blog posts, sparkline
518 links, sparkline

812 notes. sparkline

In amongst those notes are 128 photos. But the number I���m happiest with is 200. From to March 18th to October 3rd, I posted a tune a day for 200 days straight.

Elsewhere in 2020:

I huffduffed 187 pieces of audio,
made 1,139 contributions on Github, and
published 6 episodes of the Clearleft podcast.

For obvious reasons, in 2020 I had far fewer check ins, did far less speaking and almost no travel.

Books I read in 2020

I only read twenty books this year. Considering the ample amount of free time I had, that���s not great. But I���m not going to beat myself up about it. Yes, I may have spent more time watching television than reading, but I���m cutting myself some slack. It was 2020, for crying out loud.

Anyway, here���s my annual round-up with reviews. Anything with three stars is good. Four stars is really good. Five stars is practically unheard of. As usual, I tried to get an equal balance of fiction and non-fiction.

Raven Stratagem by Yoon Ha Lee

���������������

An enjoyable sequal to Ninefox Gambit. There are some convoluted politics but that all seems positively straightforward after the brain-bending calendrical warfare introduced in the first book.

The Human Use Of Human Beings: Cybernetics And Society by Norbert Wiener

���������������

The ur-text on systems and feedback. Reading it now is like reading a historical artifact but many of the ideas are timeless. It���s a bit dense in parts and it tries to cover life, the universe and everything, but when you remember that it was written in 1950, it���s clearly visionary.

The Word For World Is Forest by Ursula K. Le Guin

���������������

Simultaneously a ripping yarn and a spiritual meditation. It���s Vietnam and the environmental movement rolled into one (like what Avatar attempted, but this actually works).

Abolish Silicon Valley by Wendy Liu

���������������

Here���s my full review.

A Short History Of Irish Traditional Music by Gear��id �� hAllmhur��in

���������������

A perfectly fine and accurate history of the music, but it���s a bit like reading Wikipedia. Still, it was quite the ego boost to see The Session listed in the appendix.

Machines Like Me by Ian McEwan

���������������

McEwan���s first foray into science fiction is a good tale but a little clumsily told. It���s like he really wants to show how much research he put into his alternative history. There are moments when characters practically turn to the camera to say, ���Imagine how the world would���ve turned out if������ It���s far from McEwan���s best but even when he���s not on top form, his writing is damn good.

The Fabric Of Reality by David Deutsch

���������������

I���ve attempted to read this before. I may have even read it all before and had everything just leak out of my head. The problem is with me, not David Deutsch who does a fine job of making complex ideas approachable. This is like a unified theory of everything.

Helliconia Winter by Brian Aldiss

���������������

The third and final part of Aldiss���s epic is just as enjoyable as the previous two. The characters aren���t the main attraction here. It���s all about the planetary ballet.

Uncanny Valley by Anna Wiener

���������������

A terrific memoir. It���s open and honest, and just snarky enough when it needs to be.

A Wizard Of Earthsea, The Tombs Of Atuan, and The Farthest Shore by Ursula K. Le Guin

���������������

There���s a real pleasure in finally reading books that you should���ve read years ago. I can only imagine how wonderful it would���ve been to read these as a teenager. It���s an immersive world but there���s something melancholy about the writing that makes the experience of reading less escapist and more haunting.

Superior: The Return of Race Science by Angela Saini

���������������

Absolutely superb! I liked Angela Saini���s previous book, Inferior, but I loved this. It���s a harrowing read at times, but written with incredible clarity and empathy. I can���t recommend this highly enough.

Purple People by Kate Bulpitt

���������������

Full disclosure: Kate is a friend of mine, so I probably can���t evaluate her book in a disinterested way. That said, I enjoyed the heck out of this and I think you will too. It���s very hard to classify and I think that���s what makes it so enjoyable. Technically, it���s sci-fi I suppose���an alternative history tale, probably���but it doesn���t feel like it. It���s all about the characters, and they���re all vividly realised. Honestly, I���m not sure how best to describe it���other then it being like the inside of Kate���s head���but the description of it being ���a jolly dystopia��� comes close. Take a chance and give it a go.

How to Argue With a Racist: History, Science, Race and Reality by Adam Rutherford

���������������

Good stuff from Adam Rutherford, though not his best. If I hadn���t already read Angela Saini���s Superior I might���ve rated this higher, but it pales somewhat by comparison. Still, it was interesting to see the same subject matter tackled in two different ways.

Agency by William Gibson

���������������

There���s nothing particularly wrong with Agency, but there���s nothing particularly great about it either. It���s just there. Maybe I���m being overly harsh because the first book, The Peripheral, was absolutely brilliant. This reminded me of reading Gibson���s Spook Country, which left me equally unimpressed. That book was sandwiched between the brilliant Pattern Recognition and the equally brilliant Zero History. That bodes well for the forthcoming third book in this series. This second book just feels like filler.

Last Night���s Fun: In And Out Of Time With Irish Music by Ciaran Carson

���������������

It���s hard to describe this book. Memoir? Meditation? Blog? I kind of like that about it, but I can see how it divides opinion. Some people love it. Some people hate it. I thought it was enjoyable enough. But it doesn���t matter what I think. This book is doing its own thing.

Revenant Gun by Yoon Ha Lee

���������������

The third book in the Machineries of Empire series has much less befuddlement. It���s even downright humourous in places. If you liked Ninefox Gambit and Raven Strategem, you���ll enjoy this too.

A Paradise Built in Hell: The Extraordinary Communities That Arise in Disaster by Rebecca Solnit

���������������

The central thesis of this book is refuting the Hobbesian view of humanity as being one crisis away from breakdown. I feel like that argument was made more strongly in Critical Mass: How One Thing Leads to Another by Philip Ball. But where this book shines is in its vivid description of past catastrophes and their aftermaths: the San Francisco fire; the Halifax explosion; the Mexico City earthquake; and the culmination with Katrina hitting New Orleans. I was less keen on the more blog-like personal musings but overall, this is well worth reading.

Blindsight by Peter Watts

���������������

I like a good tale of first contact, and I had heard that this one had a good twist on the Fermi paradox. But it felt a bit like a short story stretched to the length of a novel. It would make for a good Twilight Zone episode but it didn���t sustain my interest.

This is How You Lose the Time War by Amal El-Mohtar and Max Gladstone

I���m still reading this Hugo-winning novella and enjoying it so far.

Alright, time to wrap up this look back at the books I read in 2020 and pick my favourites: one fiction and one non-fiction.

My favourite non-fiction book of the year was easily Superior by Angela Saini. Read it. It���s superb.

What about fiction? Hmm ���this is tricky.

You know what? I���m going to go for Purple People by Kate Bulpitt. Yes, she���s a friend (���it���s a fix!���) but it genuinely made an impression on me: it was an enjoyable romp while I was reading it, and it stayed with me afterwards too.

Head on over to Bookshop and pick up a copy.

Words I wrote in 2020

Once again I wrote over a hundred blog posts this year. While lots of other activities dropped off significantly while my main focus was to just keep on keepin��� on, I still found solace and reward in writing and publishing. Like I said early on in The Situation, my website is an outlet for me:

While you���re stuck inside, your website is not just a place you can go to, it���s a place you can control, a place you can maintain, a place you can tidy up, a place you can expand. Most of all, it���s a place you can lose yourself in, even if it���s just for a little while.

Here are some blog posts that turned out alright:

Architects, gardeners, and design systems. Citing Frank Chimero, Debbie Chachra, and Lisa O���Neill.
Hydration. Progressive enhancement. I do not think it means what you think it means.
Living Through The Future. William Gibson, Arthur C.Clarke, Daniel Dafoe, Stephen King, Emily St. John Mandel, John Wyndham, Martin Cruz-Smith, Marina Koren and H.G. Wells.
Principles and priorities. Using design principles to embody your priorities.
Hard to break. Brittleness is the opposite of resilience. But they both share something in common.
Intent. Black lives matter.
Accessibility. Making the moral argument.
T E N �� T. A spoiler-filled look at the new Christopher Nolan film.
Portals and giant carousels. Trying to understand why people think they need to make single page apps.
Clean advertising. The greatest trick the devil ever pulled was convincing the world that behavioural advertising is more effective than contextual advertising.

I find it strangely comforting that even in a year as shitty as 2020, I can look back and see that there were some decent blog posts in there. Whatever 2021 may bring, I hope to keep writing and publishing through it all. I hope you will too.

SVGs in dark mode

I added a dark mode to my site last year. Since then I���ve been idly toying with the addition of a dark mode to The Session too.

As with this site, the key to adding a dark mode was switching to custom properties for color and background-color declarations. But my plans kept getting derailed by the sheet music on the site. The sheet music is delivered as SVG generated by ABCJS which hard-codes the colour in stroke and fill attributes:

fill="#000000" stroke="#000000"

When I was describing CSS recently I mentioned the high specifity of inline styles:

Whereas external CSS and embedded CSS don���t have any effect on specificity, inline styles are positively radioactive with specificity.

Given that harsh fact of life, I figured it would be nigh-on impossible to over-ride the colour of the sheetmusic. But then I realised I was an idiot.

The stroke and fill attributes in SVG are presentational but they aren���t inline styles. They���re attributes. They have no affect on specifity. I can easily over-ride them in an external style sheet.

In fact, if I had actually remembered what I wrote when I was adding a dark mode to adactio.com, I could���ve saved myself some time:

I have SVGs of sparklines on my homepage. The SVG has a hard-coded colour value in the stroke attribute of the path element that draws the sparkline. Fortunately, this can be over-ridden in the style sheet:

svg.activity-sparkline��path��{
stroke:��var(--text-color);
}

I was able to do something similar on The Session. I used the handy currentColor keyword in CSS so that the sheet music matched the colour of the text:

svg path {
fill: currentColor;
}
svg path:not(stroke="none") {
stroke: currentColor;
}

Et voila! I now had light-on-dark sheet music for The Session���s dark mode all wrapped up in a prefers-color-scheme: dark media query.

I pushed out out the new feature and started getting feedback. It could be best summarised as ���Thanks. I hate it.���

It turns out that while people were perfectly fine with a dark mode that inverts the colours of text, it felt really weird and icky to do the same with sheet music.

On the one hand, this seems odd. After all, sheet music is a writing system like any other. If you���re fine with light text on a dark background, why doesn���t that hold for light sheet music on a dark background?

But on the other hand, sheet music is also like an image. And we don���t invert the colours of our images when we add a dark mode to our CSS.

With that in mind, I went back to the drawing board and this time treated the sheet music SVGs as being intrinsicly dark-on-light, rather than a stylistic choice. It meant a few more CSS rules, but I���m happy with the final result. You can see it in action by visiting a tune page and toggling your device���s ���appearance��� settings between light and dark.

If you���re a member of The Session, I also added a toggle switch to your member profile so you can choose dark or light mode regardless of your device settings.

Web Audio API weirdness on iOS

I told you about how I���m using the Web Audio API on The Session to generate synthesised audio of each tune setting. I also said:

Except for some weirdness on iOS that I had to fix.

Here���s that weirdness…

Let me start by saying that this isn���t anything to do with requiring a user interaction (the Web Audio API insists on some kind of user interaction to prevent developers from having auto-playing sound on websites). All of my code related to the Web Audio API is inside a click event handler. This is a different kind of weirdness.

First of all, I noticed that if you pressed play on the audio player when your iOS device is on mute, then you don���t hear any audio. Seems logical, right? Except if using the same device, still set to mute, you press play on a video or audio element, the sound plays just fine. You can confirm this by going to Huffduffer and pressing play on any of the audio elements there, even when your iOS device is set on mute.

So it seems that iOS has different criteria for the Web Audio API than it does for audio or video. Except it isn���t quite that straightforward.

On some pages of The Session, as well as the audio player for tunes (using the Web Audio API) there are also embedded YouTube videos (using the video element). Press play on the audio player; no sound. Press play on the YouTube video; you get sound. Now go back to the audio player and suddenly you do get sound!

It���s almost like playing a video or audio element ���kicks��� the browser into realising it should be playing the sound from the Web Audio API too.

This was happening on iOS devices set to mute, but I was also getting reports of it happening on devices with the sound on. But it���s that annoyingly intermittent kind of bug that���s really hard to reproduce consistently. Sometimes the sound doesn���t play. Sometimes it does.

Following my theory that the browser needs a ���kick��� to get into the right frame of mind for the Web Audio API, I resorted to a messy little hack.

In the event handler for the audio player, I generate the ���kick��� by playing a second of silence using the JavaScript equivalent of the audio element:

var audio = new Audio('1-second-of-silence.mp3');
audio.play();

I���m not proud of that. It���s so hacky that I���ve even wrapped the code in some user-agent sniffing on the server, and I never do user-agent sniffing!

Still, if you ever find yourself getting weird but inconsistent behaviour on iOS using the Web Audio API, this nasty little hack could help.

Audio

I spent the last couple of weekends rolling out a new feature on The Session. It involves playing audio in a web page. No big deal these days, right? But the history involves some old file formats…

The first venerable format is ABC notation. File extension: .abc, mime type: text/vnd.abc. It���s an ingenious text format for musical notation using ASCII. The metadata of the piece of music is defined in JSON-like key/value pairs. Then the contents are encoded with letters: A, B, C, etc. Uppercase and lowercase denote different octaves. Numbers can be used for note lengths.

The format was created by Chris Walshaw in 1997 when dial-up was the norm. With ABC, people were able to swap tunes on email lists or bulletin boards without transferring weighty image or sound files. If you had ABC software on your computer, you could convert that lightweight text file into sheet music …or audio.

That brings me to the second old format: midi files. File extension: .mid, mime-type: audio/midi. Like ABC, it���s a lightweight format for encoding the instructions for music instead of the music itself.

Think of it like SVG: instead of storing the final pixels of an image, SVG stores the instructions for drawing the image instead. The instructions in a midi file are like ���play this note for this long on this instrument.��� Again, as with ABC, you need some software to turn the instructions into sound.

There was a time when lots of software could play midi files. Quicktime on the Mac, for example. You could even embed midi files in web pages. I mean literally embed them …with the embed element. No Geocities page was complete without an autoplaying midi file.

On The Session, people submit tunes in ABC format. Then, using the amazing ABCJS JavaScript library, the ABC is turned into SVG on the fly! For years I���ve also offered midi files, generated on the server from the ABC notation.

But times have changed. These days it���s hard to find software that plays midi files. Quicktime doesn���t do it anymore. And you���d need to go to the app store on iOS to find a midi file player. It���s time to phase out the midi files on The Session.

I still want to provide automatically-generated audio though. Fortunately ABCJS gives me a way to do this. But instead of using the old technology of midi files, it uses a more modern browser feature: the Web Audio API.

The end result sounds like a midi file, but the underlying technique is more like a synthesiser. There���s a separate mp3 file for each note. The JavaScript figures out how long each ���sample��� needs to be played for, strings them all together, and outputs them with Web Audio. So you���ve got cutting-edge browser technology recreating a much older file format. Paul Rosen���the creator of ABCJS���has a presentation explaining how it all works under the hood.

Not only is there a separate short mp3 file for each note in seven octaves, but if you want the sound of a different instrument, you need samples for all seven octaves in that instrument. They���re called soundfonts.

Paul provides soundfonts for ABCJS. It���s a repo that was forked from this repo from Benjamin Gleitzman. And here���s where it gets small worldy…

The reason why Benjamin has a repo of soundfonts is because he needed to create midi-like audio in the browser. He wanted to do this for a project on September 28th and 29th, 2013 …at Science Hack Day San Francisco!

I was there too���working on my own audio-related hack���and I remember the excellent (and winning) hack that Benjamin worked on. It was called Symphony of Satellites and it���s still online along with the promo video. Here���s Benjamin���s post-hackday write-up from seven years ago.

It���s rare that the worlds of the web and Irish music cross over. When I got to meet Paul���creator of ABCJS���at a web conference a couple of years ago it kind of blew my mind. Last weekend when I set out to dabble with a feature on The Session, I certainly didn���t expect to stumble on a connection to Science Hack Day! (Aside: the first Science Hack Day was ten years ago���yowzers!)

Anyway, I was able to get that audio playback working on The Session. Except for some weirdness on iOS that I had to fix. But that���s a hack for another day.

Ampvisory

I was very inspired by something Terence Eden wrote on his blog last year. A report from the AMP Advisory Committee Meeting:

I don���t like AMP. I think that Google���s Accelerated Mobile Pages are a bad idea, poorly executed, and almost-certainly anti-competitive.

So, I decided to join the AC (Advisory Committee) for AMP.

Like Terence, I���m not a fan of Google AMP���my initially positive reaction to it soured over time as it became clear that Google were blackmailing publishers by privileging AMP pages in Google Search. But all I ever did was bitch and moan about it on my website. Terence actually did something.

So this year I put myself forward as a candidate for the AMP advisory committee. I have no idea how the election process works (or who does the voting) but thanks to whoever voted for me. I���m now a member of the AMP advisory committee. If you look at that blog post announcing the election results, you���ll see the brief blurb from everyone who was voted in. Most of them are positively bullish on AMP. Mine is not:

Jeremy Keith is a writer and web developer dedicated to an open web. He is concerned that AMP is being unfairly privileged by Google���s search engine instead of competing on its own merits.

The good news is that main beef with AMP is already being dealt with. I wanted exactly what Terence said:

My recommendation is that Google stop requiring that organisations use Google���s proprietary mark-up in order to benefit from Google���s promotion.

That���s happening as of May of this year. Just as well���the AMP advisory committee have absolutely zero influence on Google search. I���m not sure how much influence we have at all really.

This is an interesting time for AMP ���whatever AMP is.

See, that���s been a problem with Google AMP from the start. There are multiple defintions of what AMP is. At the outset, it seemed pretty straightforward. AMP is a format. It has a doctype and rules that you have to meet in order to be ���valid��� AMP. Part of that ruleset involved eschewing HTML elements like img and video in favour of web components like amp-img and amp-video.

That messaging changed over time. We were told that AMP is the collection of web components. If that���s the case, then I have no problem at all with AMP. People are free to use the components or not. And if the project produces performant accessible web components, then that���s great!

But right now it���s not at all clear which AMP people are talking about, even in the advisory committee. When we discuss improving AMP, do we mean the individual components or the set of rules that qualify an AMP page being ���valid���?

The use-case for AMP-the-format (as opposed to AMP-the-library-of-components) was pretty clear. If you were a publisher and you wanted to appear in the top stories carousel in Google search, you had to publish using AMP. Just using the components wasn���t enough. Your pages had to be validated as AMP-the-format.

That���s no longer the case. From May, pages that are fast enough will qualify for the top stories carousel. What will publishers do then? Will they still maintain separate AMP-the-format pages? Time will tell.

I suspect publishers will ditch AMP-the-format, although it probably won���t happen overnight. I don���t think anyone likes being blackmailed by a search engine:

An engineer at a major news publication who asked not to be named because the publisher had not authorized an interview said Google���s size is what led publishers to use AMP.

The pre-rendering (along with the lightning bolt) that happens for AMP pages in Google search might be a reason for publishers to maintain their separate AMP-the-format pages. But I suspect publishers don���t actually think the benefits of pre-rendering outweigh the costs: pre-rendered AMP-the-format pages are served from Google���s servers with a Google URL. If anything, I think that publishers will look forward to having the best of both worlds���having their pages appear in the top stories carousel, but not having their pages hijacked by Google���s so-called-cache.

Does AMP-the-format even have a future without Google search propping it up? I hope not. I think it would make everything much clearer if AMP-the-format went away, leaving AMP-the-collection-of-components. We���d finally see these components being evaluated on their own merits���usefulness, performance, accessibility���without unfair interference.

So my role on the advisory committee so far has been to push for clarification on what we���re supposed to be advising on.

I think it���s good that I���m on the advisory committee, although I imagine my opinions could easily be be dismissed given my public record of dissent. I may well be fooling myself though, like those people who go to work at Facebook and try to justify it by saying they can accomplish more from inside than outside (or whatever else they tell themselves to sleep at night).

The topic I���ve volunteered to help with is somewhat existential in nature: what even is AMP? I���m happy to spend some time on that. I think it���ll be good for everyone to try to get that sorted, regardless about how you feel about the AMP project.

I have no intention of giving any of my unpaid labour towards the actual components themselves. I know AMP is theoretically open source now, but let���s face it, it���ll always be perceived as a Google-led project so Google can pay people to work on it.

That said, I���ve also recently joined a web components community group that Lea instigated. Remember she wrote that great blog post recently about the failed promise of web components? I���m not sure how much I can contribute to the group (maybe some meta-advice on the nature of good design principles?) but at the very least I can serve as a bridge between the community group and the AMP advisory committee.

After all, AMP is a collection of web components. Maybe.

Cascading Style Sheets

There are three ways���that I know of���to associate styles with markup.

External CSS

This is probably the most common. Using a link element with a rel value of ���stylesheet���, you point to a URL using the href attribute. That URL is a style sheet that is applied to the current document (���the relationship of the linked resource it is that is a ���stylesheet��� for the current document���).

In theory you could associate a style sheet with a document using an HTTP header, but I don���t think many browsers support this in practice.

You can also pull in external style sheets using the @import declaration in CSS itself, as long as the @import rule is declared at the start, before any other styles.

@import url('/path/to/more-styles.css');

When you use link rel="stylesheet" to apply styles, it���s a blocking request: the browser will fetch the style sheet before rendering the HTML. It needs to know how the HTML elements will be painted to the screen so there���s no point rendering the HTML until the CSS is parsed.

Embedded CSS

You can also place CSS rules inside a style element directly in the document. This is usually in the head of the document.

element {
property: value;
}

When you embed CSS in the head of a document like this, there is no network request like there would be with external style sheets so there���s no render-blocking behaviour.

You can put any CSS inside the style element, which means that you could use embedded CSS to load external CSS using an @import statement (as long as that @import statement appears right at the start).

@import url('/path/to/more-styles.css');
element {
property: value;
}

But then you���re back to having a network request.

Inline CSS

Using the style attribute you can apply CSS rules directly to an element. This is a universal attribute. It can be used on any HTML element. That doesn���t necessarily mean that the styles will work, but your markup is never invalidated by the presence of the style attribute.

Whereas external CSS and embedded CSS don���t have any effect on specificity, inline styles are positively radioactive with specificity. Any styles applied this way are almost certain to over-ride any external or embedded styles.

You can also apply styles using JavaScript and the Document Object Model.

element.style.property = 'value';

Using the DOM style object this way is equivalent to inline styles. The radioactive specificity applies here too.

Style declarations specified in external style sheets or embedded CSS follow the rules of the cascade. Values can be over-ridden depending on the order they appear in. Combined with the separate-but-related rules for specificity, this can be very powerful. But if you don���t understand how the cascade and specificity work then the results can be unexpected, leading to frustration. In that situation, inline styles look very appealing���there���s no cascade and everything has equal specificity. But using inline styles means foregoing a lot of power���you���d be ditching the C in CSS.

A common technique for web performance is to favour embedded CSS over external CSS in order to avoid the extra network request (at least for the first visit���there are clever techniques for caching an external style sheet once the HTML has already loaded). This is commonly referred to as inlining your CSS. But really it should be called embedding your CSS.

This language mix-up is not a hill I���m going to die on (that hill would be referring to blog posts as blogs) but I thought it was worth pointing out.

Lists

We often have brown bag lunchtime presentations at Clearleft. In the Before Times, this would involve a trip to Pret or Itsu to get a lunch order in, which we would then proceed to eat in front of whoever was giving the presentation. Often it���s someone from Clearleft demoing something or playing back a project, but whenever possible we���d rope in other people to swing by and share what they���re up to.

We���ve continued this tradition since making the switch to working remotely. Now the brown bag presentations happen over Zoom. This has two advantages. Firstly, if you don���t want the presenter watching you eat your lunch, you can switch your camera off. Secondly, because the presenter doesn���t have to be in Brighton, there���s no geographical limit on who could present.

Our most recent brown bag was truly excellent. I asked L��onie if she���d be up for it, and she very kindly agreed. As well as giving us a whirlwind tour of how assistive technology works on the web, she then invited us to observe her interacting with websites using a screen reader.

I���ve seen L��onie do this before and it���s always struck me as a very open and vulnerable thing to do. Think about it: the audience has more information than the presenter. We can see the website at the same time as we���re listening to L��onie and her screen reader.

We got to nominate which websites to visit. One of them���a client���s current site that we haven���t yet redesigned���was a textbook example of how important form controls are. There was a form where almost everything was hunky-dory: form fields, labels, it was all fine. But one of the inputs was a combo box. Instead of using a native select with a datalist, this was made with JavaScript. Because it was lacking the requisite ARIA additions to make it accessible, it was pretty much unusable to L��onie.

And that���s why you use the right HTML element wherever possible, kids!

The other site L��onie visited was Clearleft���s own. That was all fine. L��onie demonstrated how she���d form a mental model of a page by getting the screen reader to read out the headings. Interestingly, the nesting of headings on the Clearleft site is technically wrong���there���s a jump from an h1 to an h3���probably a result of the component-driven architecture where you don���t quite know where in the page a heading will appear. But this didn���t seem to be an issue. The fact that headings are being used at all was the more important fact. As L��onie said, there���s a lot of incorrect HTML out there so it���s no wonder that screen readers aren���t necessarily sticklers for nesting.

I���ve said it before and I���ll say it again: if you���re using headings, labelling form fields, and providing alternative text for images, you���re already doing a better job than most websites.

Headings weren���t the only way that L��onie got a feel for the page architecture. Landmark roles���like header and nav���really helped too. Inside the nav element, she also heard how many items there were. That���s because the navigation was marked up as a list: ���List: six items.���

And that reminded me of the Webkit issue. On Webkit browsers like Safari, the list on the Clearleft site would not be announced as a list. That���s because the lists���s bullets have been removed using CSS.

Now this isn���t the only time that screen readers pay attention to styling. If you use display: none to hide an element from sight, it will also be unavailable to screen reader users. Makes sense. But removing the semantic meaning of lists based on CSS? That seems a bit much.

There are good reasons for it though. Here���s a thread from James Craig on where this decision came from (James, by the way, is an absolute unsung hero of accessibility). It turns out that developers went overboard with lists a while back and that���s why we can���t have nice things. In over-compensating from divitis, developers ended up creating listitis, marking up anything vaguely list-like as an unordered list with styling adjusted. That was very annoying for screen reader users trying to figure out what was actually a list.

And James also asks:

If a sighted user doesn���t need to know it���s a list, why would a screen reader user need to know or want to know? Stated another way, if the visible list markers (bullets, image markers, etc.) are deemed by the designers to be visually burdensome or redundant for sighted users, why burden screen reader users with those semantics?

That���s a fair point, but the thing is ���bullets maketh not the list. There are many ways of styling something that is genuinely a list that doesn���t involve bullets or image markers. White space, borders, keylines���these can all indicate visually that something is a list of items.

If you look at, say, the tunes page on The Session, you can see that there are numerous lists���newest tunes, latest comments, etc. In this case, as a sighted visitor, you would be at an advantage over a screen reader user in that you can, at a glance, see that there���s a list of five items here, a list of ten items there.

So I���m not disagreeing with the thinking behind the Webkit decision, but I do think the heuristics probably aren���t going to be quite good enough to make the call on whether something is truly a list or not.

Still, while I used to be kind of upset about the Webkit behaviour, I���ve become more equanimous about it over time. There are two reasons for this.

Firstly, there���s something that Eric said:

We have come so far to agree that websites don���t need to look the same in every browser mostly due to bugs in their rendering engines or preferences of the user.

I think the same is true for screen readers and other assistive technology: Websites don���t need to sound the same in every screen reader.

That���s a really good point. If we agree that ���pixel perfection��� isn���t attainable���or desirable���in a fluid, user-centred medium like the web, why demand the aural equivalent?

The second reason why I���m not storming the barricades about this is something that James said:

Of course, heuristics are imperfect, so authors have the ability to explicitly override the heuristically determined role by adding role="list���.

That means more work for me as a developer, and that���s ���absolutely fine. If I can take something that might be a problem for a user, and turn into something that���s a problem for me, I���ll choose to make it my problem every time.

I don���t have to petition Webkit to change their stance or update their heuristics. If I feel strongly that a list styled without bullets should still be announced as a list, I can specificy that in the markup.

It does feel very redundant to write ul role="list���. The whole point of having HTML elements with built-in semantics is that you don���t need to add any ARIA roles. But we did it for a while when new structural elements were introduced in HTML5���main role="main", nav role="navigation", etc. So I���m okay with a little bit of redundancy. I think the important thing is that you really stop and think about whether something should be announced as a list or not, regardless of styling. There isn���t a one-size-fits-all answer (hence why it���s nigh-on impossible to get the heuristics right). Each list needs to be marked up on a case-by-case basis.

And I wouldn���t advise spending too much time thinking about this either. There are other, more important areas to consider. Like I said, headings, forms, and images really matter. I���d prioritise those elements above thinking about lists. And it���s worth pointing out that Webkit doesn���t remove all semantic meaning from styled lists���it updates the role value from list to group. That seems sensible to me.

In the case of that page on The Session, I don���t think I���m guilty of listitis. Yes, there are seven lists on that page (two for navigation, five for content) but I���m reasonably confident that they all look like lists even without bullets or markers. So I���ve added role="list" to some ul elements.

As with so many things related to accessibility���and the web in general���this is a situation where the only answer I can confidentally come up with is ���it depends.

Clean advertising

Imagine if you were told that fossil fuels were the only way of extracting energy. It would be an absurd claim. Not only are other energy sources available���solar, wind, geothermal, nuclear���fossil fuels aren���t even the most effecient source of energy. To say that you can���t have energy without burning fossil fuels would be pitifully incorrect.

And yet when it comes to online advertising, we seem to have meekly accepted that you can���t have effective advertising without invasive tracking. But nothing could be further from the truth. Invasive tracking is to online advertising as fossil fuels are to energy production���an outmoded inefficient means of getting substandard results.

Before the onslaught of third party cookies and scripts, online advertising was contextual. If I searched for property insurance, I was likely to see an advertisement for property insurance. If I was reading an article about pet food, I was likely to be served an advertisement for pet food.

Simply put, contextual advertising ensured that the advertising that accompanied content could be relevant and timely. There was no big mystery about it: advertisers just needed to know what the content was about and they could serve up the appropriate advertisement. Nice and straightforward.

Too straightforward.

What if, instead of matching the advertisement to the content, we could match the advertisement to the person? Regardless of what they were searching for or reading, they���d be served advertisements that were relevant to them not just in that moment, but relevant to their lifestyles, thoughts and beliefs? Of course that would require building up dossiers of information about each person so that their profiles could be targeted and constantly updated. That���s where cross-site tracking comes in, with third-party cookies and scripts.

This is behavioural advertising. It has all but elimated contextual advertising. It has become so pervasive that online advertising and behavioural advertising have become synonymous. Contextual advertising is seen as laughably primitive compared with the clairvoyant powers of behavioural advertising.

But there���s a problem with behavioural advertising. A big problem.

It doesn���t work.

First of all, it relies on mind-reading powers by the advertising brokers���Facebook, Google, and the other middlemen of ad tech. For all the apocryphal folk tales of spooky second-guessing in online advertising, it mostly remains rubbish.

Forget privacy: you’re terrible at targeting anyway:

None of this works. They are still trying to sell me car insurance for my subway ride.

Have you actually paid attention to what advertisements you���re served? Maciej did:

I saw a lot of ads for GEICO, a brand of car insurance that I already own.

I saw multiple ads for Red Lobster, a seafood restaurant chain in America. Red Lobster doesn’t have any branches in San Francisco, where I live.

Finally, I saw a ton of ads for Zipcar, which is a car sharing service. These really pissed me off, not because I have a problem with Zipcar, but because they showed me the algorithm wasn’t even trying. It’s one thing to get the targeting wrong, but the ad engine can’t even decide if I have a car or not! You just showed me five ads for car insurance.

And yet in the twisted logic of ad tech, all of this would be seen as evidence that they need to gather even more data with even more invasive tracking and surveillance.

It turns out that bizarre logic is at the very heart of behavioural advertising. I highly recommend reading the in-depth report from The Correspondent called The new dot com bubble is here: it���s called online advertising:

It���s about a market of a quarter of a trillion dollars governed by irrationality.

The benchmarks that advertising companies use ��� intended to measure the number of clicks, sales and downloads that occur after an ad is viewed ��� are fundamentally misleading. None of these benchmarks distinguish between the selection effect (clicks, purchases and downloads that are happening anyway) and the advertising effect (clicks, purchases and downloads that would not have happened without ads).

Suppose someone told you that they keep tigers out of their garden by turning on their kitchen light every evening. You might think their logic is flawed, but they���ve been turning on the kitchen light every evening for years and there hasn���t been a single tiger in the garden the whole time. That���s the logic used by ad tech companies to justify trackers.

Tracker-driven behavioural advertising is bad for users. The advertisements are irrelevant most of the time, and on the few occasions where the advertising hits the mark, it just feels creepy.

Tracker-driven behavioural advertising is bad for advertisers. They spend their hard-earned money on invasive ad tech that results in no more sales or brand recognition than if they had relied on good ol��� contextual advertising.

Tracker-driven behavioural advertising is very bad for the web. Megabytes of third-party JavaScript are injected at exactly the wrong moment to make for the worst possible performance. And if that doesn���t ruin the user experience enough, there are still invasive overlays and consent forms to click through (which, ironically, gets people mad at the legislation���like GDPR���instead of the underlying reason for these annoying overlays: unnecessary surveillance and tracking by the site you���re visiting).

Tracker-driven behavioural advertising is good for the middlemen doing the tracking. Facebook and Google are two of the biggest players here. But that doesn���t mean that their business models need to be permanently anchored to surveillance. The very monopolies that make them kings of behavioural advertising���the biggest social network and the biggest search engine���would also make them titans of contextual advertising. They could pivot from an invasive behavioural model of advertising to a privacy-respecting contextual advertising model.

The incumbents will almost certainly resist changing something so fundamental. It would be like expecting an energy company to change their focus from fossil fuels to renewables. It won���t happen quickly. But I think that it may eventually happen …if we demand it.

In the meantime, we can all play our part. Just as we can do our bit for the environment at an individual level by sorting our recycling and making green choices in our day to day lives, we can all do our bit for the web too.

The least we can do is block third-party cookies. Some browsers are now doing this by default. That���s good.

Blocking third-party JavaScript is a bit trickier. That requires a browser extension. Most of these extensions to block third-party tracking are called ad blockers. That���s a shame. The issue is not with advertising. The issue is with tracking.

Alas, because this software is labelled under ad blocking, it has led to the ludicrous situation of an ethical argument being made to allow surveillance and tracking! It goes like this: websites need advertising to survive; if you block the ads, then you are denying these sites revenue. That argument would make sense if we were talking about contextual advertising. But it makes no sense when it comes to behavioural advertising …unless you genuinely believe that online advertising has to be behavioural, which means that online advertising has to track you to be effective. Such a belief would be completely wrong. But that doesn���t stop it being widely held.

To argue that there is a moral argument against blocking trackers is ridiculous. If anything, there���s a moral argument to be made for installing anti-tracking software for yourself, your friends, and your family. Otherwise we are collectively giving up our privacy for a business model that doesn���t even work.

It���s a shame that advertisers will lose out if tracking-blocking software prevents their ads from loading. But that���s only going to happen in the case of behavioural advertising. Contextual advertising won���t be blocked. Contextual advertising is also more lightweight than behavioural advertising. Contextual advertising is far less creepy than behavioural advertising. And crucially, contextual advertising works.

That shouldn���t be a controversial claim: the idea that people would be interested in adverts that are related to the content they���re currently looking at. The greatest trick the ad tech industry has pulled is convincing the world that contextual relevance is somehow less effective than some secret algorithm fed with all our data that���s supposed to be able to practically read our minds and know us better than we know ourselves.

Y���know, if this mind-control ray really could give me timely relevant adverts, I might possibly consider paying the price with my privacy. But as it is, YouTube still hasn���t figured out that I���m not interested in Top Gear or football.

The next time someone is talking about the necessity of advertising on the web as a business model, ask for details. Do they mean contextual or behavioural advertising? They���ll probably laugh at you and say that behavioural advertising is the only thing that works. They���ll be wrong.

I know it���s hard to imagine a future without tracker-driven behavioural advertising. But there are no good business reasons for it to continue. It was once hard to imagine a future without oil or coal. But through collective action, legislation, and smart business decisions, we can make a cleaner future.