Unusual colour combinations that are also accessible—keep smashing that “New colors” button.
Saturday, September 30th, 2023
Tuesday, September 26th, 2023
Bruce raises an interesting question with media playing in popovers—shouldn’t the media pause when the popover is closed? I agree with Bruce that this is a common use case that should be covered declaratively.
All accessibility overlays are bad. Except the ones by overlay vendors planning to sue me. Those ones are good and I highly recommend them, despite what I may say during the video. If someone is asking for an accessibility overlay, either send them here or to overlayfactsheet.com.
Monday, September 25th, 2023
Thursday, September 21st, 2023
This free day-long online event all about accessibility and inclusive design is happening right now. You can join live, or catch up on the talks that have already happened, like the excellent talks from Russ Weakly and Manuel Matuzović.
Monday, September 18th, 2023
Vitaly provides some sensible rebuttals.
Friday, September 15th, 2023
It looks like it will be a great tool for prototyping. A tool to help developers that don’t have experience with CSS and layout to have a starting point. As someone who spent some time building smoke and mirrors prototypes for UX research, I welcome tools like this.
What concerns me is the assertion that this is production-grade code when it simply is not.
Monday, September 11th, 2023
Web Summer Camp in Croatia finished with an interesting discussion. It was labelled a town-hall meeting, but it was more like an Oxford debating club.
Two speakers had two minutes each to speak for or against a particular statement. Their stances were assigned to them so they didn’t necessarily believe what they said.
One of the propositions was something like:
In the future, sustainable design will be as important as UX or performance.
That’s a tough one to argue against! But that’s what Sophia had to do.
She actually made a fairly compelling argument. She said that real impact isn’t going to come from individual websites changing their colour schemes. Real impact is going to come from making server farms run on renewable energy. She advocated for political action to change the system rather than having the responsibility heaped on the shoulders of the individuals making websites.
It’s a fair point. Much like the concept of a personal carbon footprint started life at BP to distract from corporate responsibility, perhaps we’re going to end up navel-gazing into our individual websites when we should be collectively lobbying for real change.
It’s akin to clicktivism—thinking you’re taking action by sharing something on social media, when real action requires hassling your political representative.
I’ve definitely seen some examples of performative sustainability on websites.
For example, at the start of this particular debate at Web Summer Camp we were shown a screenshot of a municipal website that has a toggle. The toggle supposedly enables a low-carbon mode. High resolution images are removed and for some reason the colour scheme goes grayscale. But even if those measures genuinely reduced energy consumption, it’s a bit late to enact them only after the toggle has been activated. Those hi-res images have already been downloaded by then.
Defaults matter. To be truly effective, the toggle needs to work the other way. Start in low-carbon mode, and only download the hi-res images when someone specifically requests them. (Hopefully browsers will implement
prefers-reduced-data soon so that we can have our sustainable cake and eat it.)
Likewise I’ve seen statistics bandied about around the energy-savings that could be made if we used dark colour schemes. I’m sure the statistics are correct, but I’d like to see them presented side-by-side with, say, the energy impact of Google Tag Manager or React or any other wasteful dependencies that impact performance invisibly.
And it’s not just performance. I feel like the more important the work, the more likely it is to be invisible: privacy, security, accessibility …those matter enormously but you can’t see when a website is secure, or accessible, or not tracking you.
I suspect this is why those areas are all frustratingly under-resourced. Why pour time and effort into something you can’t point at?
Now that I think about it, this could explain the rise of web accessibility overlays. If you do the real work of actually making a website accessible, your work will be invisible. But if you slap an overlay on your website, it looks like you’re making a statement about how much you care about accessibility (even though the overlay is total shit and does more harm than good).
I suspect there might be a similar mindset at work when it comes to interface toggles for low-carbon mode. It might make you feel good. It might make you look good. But it’s a poor substitute for making your website carbon-neutral by default.
Wednesday, August 9th, 2023
Mayerle’s Lithographed International Test Chart, 1907 – Circulating Now from the NLM Historical Collections
An impressive piece of internationlisation and inclusive design.
Saturday, August 5th, 2023
Honestly, this isn’t wishlist isn’t asking for much, and it’s a damning indictment of “modern” frontend development that we’ve come to this:
- Let me copy text so I can paste it.
- If something navigates like a link, let me do link things.
Thursday, August 3rd, 2023
Wednesday, July 26th, 2023
Wednesday, July 12th, 2023
New Low in the Accessibility “Industry:” Overlay Company Sues Globally-Recognized Accessibility Expert
Lainey Feingold on the ongoing court proceedings against Adrian Roselli:
This lawsuit against Adrian Roselli impacts every person who cares about including disabled people in the digital world. It impacts all of us who speak, write, and advocate for digital accessibility that is fair, equitable, and ethical.
Saturday, July 8th, 2023
- Be skeptical of PR hype
- Question the training data
- Evaluate the model
- Consider downstream harms
Friday, July 7th, 2023
4 design principles I use every day to avoid bad UX and create products that work for everyone – Adam Silver – designer, London, UK
- Good design works for everyone
- Good design makes things obvious
- Good design puts users in control
- Good design is lightweight
Tuesday, June 13th, 2023
Progressive enhancement begins with constructing a robust and universally accessible foundation, designed to cater to all users, regardless of individual or technological circumstances. From here, advanced features can be strategically layered to enhance the user experience wherever feasible. Even as these enhancements roll out, guided by the capacities of different devices, the quality of network connections, or the availability of specific APIs, the core functionalities should remain steadfast and accessible to all.
Monday, June 5th, 2023
Personas are often toothless, but these accessibility personas from gov.uk are more practical and useful than most:
Each profile has a different simulation of their persona’s condition and runs the assistive technology they use to help them.
You can use these profiles to experience the web from the perspective of the personas and gain more understanding of accessibility issues.
Wednesday, May 31st, 2023
Accessibility audits for all
It’s often said that it’s easier to make a fast website than it is to keep a website fast. Things slip through. If you’re not vigilant, performance can erode without you noticing.
It’s a similar story for other invisible but important facets of your website: privacy, security, accessibility. Because they’re hidden from view, you won’t be able to see if there’s a regression.
That’s why it’s a good idea to have regular audits for performance, privacy, security, and accessibility.
I wrote about accessibility testing a while back, and how there’s quite a bit that you can do for yourself before calling in an expert to look at the really gnarly stuff:
When you commission an accessibility audit, you want to make sure you’re getting the most out of it. Don’t squander it on issues that you can catch and fix yourself. Make sure that the bulk of the audit is being spent on the specific issues that are unique to your site.
I recently did an internal audit of the Clearleft website. After writing up the report, I also did a lunch’n’learn to share my methodology. I wanted to show that there’s some low-hanging fruit that pretty much anyone can catch.
To start with, there’s keyboard navigation. Put your mouse and trackpad to one side and use the
tab key to navigate around.
Caveat: depending on what browser you’re using, you might need to update some preferences for keyboard navigation to work on links. If you’re using Safari, go to “Preferences”, then “Advanced”, and tick “Press Tab to highlight each item on a web page.”
Tab around and find out. You should see some nice chunky
:focus-visible styles on links and form fields.
Here’s something else that anyone can do: zoom in. Increase the magnification to 200%. Everything should scale proportionally. How about 500%? You’ll probably see a mobile-friendly layout. That’s fine. As long as nothing is broken or overlapping, you’re good.
At this point, I reach for some tools. I’ve got some bookmarklets that do similar things: tota11y and ANDI. They both examine the source HTML and CSS to generate reports on structure, headings, images, forms, and so on.
These tools are really useful, but you need to be able to interpret the results. For example, a tool can tell you if an image has no
alt text. But it can’t tell you if an image has good or bad
Likewise, these tools are great for catching colour-contrast issues. But there’s a big difference between a colour-contrast issue on the body copy compared to a colour-contrast issue on one unimportant page element.
I think that demonstrates the most important aspect of any audit: prioritisation.
Finding out that you have accessibility issues isn’t that useful if they’re all presented as an undifferentiated list. What you really need to know are which issues are the most important to fix.
By the way, I really like the way that the Gov.uk team prioritises accessibility concerns:
The team puts accessibility concerns in 2 categories:
- Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact.
- Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.
The team will usually prioritise evidenced issues and queries over theoretical ones.
When I wrote up my audit for the Clearleft website, I structured it in order of priority. The most important things to fix are at the start of the audit. I also used a simple scale for classifying the severity of issues: low, medium, and high priority.
Thankfully there were no high-priority issues. There were a couple of medium-priority issues. There were plenty of low-priority issues. That’s okay. That’s a pretty good distribution.
If you’re interested, here’s the report I delivered…
Accessibility audit on clearleft.com
There are a few issues with the pink colour. When it’s used on a grey background, or when it’s used as a background colour for white text, the colour contrast isn’t high enough.
The SVG arrow icon could be improved too.
- Change the pink colour universally to be darker. The custom property
rgb(234, 33, 90). Change it to
rgb(210, 20, 73)(thanks, James!)
- The SVG arrow icon currently uses
currentColor. Consider hardcoding solid black (or a very, very dark grey) instead.
Alt text is improving on the site. There’s reasonable alt text at the top level pages and the first screen’s worth of case studies and blog posts. I made a sweep through these pages a while back to improve the alt text but I haven’t done older blog posts and case studies.
- Make a sweep of older blog posts and case studies and fix alt text.
- Images on the contact page have alt text that starts with “A photo of…” — this is redundant and can be removed.
The site is using headings sensibly. Sometimes the nesting of headings isn’t perfect, but this is a low priority issue. For example, on the contact page there’s an
h1 followed by two
h3s. In theory this isn’t correct. In practice (for screen reader users) it’s not an issue.
- On the home page, “UX London 2023” should probably be
- On the case studies index page we’re currently using
h3headings for the industry sector (“Charities”, “Education” etc.) but these should probably not be headings at all. On the blog index page we use a class “Tags” for a similar purpose. Consider reusing that pattern on the case studies index page.
- On the about index page, “We’re driven to be” is an
h3and the subsequent three headings are
h2s. Ideally this would be reversed: a single
h2followed by three
Sometimes the same text is used for different links.
- On the home page the text “Read the case study” is re-used for multiple links. It would be better if each link were different e.g. “Read about The Natural History Museum.”
The only form on the site is the newsletter sign-up form. It’s marked up pretty well: the
input has an associated
label, although a visible (clickable)
label would be better.
The focus styles are nice and clear too!
The site is using HTML landmark elements sensibly (
Monday, May 22nd, 2023
Tuesday, May 16th, 2023
This is the kind of press release I like.