Accessibility

In the four years since [Darl Koopersmith and Wilson Miner's Designing accessible color systems post], Stripe has stretched those colors to the limit. The design system’s resilience through massive growth is a testament to the team’s original approach, but last year we started to see the need for a more flexible, scalable, and inclusive color system. This meant both an expansion of our color palette and a rethinking of how we generate and apply these colors to accommodate our still-growing products.

This essay will take you through my attempts to solve these problems. Through this process, I’ve created a tool for generating expressive, functional, and accessible color systems for any design system. I’ll share the full code of my solution at the end of the essay; it represents not just a technical solution but a philosophical shift in how we think about color in design systems, emphasizing the balance between creativity and inclusivity.

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

A Global Design System would centralize common UI components, reduce so much of this unnecessary duplication, integrate with any web-based tech stack, and create a connected vehicle for delivering front-end best practices to the world’s web experiences.

...Thanks to the tireless work of browser folks and standards bodies, I think that by and large we have most HTML elements and primitives in place to make most common web user interfaces. What we need now are more prefabricated UI components that abstract away much of the close-to-the-metal HTML and give developers composed, ready-to-use modules to drop into their projects.

Generally speaking (and ignoring questions of styling, API availability, etc.), an ideal Web annotation pattern follows these principles:

1. Annotations appear in close visual proximity to the primary content.
2. Their design neither distracts from nor hides the primary content.
3. The preceding principles are followed regardless of screen width.

The only pattern I’ve found that meets these criteria is FiveThirtyEight’s.

...As it turns out, FiveThirtyEight didn't invent this pattern. It likely originated in medieval illuminated manuscripts which contain “interleave notes” — comments written literally between the lines.

The correct way to define base font-size:

:root {
  font-size: 100%; /* change to your desired percent */
}

Follow two simple rules:

1. Use % unit.
2. Define it on the root level.

I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. And it’s bad UX because it prevents simple user tasks, like selecting text.

But maybe there’s something else at play. Maybe it’s less an issue with the pattern than the implementation of it. That led me to believe that this is the time to write follow-up article to see if we can address some of the problems Chris pointed out.

Typography that responds to viewport width (‘fluid’ or ‘responsive’ typography) can be useful when you want to ensure text does not get clipped or spill out of some design elements. Carousels, widget controls, or my Venn diagram are some examples.

I say viewport width because I rarely see responsive type consider the viewport height or the printed page. Not considering height can bw problematic for users holding their phone in landscape mode while trying to navigate pages with cookie consents and email form sign-ups. Not considering print can make for reams of wasted paper.

You’ve all seen them, tiny switches that let you toggle a setting. And maybe, just like me, you sometimes pause, thinking “…Is it on or off?” That’s because toggles suck!

...Just use a checkbox or radio group! It’s quick to implement, accessible from the start, and doesn’t make the user think.

Calling these links “layered links” is a lot more appropriate and descriptive than “nested links”, given how they are implemented/styled.

I would consider this technique “hacky” for sure, but if it works, and as long as it does not compromise the overall accessibility of the design, then I see no reason not to use it.

The most important takeaway from this is to remember to always test the usability and accessibility of your design, especially if you use unconventional CSS tricks to create it.

But there is another problem that hurts both of these solutions, and it’s text selection. You can’t just put your cursor somewhere in the card and select text normally. The click activates the link, waiting for you to mouseup while still on the link to trigger it. You don’t get the ability to select inner parts of the text as you would probably expect. It doesn’t prevent the ability to select the text at all, but it makes it awkward and annoying.

I’m not sure that is easily solveable. Perhaps there is some exotic JavaScript solution that can detect if you’ve started to select text and then not trigger a click, but if you click without dragging then it does go to the link. Something about that is a bit red-flaggy to me though.

All in all, I’d say block links are just a bad idea. But I’d love to be proven wrong and see a really good implementation that solves all these issues.

Just another usability and accessibility pro telling authors not to do the thing they continue to do.

Okay so, I’m a front-of-the-front-end developer...
While those words do accurately describe what I do, it’s way too long. No-one is actually going to use that as their title. So we need something shorter that still conveys the same meaning. People have come up with new titles like:

• UX engineer
• Design engineer
• Front-end designer
• Etc.

...But, there’s a better option that’s been around since before even front-end was being used. We had the right title in front of us all along, web designer!

I’m a web designer

Why do I think that this is the best title? Here’s why.
I’m designing for the web. The infinitely flexible web. The web that doesn’t have one screen size, one browser, one operating system, or one device. The web that can be used by anyone, anywhere, on any internet connection, on any device, on any operating system, on any browser, with any screen size. I’m designing with the web. Using the web platform (HTML, CSS, JS, ARIA, etc.), not a bloated harmful abstraction. I have a deep understanding of HTML and its semantics. I love CSS, I know how and when to utilise its many features, and I keep up-to-date as more are added. I have a strong understanding of modern JavaScript and most importantly I know when not to use it.

• leonardocolor.io allows to define color palettes and indicates WCAG contrast.
• hihayk.github.io/scale/ allows to take a hex color and create lighter and darker colors with a beautiful and focused user interface. It does not indicate WCAG contrast. The tool is part of hayk.design.
• github.com/primer/prism/ is an experimental GitHub tool for defining accessible color palettes to be used for light mode and dark mode.

A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.

Whatever the reason may be, there is no good reason to block paste in textboxes in 2023. It’s time to put this anti-pattern behind us for good.

What I sense is a real tension between the web as we know it, and the web as it would be. It’s the tension between an existing medium, the printed page, and its child, the web. And it’s time to really understand the relationship between the parent and the child, and to let the child go its own way in the world.

It’s none.

body {
  font-size: 100%;
}

...All other font sizes (headings, navigation, footer, etc.) should then use relative units. Ideally without being smaller than the default size (with very specific exceptions).

Websites are natively fast. And at the heart of every website is pure, unassuming, unadulterated HTML. At the dawn of Web 1.0, there was only HTML. The first website ever is still online, and yes — it's just HTML. It's fast and it just works™.

The experience we have using the web deserves our attention; when the web loses, we lose too.

The front web is systematically undermined, and the main targets are precisely the aspects that make the web a powerful medium.

While these attacks are systematic, I'm not sure how conscious and intentional they are: are we never satisfied with what we have and we keep trying to improve it, or are we just “breaking things”?

Whether we are breaking things around or trying to improve the front web, what is clear to me is that instead of getting the most of it, we just keep making it heavy, inaccessible, unmanageable, and offering a very bad UX. It is hard to say who is benefiting from these attempts.

I've had clients ask "What do I buy to make this accessible?" or "What can I buy to improve usability?"

In all these cases there are unscrupulous people who will sell you a magic cure-all - but the real answer is that these things are a process; not a product.

Yes, you can buy tools which will help improve your security / accessibility / usability etc. But unless you put processes in place to get people to use them effectively, the tools are useless.

Security is a verb - it is a doing word.
Accessibility is a verb - it is a doing word.
Usability is a verb - it is a doing word.

Buy nouns which support your verbs.

The idea here is that you’d apply contrast-color() in scenarios where someone has requested a higher contrast experience, with the understanding that it’d help to ensure that experience delivers on its promise.

Unfortunately, this thinking also sets up an ugly, “us versus them” mentality. It also presupposes that people:

• Are aware there is text content they cannot perceive,
• Are aware of having a low vision condition,
• Accept having a low vision condition, and
• Are aware of, and use the preference to do something about this.

It also assumes that the operating system has the preference toggle to enable in the first place, which isn’t always a given.

If you go down this rabbit hole—and I hope you don’t—far better to flip your thinking and start with an accessible default, and then make the alternate experiences non-compliant.

...Speaking of layers, I now pose the question: Why does all this have to be the website or webapp author’s responsibility? ...I would love to see this sort of feature implemented on the browser level.

<a href=“LINK_URL” target=“_blank”>
    LINK_TEXT
    <img aria-hidden=“true” src=“ICON_URL”/>
    <span class="visually-hidden”>Opens in new tab</span>
</a>

Constraints have been shown to generally improve innovation. Giving targets and parameters helps ensure a team is working in unison. Identifying what is out of bounds can further focus that team.

Key Event Viewer: View KeyboardEvents on a <input type="text"> element.

Mouse Event Viewer: View MouseEvents on a set of overlapping <div>s.

Focus Event Viewer: View FocusEvents between two <input> fields enclosed in a <div>.

.button,
::file-selector-button {
  inline-size: fit-content;
  touch-action: manipulation;
  user-select: none;
}
* {
  &:focus-visible {
    outline: 2px solid magenta;
    outline-offset: 2px;
  }
}

I was talking with someone not too long ago and they described how they had sent something of mine to a friend who immediately brushed it off because it wasn’t in accordance with usability standards (too colorful and weird). This got me thinking about that topic again…

It happens a lot with my work, and I think it captures a really interesting dynamic when we talk about how usability has become a moral high ground issue.

I often get told that I’m ableist because my work is too colorful, with too much animation, too much happening… and it’s not “toned down” to be usable for the widest range of people.

It’s usually arguments about disability from people who are not disabled themselves. This I think is interesting because I create out of my own perspectives often informed by my own disabilities, my own life experiences, and the things important to me… all the things that make me who I am.

Imagine you have a scrollable area that displays chronological content like a feed (but not like LinkedIn, Facebook or Twitter which are reverse-chronological), similar to a chat window. You want the region to be scrolled to the bottom to begin with, which is where the relevant content is.

You could do it with JavaScript, like this...But you know, using JavaScript means it can fail, or can take a while to happen, potentially at a point where the user has begun scrolling in that region. Not perfect.

Another approach is to do it with CSS. The idea is to use a reverse-column flex layout so the scroll begins bottom-anchored. Of course, this reverses the order of elements, so they need to be also reversed in the DOM so they are displayed in the right order (elements near the bottom need to appear first in the DOM order).

MIT researchers conducted a study with blind and sighted readers to determine the most useful descriptive alternative text to include with a chart. They developed a four-level framework that can be used to evaluate the effectiveness of a chart caption, whether it is generated by a human author or a machine learning algorithm.