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”
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.
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”
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”
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.
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.
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".
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.
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.
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.”
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.”
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.
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”
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”.
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!
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.”
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.”
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”
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.
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
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.
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”
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:
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:
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”
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.
