Journal

When advocating accessible web practices for a commercial website, the question of “what does the law require us to do?” invariably arises.

The appropriate answer to that question should really be that it doesn’t matter. Regardless of the law there is a moral imperative to do the right thing unless you are OK with excluding people, making their web experiences unnecessarily painful, and generally flouting the web’s founding principles.

However as Web Usability’s article What is the law on accessibility? helpfully advises, in the UK the legal situation is as follows:

“The accessibility of a UK web site is covered by the Equality Act 2010” (which states that) “Site owners are required to make ‘reasonable adjustments’ to make their sites accessible to people with disabilities”. While “there is no legal precedent about what would constitute a ‘reasonable adjustment’”, “given that the Government has adopted the WCAG 2.1 level AA as a suitable standard for public sector sites and it is more broadly recognised as a ‘good’ approach, any site which met these guidelines would have a very strong defence against any legal action.”

So, WCAG 2.1 Level AA is the sensible accessibility standard for your commercial UK-based website to aim for.

While not aimed specifically at the UK market, deque.com’s article What to look for in an accessibility audit offers similar advice:

The most common and widely-accepted standard to test against is WCAG, a.k.a. Web Content Accessibility Guidelines. This standard created by the World Wide Web Consortium (W3C) defines technical guidelines for creating accessible web-based content.

WCAG Success Criteria are broken down into different “levels of conformance”: A (basic conformance), AA (intermediate conformance), and AAA (advanced conformance). The current standard for compliance is both WCAG 2.1 Level A and AA.

If you don’t have specific accessibility regulations that apply to your organization but want to avoid legal risk, WCAG 2.1 A and AA compliance is a reasonable standard to adopt.

Additional references

• GOV.UK’s overview of WCAG 2.1
• WCAG 2.1 Official Docs
• UK Accessibility Laws on siteimprove.com
• Disabled access to websites under UK Law (from 2011)

Here’s an interesting tool for creating and sharing small-ish web pages without having to build a website or organise hosting.

itty.bitty takes html (or other data), compresses it into a URL fragment, and provides a link that can be shared. When it is opened, it inflates that data on the receiver’s side.

While I find this idea interesting, I’m not yet 100% sure how or when I’ll use it! I’m sure it’ll come in handy at some point, though.

Here’s my first “itty bitty” page, just for fun.

(via @chriscoyier)

Hidde de Vries explains why an HTML heading should never be immediately followed by another.

When you use a heading element, you set the expectation of content.

I have always prided myself on using appropriate, semantic HTML, however it’s recently become clear to me that there’s one thing I occasionally do wrongly. Sometimes I follow a page’s title (usually an h1 element) with a subtitle which I mark up as an h2. I considered this the right element for the job and my choice had nothing to do with aesthetics.

However a recent article on subtitles by Chris Ferdinandi and now this article by Hidde have made me reconsider.

HTML headings are essentially ”names for content sections”. On screen readers they operate like a Table of Contents – one can use them to navigate to content.

Therefore I now reckon I should only use a hx heading when it will be immediately followed by (non-heading) content – paragraphs and so on – otherwise I should choose a different element.

I should probably mark up my subtitles as paragraphs.

I watched Netflix’s documentary The Social Dilemma the other night. It’s been generating a bit of a buzz, and its subject matter – the effects of social media – is one I’m generally interested in. However, I wasn’t a fan.

While I totally agree with the sentiment that Facebook and Google (amongst others) don’t act in our best interests, there were more than a few aspects of this film that didn’t sit quite right.

Firstly, Netflix themselves are no angels (their CEO once said “sleep is our main competitor”) so for them to suddenly dress this up as “breaking news”, act as heroic whistleblower then make it all sexy with that typically shiny Netflix aesthetic, felt really disingenuous and nasty.

Secondly, why is it all former employees of Google and Facebook (with the exception of proper commentators like Shoshana Zuboff) that are “breaking the news” to us? It stinks of “I took the big pay cheque from a company doing bad things, now I’m taking Netflix’s pay cheque to rat on my former employee, even though Netflix do bad things too”. I trust some of these guys, and Netflix, about as far as I could throw them.

I like the social connection aspects of Facebook and it’s been handy over the years, but (lovely birthday messages and event planning aside) I wish I could bite the bullet and get off. I’d also love to see more people have their own websites/blogs – their own home on the web – and for there to be modern means of cross-communication between those. I reckon too many people have come to think that Facebook and Google are the web. They’re not.

You can have your own home on the web where the content you publish is not fodder for an algorithm that pushes you stuff and sells your data to the highest bidder.

An interesting BBC podcast on the history and true nature of the cloud.

We connect to the cloud, think of it as place-less, a digital “elsewhere” for storing and retrieving our data, content and memories. But far from being immaterial, the cloud is a vast, physical network made up of concrete, silicon and steel, of earthbound server farms, subterranean data centres and cables beneath the sea. It is not a publicly owned space or digital 'commons'. It is a multi-billion dollar, private infrastructure dominated by some of the world’s most powerful companies—principally Amazon, Microsoft and Google. The cloud exists within the same geography that we do: a patchwork of national and legal jurisdictions, which determine—most of the time—what it can and cannot do.

The aria-label and aria-labelledby attributes do the same thing but in different ways. Sometimes the two attributes are confused and this has unintended results. This post describes the differences between them and how to choose the right one.

The key takeaways for me were:

• Many HTML elements have an accessible name (which we can think of as its “label”) and this can be derived from the element’s content, an attribute, or from an associated element;
• for aria-labelledby, use the id of another element and that will then use that element’s text as your first element’s accessible name;
• use native HTML over ARIA where possible, but when you need ARIA it’s better to reuse than duplicate so if an appropriate label already exists in the document use aria-labelledby; otherwise use aria-label;
• an ARIA attribute will trump any other accessible name (such as the element’s content)
• there are some elements on which these ARIA attributes do not work consistently so check these before using.

I watched Tenet again last night (in IMAX with Jamie) and second time round it all made sense.

My initial viewing was good but really confusing; but this time I knew what was going on and loved it! Based on the plot, it actually makes sense that you need to see it twice, too.

This film has its flaws, no doubt, but for sheer invention, visuals you’ve genuinely never seen before, combined with the overall look, sound and mood, Mr Nolan has me hook, line and sinker and TBH I will likely never tire of watching his films. I expect to revisit this one roughly another ten times in the next year!

Footnote: I’ve been enjoying some internet rabbit-holing to squeeze out every last nuance of the plot I might have missed. Here are some great articles and resources which have helped (with the usual “heavy spoilers” caveat):

• Adactio’s fantastic review and insights
• Vulture’s humorous plot appraisal
• Transcript on Scraps from the Loft. It’s neither official nor 100% accurate but does a job.

I’m available for limited logo design projects. Just the logo. Limited back-and-forth. Reasonable price. With a particular focus on elevating small businesses that can’t or don’t want to hire a full-blown agency. Let’s keep this simple.

I’m a long-time fan of Dan Cederholm and his work. If I wanted a new logo, this is where I’d go!

We’re excited to announce the first beta release and general availability of the Rome linter for JavaScript and TypeScript. This is the beginning of an entire suite of tools. Rome is not only a linter, but also a compiler, bundler, test runner, and more, for JavaScript, TypeScript, HTML, JSON, Markdown, and CSS. We aim to unify the entire frontend development toolchain.

A very ambitious project from the creator of Babel.

Sometimes you want to create a line break after an inline element, while retaining that inline element’s inline status.

A lovely trick from Andy Bell for breaking after an inline element (such as a form label) using a pseudo-element and the white-space property, so that we can avoid setting the element to display: block (thereby becoming full-width etc) when we don’t want that.

Here’s my own codepen for posterity.