Blog archive

While making an update to a course chapter that includes the use of CSS-generated content in the accessible name computation of an element, I noticed that browser support for providing alt text in CSS using the slash syntax has improved since I gave a talk about CSS and accessibility at CSS Day last year. So I thought it's time to do a proper (long overdue) writeup. This is a 101 post on when and how to use the slash content property syntax in CSS to provide alt text for CSS-generated content, and why it is important.

I finally sat down with Kevin Powell for a long-overdue, in-depth conversation about web accessibility, and we had a blast!

The CSS Overflow Module Level 5 introduced a new CSS property which enriches HTML anchor elements with the capabilities of CSS scroll markers, allowing you to recreate the Bootstrap Scrollspy effect using a couple of lines of CSS only. In this post, we're going to look into how to use this property, as well as discuss accessibility expectations to ensure the feature is accessible and inclusive.

In this post I want to examine the newly announced “CSS Carousels” through the lens of usability and accessibility. I’ll start with a spoiler: CSS Carousels are highly experimental and they are not yet ready for production; not only because of the current lack of browser adoption for the new CSS features they use, but also because they have some major accessibility issues.

Hidde tagged me into this chain of blog posts about blogging. I've really been enjoying reading these posts by other people. So I was happy to be tagged. The idea is that you answer the same series of questions about your blog. So, here we go.

This post is a text-only excerpt from my Practical Accessibility video course. I'm making this chapter (out of 40 total) publicly available simply because I want an extensive guide to ARIA live regions to be publicly available to everyone in the community. This chapter is also one of the longest chapters in the course, and so I think it is a great preview into the level of depth that each topic is covered in the course. You can enroll in the course or learn more about it on the course website.

This post is a text-only excerpt from my Practical Accessibility video course. I'm making this chapter (out of 40 total) publicly available simply because I want an extensive guide to ARIA live regions to be publicly available to everyone in the community. This chapter is also one of the longest chapters in the course, and so I think it is a great preview into the level of depth that each topic is covered in the course. You can enroll in the course or learn more about it on the course website.

When you're designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility issues that cannot be caught by automated accessibility testing tools. In this article, which is a modified, text-only excerpt from the Practical Accessibility course, we're going to walk through the process of setting up your screen reader testing environment, from downloading virtualization software if you need it, to installing screen readers, and setting up keyboard configuration. We’ll also learn what screen reader and browser combinations are most relevant for your testing work.

This post is a modified, text-only excerpt from my Practical Accessibility video course. I wanted to share this guide to designing accessible focus indicators because focus styles are a recurring discussion I have with designers I work with on most projects, so I thought it would be useful to provide this guide as a helpful reference. This guide is aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them.

Our content will not always look the way we expect it or want it to. Many apps, tools, and environments that people use to browse the Web strip our content of our CSS and apply their own styles to it. And unless we always keep that in mind, we risk creating incomplete or even broken experiences for users of those technologies or tools.

A lot about a design pattern could change based on how much space it’s got. So Container Queries can be used to do more than just shift elements around in a layout. (Have you seen Jhey’s demo yet?!) But we can only take full advantage of the potential Container Queries offer us if we can use them everywhere a typical viewport media query can be used.

The HTML <hr> element adds a horizontal rule (or line) wherever you place it. A horizontal rule is used to provide a visual break and divide content. Like other HTML elements, horizontal rules can be styled using CSS (and SVG). This means that they don’t have to look like boring, plain horizontal lines. You can get a little creative with them, adding a nice little personal touch to your content and designs.

In this article, I will cover the different techniques for hiding elements, how each of them affects the accessibility of the content, and how to properly hide checkboxes and radio buttons taking their own accessibility and usability considerations into account to make sure we aren’t leaving any users out.

A few years ago I didn't know what the term "accessibility" meant. I built Web sites that were partially inaccessible because I didn't know better. Fast forward to today, I know enough to be able to write, speak and run workshops on accessibility, helping others build more a accessible and inclusive Web. Much like everyone else in our field, I am still learning. But since I started, I learned a lot of valuable lessons and core values that drive my work today. Here are a few of them.

A few months ago I teamed up with SuperFriendly to create an accessible micro-site for the Khan Academy 2018 Annual Report. The site is a very beautiful visual representation of Khan’s real-life impact on world education, their end-of-year financial reports, and more. By nature, the annual report contains a lot of data and visualizations and charts to represent it. My mission was to make sure that the way this data is presented and implemented is as accessible to site’s visitors as possible, regardless of how they explore the site.

There is a handful of ways that an icon button can be implemented accessibly. This article is an overview of them all.