The Blog

• CSS to speech: alternative text for CSS-generated content

  Published on 17 Sep, 2025

  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.

  Read the article →
• 🎥 New (Video) Podcast: "Navigating the World of Web Accessibility with Sara Soueidan", with Kevin Powell

  Published on 11 Sep, 2025

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

  Read the article →
• CSS-only scrollspy effect using scroll-marker-group and :target-current

  Published on 18 Aug, 2025

  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.

  Read the article →
• Are 'CSS Carousels' accessible?

  Published on 06 May, 2025

  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.

  Read the article →
• Tag, You're It

  Published on 29 Apr, 2025

  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.

  Read the article →
• Accessible notifications with ARIA Live Regions (Part 2)

  Published on 15 Jan, 2024

  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.

  Read the article →
• Accessible notifications with ARIA Live Regions (Part 1)

  Published on 15 Jan, 2024

  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.

  Read the article →
• Setting up a screen reader testing environment on your computer

  Published on 24 Nov, 2022

  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.

  Read the article →
• The CSS prefers-color-scheme user query and order of preference

  Published on 03 Oct, 2021

  Read the article →
• In Quest of Search

  Published on 15 Sep, 2021

  On why I think adding a new HTML sectioning element for search is a good idea.

  Read the article →
• A guide to designing accessible, WCAG-conformant focus indicators

  Published on 13 Aug, 2021

  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.

  Read the article →
• A couple of ways to highlight code syntax in Apple Keynote slides

  Published on 23 May, 2021

  Read the article →
• Design for reading: tips for optimizing content for Reader modes and reading apps

  Published on 10 May, 2021

  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.

  Read the article →
• Component-level art direction with CSS Container Queries

  Published on 09 May, 2021

  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.

  Read the article →
• Not Your Typical Horizontal Rules

  Published on 25 Mar, 2021

  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.

  Read the article →
• Accessible Text Labels For All

  Published on 17 Mar, 2021

  On improving eCommerce experiences for screen reader users without breaking them for speech-input users

  Read the article →
• How I set up Glyphhanger on macOS for optimizing and converting font files for the Web

  Published on 02 Mar, 2021

  Read the article →
• Inclusively Hiding & Styling Checkboxes and Radio Buttons

  Published on 16 Jun, 2020

  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.

  Read the article →
• Optimizing keyboard navigation using tabindex and ARIA

  Published on 09 Jun, 2020

  A micro-case study on implementing keyboard-friendlier article listings for an online publication

  Read the article →
• Global and Component Style Settings with CSS Variables

  Published on 01 Jun, 2020

  Or how I use CSS variables to create more manageable project styles and more portable patterns

  Read the article →
• What a Year of Learning and Teaching Accessibility Taught Me

  Published on 25 Dec, 2019

  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.

  Read the article →
• Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report

  Published on 10 Oct, 2019

  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.

  Read the article →
• Accessible Icon Buttons

  Published on 22 May, 2019

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

  Read the article →
• The SVG Filters Series

  Published on 15 Jan, 2019

  Read the article →
• The Refactoring UI Book

  Published on 02 Jan, 2019

  Read the article →
• Nested Links Without Nesting Links

  Published on 07 Sep, 2018

  Read the article →
• How do you mark up an accordion?

  Published on 03 Sep, 2018

  Read the article →
• Just write.

  Published on 14 Aug, 2018

  Read the article →
• On Switching from HEX & RGB to HSL

  Published on 12 Aug, 2018

  Read the article →
• SVG Filters: The Crash Course

  Published on 11 Aug, 2018

  Read the article →
• On Designing and Building Toggle Switches

  Published on 23 Jul, 2018

  Read the article →
• Going Offline

  Published on 23 Apr, 2018

  sarasoueidan.com is now a Progressive Web App!

  Read the article →
• Case Study: Optimizing SVG Text & Image Delivery with Inline SVG

  Published on 10 Jan, 2018

  When One SVG Embedding Technique Is Not Enough

  Read the article →
• Cropping & Scaling Images Using SVG Documents

  Published on 02 Jan, 2018

  The SVG snippet that replaces a CSS object-fit declaration

  Read the article →
• Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit

  Published on 29 Dec, 2017

  Read the article →
• Migrating from Jekyll+Github Pages to Hugo+Netlify

  Published on 06 Jun, 2017

  Read the article →
• Mimic Relative Positioning Inside an SVG with Nested SVGs

  Published on 27 Jun, 2016

  Read the article →
• Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG

  Published on 25 Apr, 2016

  Read the article →
• SVG Style Inheritance and the ‘Flash Of Unstyled SVG’

  Published on 01 Mar, 2016

  On Using SVG Presentation Attributes To Provide Style Fallback for CSS Failure Scenarios

  Read the article →
• Animated SVG vs GIF [CAGEMATCH]

  Published on 24 Nov, 2015

  Read the article →
• Tips for Creating and Exporting Better SVGs for the Web

  Published on 16 Nov, 2015

  Read the article →
• CSS vs. SVG: The Final Round(up)

  Published on 16 Sep, 2015

  Read the article →
• CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components

  Published on 01 Sep, 2015

  Read the article →
• CSS vs SVG: Styling Checkboxes and Radio Buttons

  Published on 26 Aug, 2015

  Read the article →
• Building A Circular Navigation with CSS Clip Paths

  Published on 17 Aug, 2015

  Read the article →
• CSS vs. SVG: Graphical Text Effects

  Published on 31 Jul, 2015

  Read the article →
• Styling the Contents of SVG with CSS

  Published on 16 Jul, 2015

  Read the article →
• Art-Directing an SVG Embedded Using the HTML object element

  Published on 08 Jul, 2015

  A Mini Case Study of Embedding, Art-Directing and Providing Accessible Fallback For The Provata Health Results Infographic

  Read the article →
• The State of SVG Animation

  Published on 05 Jun, 2015

  Read the article →
• Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS

  Published on 21 May, 2015

  Read the article →
• An Introduction To Graphical Effects in CSS

  Published on 29 Apr, 2015

  Read the article →
• A Primer To Background Positioning In CSS

  Published on 24 Mar, 2015

  Read the article →
• Building a Circular Navigation with SVG

  Published on 09 Mar, 2015

  Read the article →
• Extending the Color Cascade with the CSS currentColor Variable

  Published on 24 Feb, 2015

  Read the article →
• Better SVG Fallback and Art Direction With The picture Element

  Published on 15 Feb, 2015

  Read the article →
• Compositing And Blending In CSS

  Published on 27 Jan, 2015

  Read the article →
• Useful SVGO[ptimization] Tools

  Published on 26 Jan, 2015

  Read the article →
• Tips For Optimizing SVG Delivery For The Web

  Published on 19 Dec, 2014

  Read the article →
• An Overview Of SVG Sprite Creation Techniques

  Published on 16 Dec, 2014

  Read the article →
• Styling and Animating SVGs with CSS

  Published on 03 Nov, 2014

  Read the article →
• A Guide to SVG Animations (SMIL)

  Published on 13 Oct, 2014

  Read the article →
• Making SVGs Responsive With CSS

  Published on 19 Aug, 2014

  Read the article →
• Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports

  Published on 05 Aug, 2014

  Read the article →
• Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute

  Published on 30 Jul, 2014

  Read the article →
• Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio

  Published on 17 Jul, 2014

  Read the article →
• Clipping in CSS and SVG — The clip-path Property and Element

  Published on 08 Jul, 2014

  Read the article →
• Structuring, Grouping, and Referencing in SVG — The, , and Elements

  Published on 03 Jul, 2014

  Read the article →
• Everything You Need To Know About The CSS will-change Property

  Published on 10 Jun, 2014

  Read the article →
• Moving Forward With CSS Shapes

  Published on 05 May, 2014

  Read the article →
• CSS Shapes 101

  Published on 29 Apr, 2014

  Read the article →
• CSS Regions Matter

  Published on 15 Feb, 2014

  Read the article →
• Animating CSS Shapes with CSS Animations and Transitions

  Published on 14 Jan, 2014

  Read the article →
• Using CSS Regions With CSS Shapes For A Better Reading Experience

  Published on 05 Dec, 2013

  Read the article →
• Techniques For Creating Textured Text

  Published on 02 Dec, 2013

  Read the article →
• Techniques For Responsive Typography

  Published on 11 Nov, 2013

  Read the article →
• CSS Overlay Techniques

  Published on 07 Nov, 2013

  Read the article →
• Creating Non-Rectangular Layouts With CSS Shapes

  Published on 05 Nov, 2013

  Read the article →
• Navicon Transformicons: Animated Navigation Icons with CSS Transforms

  Published on 20 Oct, 2013

  Read the article →
• Building A Circular Navigation With CSS Transforms

  Published on 09 Aug, 2013

  Read the article →
• Lessons from the “Seductive Interaction Design” Book

  Published on 26 Apr, 2013

  Read the article →