- Link o’the Week: Old CSS, new CSS – fun article about the very early days of CSS and web development. You young’uns don’t know you’re born.
- Click-Away Pound Survey – “In 2016, the survey found that more than 4 million people abandoned a retail website because of the [accessibility] barriers they found, taking with them an estimated spend of £11.75 billion. In 2019, that lost business, the ‘Click-Away Pound’, has grown to £17.1 billion.”
- Testing aria-live support by Zoë Bijl
- Responsive Type and Zoom by Adrian Roselli
- Hydration – Jeremy Keith on why Server-Side Rendering “has a whiff of progressive enhancement to it but none of the user benefits.”
- Inclusive Design for the Immersive Web – proposal for a W3C Community Group to come up with guidelines to ensure accessible XR (virtual reality and augmented reality)
- The WebAIM Million Update: A 6-month accessibility re-analysis of the top 1,000,000 home pages – image alternative text errors decreased by 2.2%; Implementation of HTML regions and ARIA landmarks is on the rise; significant increase in ARIA usage; Pages with ARIA present have 27 more detectable errors (65% more errors) on average than pages without ARIA.
- Prince 13.1 adds support for CSS variables in @page rules and margin boxes; changes the @page rules to inherit from the document root element; extends -prince-pdf-tag-type to support the Artifact and Table values; fixes Thai line-breaking support.
- Why are HTML links called ‘Anchors’? – Sir Uncle Timbo answers my question on Twitter.
- Google admits it sent private videos in Google Photos to strangers – yikes.
- Mastercard chief says breaking up global payments system is ‘stupid’ – Concerns about data integrity help explain why Mastercard pulled out of Libra”. “every time you talked to the main proponents of Libra, I said ‘Would you put that in writing?’ They wouldn’t. .. “when you don’t understand how money gets made, it gets made in ways you don’t like”.
- Open source beyond the market – by David Heinemeier Hansson, Creator of Ruby on Rails, Founder & CTO at Basecamp
- The Ragtag Squad That Saved 38,000 Flash Games From Internet Oblivion – “But while beneficial for internet safety at large, losing Flash came at a cost. The vibrant digital artifacts created using the technology would soon become obsolete.”
Archive for the 'accessibility web standards' Category
- Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords
- India is now a larger smartphone market than the US – “India overtook the US to become the second-largest market, with 158 million phones shipping to the country in 2019.”
- 4 CSS layouts without using media queries with explanation for the Flexbox-challenged people like me
- Masonry layout – Interesting (and very well thought-out) proposal to extend CSS Grid to allow ‘masonry’ layout, and discussion of whether masonry is conceptually an extension of Flexbox or a new display type
- How to find CFPs for developer conferences by @philnash
- Norway’s Opera acquires Estonian startup PocoSys to expand its fintech operations – Hmmm.
- ICE Uses Open Source to Violate Human Rights – “Every open source dependency listed here (updated nightly) is used in Palantir’s software and supports ICE in its systematic human rights violations.”
- There are already Chinese components in your pocket – so why fret about 5G gear? – “This is literally the whole point of standards”
- Want to help someone? Shut up and listen! – fascinating and funny 17 min talk by Ernesto Sirolli, an aid worker, on listening to people and enabling their entrepreneurial spirit.
- What font should you use on the cover of your pulp novel? – a cracking thread by @pulpLibrarian
Hello, you divine diplodocus! Here’s the best of my reading from the last 2 weeks. Last week I was sunning myself in Marbella, Spain, at Forum for the Future, as a guest of the Joomla community. (I’m on their Open Source Matters Advisory Board.)
Anyhow, here we go!
- Link o’the Week: Roles and relationships absolutely golden post by @codingchaos on the ARIA needed for those gnarly composite widgets (and very timely for a project I’m starting soon)
- Opera: Phantom of the Turnaround – 70% Downside – If this report about Opera’s “pivot into predatory short-term loans in Africa and India, deploying deceptive ‘bait and switch’ tactics to lure in borrowers and charging egregious interest rates ranging from ~365-876%” is true, it would make me very sad
- New browser on the block: Flow – Mr PPK interviews Piers Wombwell about a new rendering engine, Flow.
- HTML attributes to improve your users’ two factor authentication experience by Phil Nash
- My Priority of Methods for Labeling a Control – excellent post with actionable information
- Intent to Deprecate and Freeze: The User-Agent string – farewell, browser sniffing!
- Snowpack – “With Snowpack you can build modern web apps (using React, Vue, etc.) without a bundler (like Webpack, Parcel, Rollup). No more waiting for your bundler to rebuild your site every time you hit save. Instead, every change is reflected in the browser instantly.”
- A list of everything that *could* go in the <head> of your document (there’s a LOT)
- W3C Advisory Committee Elects Technical Architecture Group – Once again, we have a good @w3ctag with people I trust to steward standards the right way.
- Letters to Young People Who Inspire Us, by Madeleine Albright, Michelle Bachelet, Tim Berners-Lee and More – Sir Uncle Timbo’s letter to the girls at the Women’s Technology Empowerment Centre in Lagos, Nigeria.
- Reverberations – “how come a church organ doesn’t sound like a chip tune, which is also built up from simple waveforms? Well, actually it will, if you remove the church. And if you connect a Commodore 64 to a loudspeaker in a large hall, it will sound like an organ.”
- city roads “This website renders every single road within a city” using OpenStreetMap and WebGL
Happy Nude Year, you perfectly pouting porcupine!
- The Guardian view on the gig economy: stop making burnout a lifestyle – “”Uncertain work is becoming the norm, with the result that unemployment statistics look better than the way Britons feel .. We ought to work and have careers that enable us to focus on our relationships and have soul-enriching pastimes. It cannot be socially good to consider leisure time as a lost commercial opportunity.”
- Why You Should Choose HTML5 article Over section, by l’il old me, helped by the resplendent @LeonieWatson
- Progressive Web Apps in 2020 by Maximiliano Firtman
- The $70B opportunity in India’s emerging social commerce sector – “Over 90% of the small and medium businesses we surveyed sell directly through WhatsApp in India — more than 4× the number who sell on Flipkart and Amazon.”
- Guiding Development of Contribution and Community Strategies in Open Source Software Requirements Engineering – PhD thesis by Johan Linåker
- Understanding Async Await by Sarah “Drazzo” Drasner
- TikTok boom: US Army bans squaddies from using platform on government-issued phones – As the first globally successful Chinese social property, TikTok has attracted scrutiny. Army spokesperson Lt Col Robin Ochoa described the app as “a cyber threat”.
- Putting devs before users: how frameworks destroyed web performance – “So creatives, stop being so focused on your CV or personal convenience. Stop putting your own interests above those of your users, and wasting hundreds of kilobytes on stuff no one cares about. You are likely not Facebook or Google, and you shouldn’t be designing or building things as if you are.”
- HTML is a living language – 11 minute podcast by Chris Ferdinandi
- China’s success at AI has relied on good data – But cheap labour has also played an important part: “a data supply chain using cheap labour at Chinese data factories no one has ever heard of.”
- Rhasspy “(pronounced RAH-SPEE) is an open source, fully offline voice assistant toolkit for many languages that works well with Home Assistant, Hass.io, and Node-RED .. intended for advanced users that want to have a voice interface to Home Assistant, but value privacy and freedom above all else.”
- Which emoji scissors close? – important research here
- CSS 3D transformations & SVG – “Resolving the co-evolutionary branches of HTML, CSS and SVG – and why it matters”
- If you ARIA label something, give it a role says Marco Zehe, screen reader user and Accessibility Lord of Mozilla.
- Making GOV.UK more than a website – using schema.org structured markup allows “meeting users where they are, meeting user needs at the point of need”, for example on Voice Assistants or in Google OneBox search results.
- Why <details> is Not an Accordion – “HTML really needs <accordion> , <tabs>, <dialog>, <dropdown>, and <tooltip> elements. Not more “low-level primitives” but good ol’ fashioned, difficult-to-get-consensus-on elements”
- CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS, by Harry Roberts
- Understanding the PDF Tags Tree
- Vivaldi browser pretends it’s Chrome so websites don’t break – “it spotlighted baseless browser incompatibilities with Google search, Google Docs, WhatsApp and Netflix. It also said it’s got problems with Medium, Microsoft Teams, Twitch, Github, Abc Go, AT&T TV Now and Shopify”
- An adventurer’s guide to W3C specs – How do all the accessibility specs and guidelines fit together?
- A Remote Tanzanian Village Logs Onto the Internet – “The Danish company Bluetown installed a hot spot in Sagara B, with download speeds fast enough for Netflix and for local life to change.”
- China is making more of Africa’s phones than you think – “Chinese companies dominate Africa’s phone market”
- Another reason Prince Andrew is a disgrace – Buried in the T&Cs of his Pitch at Palace venture is that he takes 2% of your business for zero cash for 3 years after the pitch.
- Why WeWork went wrong – “The office-space startup took a tumble when investors tired of its messianic CEO and lack of profits. But why were its backers – the House of Saud among them – so keen to pour billions into it in the first place?”. Long, and fascinating article.
Merry Consumerfest, and a Happy Nude Year!
- 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:
- 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,
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.
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
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.”
- 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.