Inclusively Hidden

A fairly opinionated CSS starter by Chris, following a set of personal principals to guide what is in there and what isn't.

An experiment that proves that automatic accessibility testing is only a first step and that manual testing is vital.

Review the audio element and overview some of what's possible with the audio API by building a custom audio player.

Most carousels come along with usability and accessibility issues. To avoid these issues, this article addresses step-by-step design considerations as well as semantic requirements for carousels to be accessible. It is intended to create an in-depth understanding of the implementation and its impact on users.

My personal website and blog around frontend topics.

Two cents on the topic of native visually hidden elements for the web. You didn’t ask for it, but I delivered anyway.

You've probably used visually-hidden content before. But how does the CSS actually work, and why do we use those particular properties?

Heads-up! Scott's "Inclusively Hidden" article received an update in 2023. The details and examples in this post have been updated accordingly, but you will

An exploration into how to make inputs more accessible.

I restarted to build my website with Eleventy. Here’s why.

Introduces Web Accessibility, how it can be measured, the importance of semantic HTML and practical suggestions to make your websites more accessible.

I constantly find myself copying and pasting this snippet into projects

Helsinki recently launched the City as a Service campaign. This post explores how to make it more accessible.

I did some research on last year’s debate whether we need it.

How CSS bleeds into content and influences screenreader announcements.

Add a link to the beginning of your page to help keyboard navigators skip over repeated links.

A explanation of the primary threat to accessibility on the web, and a call to action for the web standards community

How-to hide content but still make it accessible to screen readers.

Let's talk about state. Communicating state to the user that is, not application stores state in JavaScript objects, or localStorage. We're going to be

— The personal website of Sara Soueidan, inclusive Web UI engineer

How-to hide content but still make it accessible to screen readers.

You've probably used visually-hidden content before. But how does the CSS actually work, and why do we use those particular properties?

Here is the priority I follow when assigning an accessible name to a control: Native HTML techniques, aria-labelledby pointing at existing visible text, Visibly-hidden content that is still in the page, aria-label. Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may…

The other day I was skimming Webkit’s Safari Technology Preview 153 release notes and noticed that they had added support for aria-description. I always found…

For years, developers have passed around a set of styles like a magic incantation. It’s time we made it a web standard.

In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. We sincerely hope that these tools and techniques will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks.

I just gave a talk at this year’s New Adventures conference. Here are some books, resources, and videos I cited in it.

Buttons trigger an action such as submitting a form or showing/hiding an interface component.

Possibly the best way to hide content accessibly. The CSS is easy to write and understand!

A talk on automation, power, justice, and labor in the tech industry.

A deep dive into the accessibility of the Shopify theme landscape.

— The personal website of Sara Soueidan, inclusive Web UI engineer

Menus, trees, and grids, oh my! Debugging composite widget semantics with browser devtools.

An experiment that proves that automatic accessibility testing is only a first step and that manual testing is vital.

This is an unplanned part two for Barriers from Links with ARIA. The title reflects my exasperation because this isn’t new, I’ve simply failed to be explicit about it over the last decade or so. In 2012 I vented about TypeButter using <kern style=”letter-spacing: -0.01em;”> for each letter. In 2020…

Is this the exception to component-driven development?

Everyone does it, and we often do it poorly.

The anchor link is one of the most elemental of HTML-elements. The idea of linking things is kind of the core idea of HyperText (the HT in both HTML and HTTP). And oh my, do we love to (ab)use links on the web! But what should be inside a link?