Feed - Sara Soueidan — UI developer

My top picks for Interop 2027 🔗

I love the Web platform, and it’s a provilege that we, the web community, get a chance to influence what browser makers work on every year. For the se [...]

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

This is the first in a series of articles I'm naming "Effortless Accessibility", in which I will share actionable tips on HTML and CSS features (exist [...]

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

Kevin and I been planning this podcast for months and our schedules finally aligned and we made it happen. We originally planned to chat for a bit… bu [...]

CSS-only scrollspy effect using scroll-marker-group and :target-current 🔗

✨ This post is sponsored by everyone who has bought my Practical Accessibility course. ✨ The Bootstrap Scrollspy—now commonly known as just “Scrollspy [...]

Are 'CSS Carousels' accessible? 🔗

Hello </script> document.body.appendChild(document.createTextNode("World!")) ✨ This post is sponsored by everyone who has bo [...]

Tag, You're It 🔗

Why did you start blogging in the first place? I started blogging when I was still learning front-end development—specifically CSS—back in 2012. I was [...]

Accessible notifications with ARIA Live Regions (Part 2) 🔗

In the first part of this chapter we discussed what we might need live regions for, and how to create them using HTML and ARIA. In this part, we’re go [...]

Accessible notifications with ARIA Live Regions (Part 1) 🔗

In this chapter, we’re going to learn about ARIA live regions — the accessible notifications system that enables us to make dynamic web content more a [...]

Setting up a screen reader testing environment on your computer 🔗

When you’re designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility an [...]

The CSS prefers-color-scheme user query and order of preference 🔗

I spent some time in Reeder app this morning, catching up with RSS and the latest articles published by my favorite blogs. I was reading Scott O’Hara’ [...]

In Quest of Search 🔗

Update: There now exists a native HTML <search> element that maps to the ARIA search role. 🎊 As of March 24th, 2023, the HTML specification added a n [...]

A guide to designing accessible, WCAG-conformant focus indicators 🔗

figure { margin: 3em 0; } figure img { margin: 0 auto; } Imagine you visit a website and you want to browse it for some c [...]

A couple of ways to highlight code syntax in Apple Keynote slides 🔗

Apple Keynote doesn’t come with code syntax highlighting built in. I really wish it did, and hope that Apple would at some point add this feature, esp [...]

Design for reading: tips for optimizing content for Reader modes and reading apps 🔗

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 co [...]

Component-level art direction with CSS Container Queries 🔗

Container Queries (CQ) allow us to change the styles of a component so it responds to the size of its nearest container. With CQ, we can change how an [...]

Not Your Typical Horizontal Rules 🔗

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. [...]

Accessible Text Labels For All 🔗

My talk Applied Accessibility: Practical Tips for Creating more Accessible Front-Ends is now available to watch online. This blog post is an extended [...]

How I set up Glyphhanger on macOS for optimizing and converting font files for the Web 🔗

I can't count the number of times I've tried installing a command line tool on my machine, only to find myself going down a black hole of node modules [...]

Inclusively Hiding & Styling Checkboxes and Radio Buttons 🔗

Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we do [...]

Optimizing keyboard navigation using tabindex and ARIA 🔗

The faster the user can navigate your UI the better. The faster they can get to the content they need, the better. Therefore, the less steps they have [...]

Global and Component Style Settings with CSS Variables 🔗

Ever since I learned about CSS Variables a few years back, my absolute favorite feature has been the ability to scope variables to components. But to [...]

What a Year of Learning and Teaching Accessibility Taught Me 🔗

(This article was originally published on 24accessibility). because I didn't know better. Fast forward to today, I know enough to be able to writ [...]

Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report 🔗

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 beautif [...]

Accessible Icon Buttons 🔗

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contai [...]

The SVG Filters Series 🔗

SVG Filters 101 SVG Filter Effects – Outline Text with <feMorphology> feMorphology filter, how it works and how you can use it to cr [...]

The Refactoring UI Book 🔗

I’ve never taken or had any design classes in school or university. Most of my (humble) design knowledge I’ve picked up online from random articles he [...]

Nested Links Without Nesting Links 🔗

Chris Coyier started a thought exercise thread last week asking the community how they would approach building nested links. I had the same requiremen [...]

How do you mark up an accordion? 🔗

I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answ [...]

Just write. 🔗

I got used to writing lengthy technical articles over the last few years that I’d been finding it increasingly harder to publish articles that are not [...]

On Switching from HEX & RGB to HSL 🔗

A couple of weeks ago I tweeted about a feature that I didn’t know existed in VS Code: the visual color editor that pops up when you hover over color [...]

SVG Filters: The Crash Course 🔗

I always try to customize in-house client workshops to my client’s needs. That sometimes also means that if my client’s design and dev team is interes [...]

On Designing and Building Toggle Switches 🔗

Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creatin [...]

Going Offline 🔗

Earlier this month I rolled out a new and long overdue feature on this Web site: offline viewing. In other words, from now on, after your first visit, [...]

Case Study: Optimizing SVG Text & Image Delivery with Inline SVG 🔗

I love when I’m pushed to think of creative techniques when tackling design and dev challenges on my client projects. And it so happens that the new S [...]

Cropping & Scaling Images Using SVG Documents 🔗

I’m always interested in and thinking about ways to use SVG in my client projects to solve common UI challenges — uses that go beyond simple icon disp [...]

Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit 🔗

In this article I explain the subtle but important difference between auto-fill and auto-fit for sizing columns in CSS Grid. Each of them exhibits a r [...]

Migrating from Jekyll+Github Pages to Hugo+Netlify 🔗

During the last 18 months, working on my Web site became a daunting task—be that for developing, redesigning it, writing a blog post, or making update [...]

Mimic Relative Positioning Inside an SVG with Nested SVGs 🔗

Positioning elements inside an SVG image is very similar—if not identical—to positioning elements absolutely in HTML. Every element in SVG is position [...]

Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG 🔗

If you’re reading this article, then I can probably assume you’ve already decided to switch from using fonts for icons to an SVG icon system. Or maybe [...]

SVG Style Inheritance and the ‘Flash Of Unstyled SVG’ 🔗

There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy imp [...]

Animated SVG vs GIF [CAGEMATCH] 🔗

SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage o [...]

Tips for Creating and Exporting Better SVGs for the Web 🔗

Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may o [...]

CSS vs. SVG: The Final Round(up) 🔗

This is the last article in the series of article comparing common CSS techniques to their SVG counterparts. This article is a roundup of several CSS [...]

CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components 🔗

This post is the third in the series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both.In [...]

CSS vs SVG: Styling Checkboxes and Radio Buttons 🔗

This post is the second in the series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. [...]

Building A Circular Navigation with CSS Clip Paths 🔗

The CSS clip-path property is one of the most underused and yet most interesting properties in CSS. It can be used in conjunction with CSS Shapes to c [...]

CSS vs. SVG: Graphical Text Effects 🔗

This post is the first in a series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. Sin [...]

Styling the Contents of SVG<use> with CSS 🔗

An in-depth article on how to style the contents of the SVG <use> element and overcome some challenges it brings. We get into where the contents are c [...]

Art-Directing an SVG Embedded Using the HTML object element 🔗

I have recently finished a front-end development project for Provata Health — a US-based health and wellness company specializing in health promotion [...]

The State of SVG Animation 🔗

The state of SVG animation is changing. CSS, SMIL and JavaScript can be used to animate SVGs. However, SMIL is soon to be deprecated and was never sup [...]

Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS 🔗

The SVG viewBox attribute is easily one of SVG's most powerful features. Mastering this attribute can take your SVG skills to the next level, especial [...]

An Introduction To Graphical Effects in CSS 🔗

In this article, we will take a deep introduction into CSS’s graphical effects—specifically, CSS Filters and Compositing and Blending capabilities. We [...]

A Primer To Background Positioning In CSS 🔗

An article in which we take a deep dive into CSS’s background positioning properties with visual explanations and examples. Did you know that the CSS [...]

Building a Circular Navigation with SVG 🔗

Last week, I released CIRCULUS.SVG—the SVG circular menu generator. In this article I want to go over why SVG is better suited for creating this kind [...]

Extending the Color Cascade with the CSS currentColor Variable 🔗

If you use Sass or LESS, then you probably already use variables in your style sheets and know how useful they are. If you don’t use a preprocessor, t [...]

Better SVG Fallback and Art Direction With The picture Element 🔗

Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of whi [...]

Compositing And Blending In CSS 🔗

If you’re a designer, then you’ve probably already come across blending effects some time or the other. Blending is one of the most frequently used ef [...]

Useful SVGO[ptimization] Tools 🔗

One of the steps you need to do when working with SVG is optimizing the SVG code after exporting it from the editor and before embedding in on your we [...]

Tips For Optimizing SVG Delivery For The Web 🔗

SVGs are a great asset in our responsive web design toolkit. But just like any other image format, there are certain steps you should take to make sur [...]

An Overview Of SVG Sprite Creation Techniques 🔗

SVG can be used as an icon system to replace icon fonts, and there are several ways to create SVG sprites. This article I wrote for this year's 24Ways [...]

Styling and Animating SVGs with CSS 🔗

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article I wrote for Sm [...]

A Guide to SVG Animations (SMIL) 🔗

What the title says: a complete guide to SVG animations derived from the SMIl specification. The extensive guide features a lot of demos and goes over [...]

Making SVGs Responsive With CSS 🔗

An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how t [...]

Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports 🔗

At any point in an SVG drawing, you can establish new viewports and user coordinate systems by either nesting svgs or using elements such as the symbo [...]

Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute 🔗

SVG elements can be transformed by scaling, translating, skewing, and rotating—much like HTML elements can be transformed using CSS Transforms. Howeve [...]

Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio 🔗

SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—a [...]

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element 🔗

CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operat [...]

Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements 🔗

SVG comes with its own ways for structuring a document by means of certain SVG elements that allow us to define, group, and reference objects within t [...]

Everything You Need To Know About The CSS will-change Property 🔗

What the title says! I wrote this article for the Opera Developers' blog, and it literally contains everything you need to know about the new CSS will [...]

Moving Forward With CSS Shapes 🔗

Following up with the CSS Shapes 101 article, I share a list of great resources to learn more about CSS Shapes, including tutorials, examples, and dev [...]

CSS Shapes 101 🔗

In this article, you'll learn everything you need to know to get started using CSS Shapes today. We will cover all the prerequisites: establishing a c [...]

CSS Regions Matter 🔗

Whether or not CSS Regions can be used to create multi-column or responsive layouts, fact remains that, unlike Flexbox, Multi-Columns, and Grids, CSS [...]

Animating CSS Shapes with CSS Animations and Transitions 🔗

Today we're going to be talking about animating CSS shapes with CSS animations. We'll be creating very basic "shape-shifting" layouts of sort. T [...]

Using CSS Regions With CSS Shapes For A Better Reading Experience 🔗

Using CSS shapes we can flow our content in non-rectangular areas. And sometimes we want to be able to flow our content into multiple custom-shaped ar [...]

Techniques For Creating Textured Text 🔗

For too long, we've resorted to graphics editors to create images of text that has nice effects such as creative fills or that blends with its backgro [...]

Techniques For Responsive Typography 🔗

Text is the most important part of a website. Did you know that are several ways to make text responsive? Be it big headlines or body copy, the articl [...]

CSS Overlay Techniques 🔗

Overlays can sometimes be annoying, but also undoubtedly have their useful use cases. There are different approaches to creating overlays, some of the [...]

Sara Soueidan — UI developer