Bruce Lawson's personal site

• The CEO of Twitter and Square says he’s moving to Africa for at least 3 months next year because the continent will ‘define the future’ – I can’t say I agree with Jack about much, but here I do.
• 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”
• How To Ease Your Team’s Development Workflow With Git Hooks
• Web Components and the Accessibility Object model (AOM) by Watters (Léonie Watson)
• The business case for inclusive design: The Big Hack study findings – The ‘Purple Pound’ (disposable income controlled by disabled people in UK) is an estimated £274 Billion. 67% said they would spend more money on entertainment, sports and leisure if there were no barriers to digital access.
• 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.
• My thoughts on Gutenberg Accessibility by @MarcoInEnglish, a screen reader user.
• 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.”
• prefers-reduced-data – proposal for a new CSS media query
• 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”
• “Pointless emails: they’re not just irritating – they have a massive carbon footprint – “More than 64m unnecessary emails are sent in UK every day. if every adult sent one fewer email a day we would save more than 16,433 tonnes of carbon a year – equivalent to 81,152 flights to Madrid or taking 3,334 diesel cars off the road.”
• Why xHamster Is So Much Better at Content Moderation Than Facebook – “as Big Tech argues against even the most minimal acts of oversight, it is worth noting that extreme scrutiny placed on the adult industry has not eradicated the industry or made it incapable of innovating”
• Frankly, We Do Give a Damn: The Relationship Between Profanity and Honesty – “profanity is positively correlated with honesty at an individual level and with integrity at a society level”. Abso-fucking-lutely.

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.

Glen Turner gives @ClaudiaLizaTV some ways they could improve. pic.twitter.com/MLim0R4pNf

— Channel 5 News (@5_News) December 2, 2019

Most of the problems that Glen talks about are easy to diagnose and solve. In fact, last week I wrote a handy Checklist to avoid the most common accessibility errors. Use it and make more money while being a better person.

Free online course!

If you want to learn more, as it’s International Day of Persons with Disabilities, W3C launched an Introduction to Web Accessibility free online course in cooperation with UNESCO. Enrol from today; the course starts 28 January 2020.

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.

— Frederik Vanhoutte (@wblut) November 22, 2019

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:

1. If the image is purely decorative, it must have empty alt text: alt="". But it should probably be in CSS, anyway.
2. 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).
3. 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".

Heydon Pickering’s revenge.css bookmarklet does a quick and easy test to diagnose these, although I feel some of its other warnings are now outdated – I’ve filed an issue.

Empty links, empty buttons

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.

Use Heydon’s revenge.css bookmarklet to diagnose these.

Missing form input labels

52% of homepages had missing form labels. I prefer to wrap the label around its input like this:

<label>Email adddress: 
  <input type="email" />
</label>

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.

There’s lots more to accessibility, especially if you have lots of JavaScript widgets and single-page application architecture. But my list will help you to avoid the most common accessibility errors and become a web superhero adored by millions. Moritz Gießmann has a nice single-page Accessibility Cheatsheet.

You can also make tagged accessible PDFs from your pages using Prince—it’s free for non-commercial use. If you’re one of the React Kool-Kidz™, I recommend using Tenon-UI: Tenon’s accessible React components library.

Buy me a pint when you see me next. xxx

Dive deeper?

The single source of truth is Web Content Accessibility Guidelines (WCAG) 2.1 from W3C. UK’s Government Digital Service has a good readable Understanding WCAG 2.1 guide. For advanced applications requiring ARIA, I find W3C’s Using ARIA invaluable.

You want tools? The BBC has open-sourced its BBC Accessibility Standards Checker. Google Lighthouse and Tenon.io are also very good. Please note that no automated tool can be completely reliable, as the fun article Building the most inaccessible site possible with a perfect Lighthouse score demonstrates.

If you want a self-paced course, on International Day of Persons with Disabilities, W3C launched an Introduction to Web Accessibility free online course in cooperation with UNESCO. Enrol now; the course starts 28 January 2020.

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.”
• KaiOS named as one of Time Magazine’s Best Inventions of 2019 – India’s second most common mobile OS is a fork of Firefox OS, and powers cheap feature phones
• 52 UX Cards to Discover Cognitive Biases – a lovely freebie from the splendid @walterstephanie and the fabulous @hellgy
• Ideas for Making the WordPress Back End More User Friendly
• De-identification for data journalists “Getting important stories into the open, without revealing unnecessary personal details”
• Geneva – a new Artificial Intelligence-based system that automatically learns to evade censorship in India, China, and Kazakhstan.
• Hikvision marketed an AI camera that automatically identifies Uyghurs in China, and now covers it up. Ugh.
• The size of space – nice wow-filled data visualisation.
• ButtyStock is “The number one site for free crisp sandwich photos”

• Apple Is Trying to Kill Web Technology – “The company has made it extremely difficult to use web-based technology on its platforms, and it hopes developers won’t bother”
• 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.”
• Breaking Chains with Pipelines in Modern JavaScript – a look at overcoming the limitations of iteration methods in JS and lodash, and a new simple and small iteration library (AAL-licensed)
• 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!
• Restricting Notification Permission Prompts in Firefox – “about 99% of notification prompts go unaccepted, with 48% being actively denied by the user”. No surprises here. People have much greater investment in apps they’ve downloaded than random sites.
• The Evolution of Material Design’s Text Fields How user research reshaped the design of Google’s open-source text fields
• Nipple reconstruction tattooist ‘keeps getting Facebook ban’ – because the sight of a post-mastectomy reconstructed nipple could seriously undermine the job of enabling fascists and facilitating genocide.
• Alexa’s Struggle With African Accents
  
• OpenType shaping documents – “we are seeking comments and bugfixes on the Indic-script, Arabic-like, Hangul, Hebrew, Thai/Lao, Tibetan, Khmer, Myanmar, default, and USE documents”
• Opera presents the State of Mobile Web report 2019 for Africa – good to see Opera going back to its roots after its infatuation with high-ARPU “western” markets
• The average web page (Sept 2019) and the average web page (October 2008) – So glad someone archived the ’08 Opera MAMA study!
• Releasing Spleeter: Deezer Research source separation engine – separate an audio track into separate sources (e.g., split out vocals, bass, drums) using Tensorflow, with pretrained models for 2, 4 and 5 stems separation, MIT-licensed. That’s what I’ll be mucking about with on my “Fun Friday”.
• Digital tools for democratic participation by mySociety; predominantly UK-focused.
• Freedom on the Net 2019: The Crisis of Social Media (Freedom House report). “What was once a liberating technology has become a conduit for surveillance and electoral manipulation.”
• Ex-Twitter employees accused of spying for Saudi Arabia but .. but .. Saudi are our Wonderful Friends And Partners.

• As the internet turns 50, we must protect it as a force for good – says Sir Uncle Timbo. “On October 29, 1969, the internet era began as UCLA Computer Science Professor Len Kleinrock sent the first message on ARPANET, a network of computers that would evolve to become the internet.”
• Apply to speak at Front End North 2020 – Grass-roots Sheffield-based conference is looking for talk proposals. Semi-anonymised talk selection process, emphasis on responsible web development. Go on, submit a talk, especially if you’re a new speaker!
• Introducing Progressive Web Apps to Samsung Galaxy Store – “we have started adding PWAs to the Samsung Galaxy Store, placing Web App experiences alongside apps”
• The joy and challenge of developing for KaiOS – Nolan Lawson on developing for India’s second most-used mobile OS
• Oslo is where two of the world’s browser engines were born. Let’s celebrate World Browser Day – Uncle Håkon on the new blue historical plaque at Waldemar Thranes gate 98, Oslo – the office building where Presto and WebKit were born
• WebStandards podcast: GeckoView, Firefox DevTools, Firefox on mobile, Opera, why not Chromium – Vadim Makeev interviews Andreas Bovens of Mozilla (47 mins)
• TC39: proposal for adding the simple-but-useful pipeline operator to JavaScript
• 2019 Affordability Report from Alliance for Affordable Internet. “Across Africa, the average cost for just 1GB data is 7.12% of the average monthly salary. If the average US earner paid 7.12% of their income for access, 1GB data would cost USD $373 per month”
• Site Kit is now available for all WordPress sites – “Site Kit is Google’s official WordPress plugin — it gives you insights on how people find and use your site, how to improve and monetize your content, with data from multiple Google tools.”
• Alexa and Google Home abused to eavesdrop and phish passwords – “Amazon- and Google-approved apps turned both voice-controlled devices into “smart spies”. Who could possibly have guessed this would happen?
• The voice from our Nest camera threatened to steal our baby – your periodic reminder that the “S” in “IoT” stands for “Security”
• In China, you can no longer buy a smartphone without a face scan
• Report: Facebook usage drops a stunning 26% since 2017 (in the USA)
• This economist has a plan to fix capitalism. It’s time we all listened – “History tells us that innovation is an outcome of a massive collective effort – not just from a narrow group of young white men in California”
• The Great(er) Bear – using Wikidata to generate better artwork – Like Uncle Tezza, I’ve always loved Simon Patterson’s original, but been irked by the intersections.
• Skin-On Interfaces – Artificial Skin for Mobile Devices. “Human skin is the best interface for interaction. I propose this new paradigm in which interactive devices have their own artificial skin, thus enabling new forms of input gestures for end-users.”
• The Orgasm Sound Library is an archive of hundreds of creative commons-licensed audio files of orgasm sounds. You can also upload your own.
• Buttplug.io – “an open-source standards and software project for controlling intimate hardware, including sex toys, fucking machines, electrostim hardware, and more.”
• Hellvetica font – “kern in hell”

Hello, you kawaii kumquat! Here’s this week’s lovely list ‘o’ links for your reading pleasure. It’s been a while because I’ve been gallivanting around Japan, Romania and the Netherlands, so this is a bumper edition.

• Service workers at TPAC – “For the first time in a few years, we focused on potential new features and behaviours. Here’s a summary”
• You really don’t need all that JavaScript, I promise – transcript, video and slides of Stuart Langridge’s jscamp.ro closing keynote talk
• The term “Responsive Web Design” has failed by Frances Berriman
• Beyond Browser Vendors – Brian “Extensible” Kardell on how all the browsers being open source can be a game-changer in getting stuff added to the web platform. See also crowd-funding Yoav Weiss to implement responsive images
• A modern CSS reset by Andy Bell
• Critical Security Issue identified in iTerm2 as part of Mozilla Open Source Audit – “a critical vulnerability in the tmux integration feature of iTerm2; this vulnerability has been present in iTerm2 for at least 7 years”. Update now, chums!
• Mobile data prices fall across low and middle income countries – In 100 countries measured, the average cost for 1GB data as a % of average monthly income declined from 5.76% to 4.69% — a drop of 11.24%, bringing access within reach for millions more people.
• Supreme Court Won’t Hear Domino’s Pizza Website Access Dispute – “Domino’s Pizza Inc. won’t be able to evade a lawsuit claiming it doesn’t ensure blind people can order food through its website and mobile app.”
• Is Using Coil to Monetize Prompts Gonna Work? – Dave Rupert experiments with #webmonetization
• Call for Participation in Ad Blocker Community Group – “The mission of this group is to improve web standards by conveying to Working Groups use cases from an ad blocker perspective (particularly ad blocker browser extensions)”
• is-website-vulnerable command-line tool to find publicly known security vulnerabilities in a website’s frontend JavaScript libraries
• Accessibility Testing with the NVDA Screenreader – 26 min video on how to download, install, configure and test in NVDA on Windows
• How to 51% Attack Bitcoin
• Interview with a Pornhub Web Developer by David Walsh
• YouPorn goes progressive with new mobile web apps for Android and iOS – Today I learned that YouPorn has a PWA (Progressive Web App – at least that’s what I assume the “W” stands for). Link is safe for work.
• ASPIRE: Ideals to Aspire to When Building Websites by Scott Jehl
• Libra: PayPal first to drop out of Facebook cryptocurrency – it’s also reported that Visa, Mastercard, Others Reconsider Involvement in Facebook’s Libra Network.
• At What Point Does Malfeasance Become Fraud?: NYU Biz-School Professor Scott Galloway on WeWork – interesting look at the real economics and dynamics of trendy DisruptionMongers

There won’t be a reading list next week as I’m going off the grid to read books and record music in a 400 year old farmhouse in the countryside, far from WiFi and the bleeps and bloops of notifications. Until next time, hang loose and stay groovy.

Hello, you cheeky strawberry! Here’s this week’s lovely list ‘o’ links for your reading pleasure.

• Firefox blocks third-party tracking cookies and cryptominers – Yay.
• Scroll-To-Text using a URL fragment – link to, and scroll to, arbitrary text in another webpage, even if there is no id on the element. Implemented in Chrome behind a flag, with a single #. Shut up and take my money.
• Logical Operations with CSS Variables by Ana Tudor
• Analytics, logs and metrics Uncle Remy compares Google, Netlify and self-hosted GoAccess analytics
• Automatically compress images on Pull Requests – “Calibre’s new GitHub Action allows you to compress raster images with minimal setup automatically. Never ship unoptimised graphics again”
• How to build a voice assistant with open source Rasa and Mozilla tools – “build an assistant that runs locally and ensures the privacy of your data”
• Stalking cheap Chinese GPS child trackers is as easy as 123… 456 – because that’s the default password on 600k+ of these gizmos – “It’s 2019 and, like, duh, insecurity comes as standard”
• Police hijack a botnet and remotely kill 850,000 malware infections
• Sex lives of app users ‘shared with Facebook’ – “Some period-tracking apps are sharing intimate details with Facebook, says Privacy International.”
• Google’s ‘secret web tracking pages’ explained – Brave and Google are having fisticuffs. Google denies naughtiness. Irish Data Protection Commission will decide.
• On “AI” replacing jobs and humans
  – “in order to get the damn autonomous cars to work we human beings will be excluded from even more public spaces: Some autonomous car experts are already asking for sidewalks to be basically cages with defined doors that open only when the traffic lights are green so the world becomes simple enough for cars to “understand”
• You Only Need 50% of Job “Requirements” – “You’re as likely to get a job interview meeting 50% of job requirements as meeting 90% of them … for women, you’re as likely to get an interview matching 40% of the job requirements as matching 90%. Note also that, as we’ve seen in previous analysis, women in general have higher interview rates than men”

There won’t be a reading lost for a few weeks as I’m writing this from a train to London, commencing a 3 week jaunt around conferences in Japan and Europe. Until next time, hang loose and stay groovy.

I use the free version of the excellent Mailchimp for WP plugin to allow visitors to this site to sign up for my Magical Brucie Mail and get my Reading List delivered to their inboxes.

When I did my regular accessibility check-up (a FastPass with the splendid Accessibility Insights for Web Chromium plugin by Microsoft) I noticed that the Mailchimp signup form fails two WCAG guidelines:

label: Form elements must have labels (1) WCAG 1.3.1, WCAG 3.3.2

This is because the out-of-the-box default form doesn’t associate its email input with a label:

<p>
	<label>Email address:</label>
	<input type="email" name="EMAIL"  required />	
</p>

I’ve raised an issue on GitHub. Update, 6 Sept: the change was turned down.

Luckily, the plugin allows you to customise the default form. So I’ve configured the plugin to associate the label and input by nesting the input inside the label. (This is more robust than using the IDref way because it’s not susceptible to Metadata partial copy-paste necrosis. (I also killed the placeholder attribute because I think it’s worthless on a single-input form.)

You can do this by choosing “Mailchimp for WP” in your WordPress dashboard’s sidebar, choosing “Form” and then over-riding the default with this:

<p>
	<label>Email address: 
	<input type="email" name="EMAIL"  required />
	</label>
</p>

<p>
	<input type="submit" value="Sign up" />
</p>

And, yay!

• Opinion piece o’the week: React: Why I have a problem with React the library and spend a lot of time talking to my therapist by the inimitable Charlie Owen
• Writing a Web Monetized Game “In my game, Goblin Farmer, you get your in-game money from Web Monetization micropayments.”
• Google proposes new privacy and anti-fingerprinting controls for the web
• ‘The scale of the problem is enormous’: Apple flexes strong anti-tracking stance
• Hi, Alexa. How Do I Stop You From Listening In On Me? – Protecting your privacy on Alexa, Siri and Google Home. (PSA: if you say “my leg hurts”, Alexa starts listening to you.)
• New & Experimental CSS Tools in Firefox – 18 minute presentation at SFHTML by Victoria Wang. Some very cool work here that makes Firefox an indispensable tool for developing modern websites.
• Google finds ‘indiscriminate iPhone attack lasting years’ “attackers were using 12 separate security flaws in order to compromise devices. Most were bugs within Safari … Simply visiting the hacked site was enough for the exploit server to attack your device, and if it was successful, install a monitoring implant. Once on a person’s iPhone, the implant could access an enormous amount of data, including (though not limited to) contacts, images and GPS location data. It would relay this information back to an external server every 60 seconds”
• Empathy and innovation: How Microsoft’s cultural shift is leading to new product development – a deaf engineer at Microsoft pioneered the “blur background” feature. She always asked her parents to turn off the lights to help her focus better on their faces. Then she created software to do it.
• The loom and the thresher: Lessons in technological worker displacement

Bit of a plug: I’m co-curating and MCing JSCamp – a one-day JavaScript conference in Bucharest, Romania on 24th of September. It’s the conference I want to attend – not full of frameworks and shinies, but full of funny, thought-provoking talks about making the Web better. The speaker line-up is cosmic, maaaan. Bucharest is a lovely city, based on Paris, accommodation and food is cheap and it’s and very easy to get to from anywhere in Europe. Come along, or tell your friends! Or both! (And no, I’m not on a percentage!)

Want my reading lists sent straight to your inbox? Sign up and Mr Mailchimp will send it your way.