Accessibility

Accessibility and inclusive design should be the first considerations when designing a digital product, service or website. A full list of categories is also available.

Avatars and alt text

Article posted 19th November 2024 in Accessibility

I really enjoyed Nicolas Steenhout’s recent article on Alt text for avatars or user photos. But there is a context where I would break his rule…
Getting started with NVDA

Article posted 2nd October 2024 in Accessibility

Everyone who works in digital product development should be familiar with screen reader software. Here’s how to get started with NVDA on Windows.
An enhancement to accessible responsive tables

Article posted 30th August 2024 in Accessibility, HTML and JavaScript

I’ve written about accessible responsive tables before but something has been bugging me. So here’s another step to make those tables even better.
User ‘wants’ versus accessibility

Article posted 28th July 2024 in Accessibility

When getting to grips with accessibility, there’s often a tension between what users ask for and doing things in an accessible way.
How to browse the web with the keyboard alone

Article posted 10th June 2024 in Accessibility

Some people use the keyboard to get around their computer. Knowing how to do this is important for accessibility testing and to inform design.
Accessibility overlays are not for disabled people

Article posted 11th May 2024 in Accessibility

Those little accessibility widgets you see on some websites are absolutely not for who you think they are.
Images as the first thing in a button or link

Article posted 23rd April 2024 in Accessibility and HTML

If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.
Alt text for CSS generated content

Article posted 11th March 2024 in Accessibility, CSS and Development

There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.
The accessibility conversations you want to be having

Article posted 29th January 2024 in Accessibility

In most companies, accessibility conversations centre around WCAG compliance, but that’s just the start. Thinking beyond that is where you want to be!
Screen reader users and the tab key

Article posted 21st December 2023 in Accessibility

People who use a screen reader on a laptop/desktop generally use the keyboard, but that doesn’t mean they use it like a keyboard-only user.
Not all screen reader users are blind

Article posted 30th November 2023 in Accessibility

There’s a common misconception that everyone who uses screen reader software is blind; that’s mostly the case, but not always.
Accessibility by degrees

Article posted 31st October 2023 in Accessibility

Retro-fitting accessibility is far from ideal but usually the only way digital products are able to reach all of their potential users.
Accessibility represents maturity

Article posted 31st July 2023 in Accessibility

Accessibility is a great measure of mature, disciplined software production, and Twitter have become a good example of the opposite.
Don’t meddle with user input

Article posted 29th May 2023 in Accessibility and Design

Every idea comes from a good place, but some well-intended features are actually bad for usability; limiting form field input is one of those things.
Getting VoiceOver to shut up

Article posted 30th April 2023 in Accessibility and Apple

The whole point of VoiceOver is that it talks out loud, but sometimes you need it to be quiet for a moment.
VoiceOver’s Trackpad Commander on Mac

Article posted 21st April 2023 in Accessibility and Apple

Did you know there’s a way to make VoiceOver on a Mac behave like VoiceOver on an iPhone or iPad? No? Let me introduce you to Trackpad Commander!
The difference between Increased Contrast Mode and Windows High Contrast Mode (Forced Colours Mode)

Article posted 27th March 2023 in Accessibility and CSS

I’ve written about Increased Contrast Mode and Windows High Contrast Mode, but what’s the difference? And where does Forced Colours Mode come in?
Windows high contrast mode and focus outlines or: My focus indicators were inaccessible

Article posted 22nd March 2023 in Accessibility, CSS and Development

In order to make my website’s keyboard focus outlines pretty in Safari, I inadvertently broke things for people who use Windows High Contrast Mode.
If you’re going to do a job, do it properly

Article posted 17th February 2023 in Accessibility

I often hear the phrase “forward fix” used when referring to accessibility. It sounds fancy, but what it really means is “We’ll come back to the accessibility bit later”.
Buttons, links, and focus

Article posted 16th February 2023 in Accessibility and Design

Knowing when to use a button or link is important, and there’s some great guidance out there. Here’s another way to work out when to use which.
If you need a link, don’t use a button

Article posted 23rd January 2023 in Accessibility, Design and Development

Links sometimes need to look like buttons, but what about the other way round? Spoiler alert: it’s a terrible idea!
Overlapping interactive areas

Article posted 30th December 2022 in Accessibility, Design and Development

When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.
Images, illustrations, and contrast

Article posted 22nd December 2022 in Accessibility and Design

‘Alt’ text is vital for people who can’t see an image, but what about those who don’t use a screen reader but still struggle with low contrast images?
Which images need descriptive text?

Article posted 30th November 2022 in Accessibility and Content

Image alt text is extremely important to many users, but how do we know which images should be described, and which shouldn’t?
Buttons with icons and text

Article posted 29th November 2022 in Accessibility and Development

We can all agree that icon-only buttons are a bad idea, but how do we provide the most accessible experience when we pair an icon with visible text?
Complexity and caution

Article posted 31st October 2022 in Accessibility and Design

Whenever we design a non-standard but seemingly helpful behaviour, keep asking yourself if it’s the right thing to do for all users.
Accessibility beyond the ‘obvious’

Article posted 27th October 2022 in Accessibility and Design

Just as not all disabilities are visible, accessibility goes much further than the tools people use to access digital content on a practical level.
It’s good to make mistakes

Article posted 20th September 2022 in Accessibility and Design

As a designer and developer I’ve made countless mistakes, but that’s part of the reason I’m good at what I do.
Focus appearance explained

Article posted 2nd September 2022 in Accessibility

There’s some great stuff coming up in WCAG 2.2, but there’s one rule that’s particularly difficult to understand, so here it is in a bit more detail.
Here, here, and here

Article posted 10th August 2022 in Accessibility, Content and Design

Every now and again I read an article that links to multiple places, and each link is a separate word in a short phrase. I’m not a fan.
Abbreviations can be problematic

Article posted 18th July 2022 in Accessibility

We can all agree that abbreviations like acronyms usually need to be defined, but what if the HTML method we use isn’t accessible to all users?
Bag some AAA wins where you can

Article posted 13th July 2022 in Accessibility

Complying with WCAG AA is hard, and AAA seems a lot harder, but there are actually plenty of AAA rules that are relatively easy to meet.
Accessible animated content without the compromise

Article posted 27th June 2022 in Accessibility, Design and Development

Accessible animated GIFs are rubbish. Instead of compromising our animations in order to meet WCAG, we should be checking what our users prefer.
Accessibility doesn’t stop at WCAG compliance

Article posted 23rd June 2022 in Accessibility

While it’s true that WCAG represents a solid baseline, there’s a lot more we should be doing to make our work truly accessible.
Icon-only links fail WCAG

Article posted 20th June 2022 in Accessibility

Icon-only buttons don’t fail the Web Content Accessibility Guidelines (WCAG), even though I wish they did, but what about icon-only links?
What I wish was in WCAG: prohibit icon-only buttons

Article posted 16th June 2022 in Accessibility

The Web Content Accessibility Guidelines (WCAG) ensure that buttons have a programmatical accessible name, but it doesn’t have to be visible.
HTML isn’t quite accessible out of the box

Article posted 20th April 2022 in Accessibility

There’s a commonly held idea that HTML is accessible out of the box, before any CSS has been applied. Unfortunately, that isn’t quite the case.
CSS Naked Day

Article posted 9th April 2022 in Accessibility

CSS Naked Day is a day when all website owners should strip their site of CSS to expose the ‘naked’ HTML underneath.
WCAG AAA in language I can understand

Article posted 23rd March 2022 in Accessibility

A follow-up to my post on the Web Content Accessibility Guidelines 2.1, level AA; this time covering the rules that make up the stricter level AAA.
Is ‘a11y’ exclusive?

Article posted 16th March 2022 in Accessibility

Is the term ‘a11y’ inherently inaccessible? Well, yes and no. It can come in very handy in some circumstances, but it should be used with care.
Safari 15.4

Article posted 15th March 2022 in Accessibility, Apple, CSS and HTML

macOS 12.3 and iOS 15.4 landed yesterday, and with them came Safari 15.4 and some exciting new features. Here are the five that stood out to me.
WCAG 2.2 in language I can understand

Article posted 21st February 2022 in Accessibility

A follow-up to my post on the Web Content Accessibility Guidelines 2.1, level AA; this time explaining the nine rules coming up in WCAG 2.2.
Safari, focus-visible and accessibility

Article posted 14th February 2022 in Accessibility and CSS

Safari is the last browser to support the :focus-visible pseudo-class, and with that support comes a huge accessibility win.
WCAG, but in language I can understand

Article posted 28th January 2022 in Accessibility

An as-close-to-a-single-paragraph-as-I-can-manage summary of each rule in the Web Content Accessibility Guidelines, version 2.1, level AA.
Design for everyone

Article posted 9th December 2021 in Accessibility and Design

Design is a hugely responsible role, and one responsibility is ensuring everyone can use our websites, products, services, and applications.
What do we do with a link or button matters

Article posted 22nd November 2021 in Accessibility and Design

Language is a powerful thing; if the metaphor we use to describe actions to our users is ‘click’ we tend to forget about all those who don’t.
If HTML and ARIA don’t allow it, it’s probably a bad idea

Article posted 25th October 2021 in Accessibility, Design and HTML

I like to use invalid HTML and ARIA as a design constraint; a line I can’t step across. Sounds obvious, but in practice it’s not always that simple!
Links, missing href attributes, and over-engineered code

Article posted 30th September 2021 in Accessibility, Development and HTML

Links without an href attribute are ignored by browsers; making them ‘behave’ using JavaScript, CSS, and other HTML attributes is not a solution.
Website version 6

Article posted 6th July 2021 in Accessibility, Design and Development

The last major version of this website was a complete behind-the-scenes rebuild. This version, on the other hand, is almost entirely visual.
Using the Increased Contrast Mode CSS media query

Article posted 21st June 2021 in Accessibility, CSS, Design and Development

Satisfying the enhanced contrast AAA WCAG rule can be limiting; luckily prefers-contrast: more allows us more freedom with our default themes.
Fixing Safari’s HTML-only Dark Mode bug

Article posted 3rd June 2021 in Accessibility, CSS and HTML

A bug with link text colours in Safari’s HTML-only Dark Mode theme means we need a bit of extra code. Here’s how to patch things until it’s fixed.
HTML-only Dark Mode

Article posted 2nd June 2021 in Accessibility, CSS and HTML

When our CSS contains Dark Mode rules and the file fails to load, we’re left with plain old HTML. Luckily we can request Dark Mode in our markup!
Accessible responsive tables

Article posted 28th May 2021 in Accessibility, CSS, Development and HTML

Tables can be tricky to make work responsively; they can also be tricky to make accessible. Here’s a step by step guide to making your tables both!
Be careful with strikethrough

Article posted 20th April 2021 in Accessibility, Development and HTML

Struck-through text isn’t read by screen readers. This is true of all text-level semantics, but it’s worth drawing attention to strikethough.
Bold and italics aren’t read by screen readers

Article posted 2nd April 2021 in Accessibility

Emphasis and other text-level semantics are normally ignored by screen readers, so it you’re relying on them for meaning you could be in trouble.
Sentence case versus title case

Article posted 31st March 2021 in Accessibility and Design

I’m a fan of good typography, and something I come across a fair bit is whether sentence case or title case is better for headings.
Why I stopped using ASCII art

Article posted 10th March 2021 in Accessibility

I love those old-school ASCII art characters, but I’ve stopped using them as they’re not accessible.
When and how to use the section element

Article posted 11th February 2021 in Accessibility and HTML

So what on earth is a <section> element actually for? The answer isn’t as obvious as you might have hoped, but it’s definitely straightforward.
Scrollbar marker colours on macOS

Article posted 25th January 2021 in Accessibility and CSS

The other day, I realised the scroll markers were invisible on my website in Light Mode. The fix was pretty easy once I knew what was going on.
Using VoiceOver’s rotor on macOS

Article posted 21st January 2021 in Accessibility and Apple

If you’re new to VoiceOver, once you’ve got the hang of the basics, the next thing to learn is the ‘rotor’; a supercharged navigation tool.
Getting started with VoiceOver on macOS

Article posted 20th January 2021 in Accessibility and Apple

Understanding how screen readers work is important for anyone who works on digital products. Here’s how to get started with VoiceOver on macOS.
Accessible animated GIFs are pointless

Article posted 8th January 2021 in Accessibility

Animated GIFs are everywhere, but are they accessible to everyone? I’m afraid to say, they’re not, and we probably shouldn’t be using them.
An unexpected accessibility benefit of video calls

Article posted 30th December 2020 in Accessibility

COVID-19 changed the way we work. Now that we all work from home, remote team members report feeling more included, and I’ve noticed another benefit.
Voice Control for macOS commands cheatsheet

Article posted 29th December 2020 in Accessibility and Apple

I have a list of all the commands for Voice Control for macOS, and it comes in handy pretty much every time I do any speech recognition testing.
Progressively enhanced animated content

Article posted 2nd December 2020 in Accessibility and Development

Respecting your users’ preferences with prefers-reduced-motion is great, but what about users with older operating systems and browsers?
Form styling limitations are an accessibility issue

Article posted 27th November 2020 in Accessibility, CSS and Development

A summary of the things missing in CSS got me thinking about how lack of some form styling may have seriously damaged accessibility on the web.
Accessibility issues when removing list markers

Article posted 12th October 2020 in Accessibility, CSS and Development

If we remove the list markers from an ordered or unordered list, we’re likely to run into some issues with VoiceOver.
How to use the keyboard to navigate on Safari

Article posted 6th October 2020 in Accessibility

A great way to start accessibility testing is to navigate with the keyboard. Safari is limited by default, so here’s how get it working properly.
Using the keyboard to navigate on macOS

Article posted 5th October 2020 in Accessibility

I’ve just set up a new Mac, and keyboard navigation is pretty limited by default. Here’s how to make it much more useful.
Why you should (almost) always underline your links

Article posted 3rd September 2020 in Accessibility and Design

A link should look like the text around it, but with a couple of differences: maybe a bit of colour and (almost) always an underline.
WebKit has fixed the implicit role on footers

Article posted 24th August 2020 in Accessibility and Development

Last year, I wrote about implicit ARIA roles; an issue I encountered was that VoiceOver didn’t give an implicit role to footers. Well, it’s fixed!
iOS 14’s Back Tap; a better way to access Control Centre

Article posted 21st August 2020 in Accessibility and Apple

My most anticipated iOS 14 feature wasn’t mentioned at WWDC 2020, but will sort my biggest issue with iPhones X and above: Control Centre access.
Using address in HTML won’t be problematic for much longer

Article posted 22nd July 2020 in Accessibility, Development and HTML

There’s a bug in Safari that adds an implicit role to <address> which causes problems for screen readers. The good news is, a fix is very close!
When design breaks semantics

Article posted 25th June 2020 in Accessibility, Design and Development

Semantic HTML is great. But sometimes following the rules is tricky. Grab a cuppa and let me tell you a story about links that look like buttons.
Using the HTML document outline

Article posted 3rd April 2020 in Accessibility, Design and Development

What is a document outline? Sounds complicated, but it’s really not – it’s just headings! Find out more about them and why they’re a good idea.
Why is accessibility so often seen as a low priority?

Article posted 20th February 2020 in Accessibility

A couple of recent CSS-Tricks articles got me thinking about how website owners prioritise their legal (and moral!) obligations to their users.
If it’s not progressively enhanced, it’s not accessible

Article posted 6th November 2019 in Accessibility

In his latest article, Adam Silver summarises the many ways JavaScript can fail, which, to me, is an accessibility issue.
Colour contrast on tempertemper.net

Article posted 14th October 2019 in Accessibility, Brand and Design

Colour contrast on my site now meets WCAG AAA, in light or dark mode. There have been compromises but, if it’s more useable, I’m happy to make them.
Years in, the accessibility learning curve continues

Article posted 5th September 2019 in Accessibility and Development

I’ve cared about accessibility for as long as I’ve been working in the web and, even after all these years, I still enjoy learning new things.
What’s emphasis and what’s not

Article posted 24th June 2019 in Accessibility and Development

Semantic HTML is hard. We stopped using  and  elements in favour of  and , but are  and  still useful?
Implicit ARIA landmark roles

Article posted 14th June 2019 in Accessibility and Development

ARIA landmarks give a screen reader user an easy way to orient themselves on a web page. Implicit roles are also great. Except when they’re not.
Reducing motion

Article posted 30th May 2019 in Accessibility, Design and Development

Accessibility is important, so I’ve taken steps to minimise animation on my site, and even removed it completely for those who ‘prefer reduce motion’.
Design and build for the worst case scenario

Resource posted 29th June 2015 in Accessibility, Performance and Search

Performance matters. If your website loads slowly it could be costing you business, so make sure it works for even the slowest of internet connections
Mobile friendly markers

Resource posted 6th April 2015 in Accessibility and Search

You might have noticed that if you search for something on Google on your phone there’s a new ‘Mobile friendly’ label.
Why I changed my baseline

Resource posted 6th March 2014 in Accessibility and Content

Every site I build is now mobile friendly and allows the editing of all content by default. This is for a few very good reasons.
Should you go responsive?

Resource posted 19th November 2012 in Accessibility

Responsive web design is when the content of your website is laid out differently, depending on the size of the screen your visitor is using. Catering
Disability on the web

Resource posted 3rd November 2012 in Accessibility

Just like in ‘real’ life, your visitors come in all shapes and sizes. Inclusivity is—rightly—front and centre for businesses these days.
Image alt text

Resource posted 28th August 2012 in Accessibility and Content

Useful ‘alt’ text on images will not only keep your visitors happy but has happy knock-on effect on your search engine ranking.
Older browsers

Resource posted 26th August 2011 in Accessibility

Some visitors to your site will use out of date browsers. Is it worth catering for these visitors? Here’s how to make an informed decision.
Do I need a mobile website?

Resource posted 28th July 2011 in Accessibility

One of the biggest changes in recent years has been the use of smartphones. How should your website cater for these devices?
What’s in a browser?

Resource posted 27th July 2011 in Accessibility

So what’s all this fuss about Internet Browsers? Maybe you, like a lot of people, you didn’t realise there was a choice…