Blog archive

Tag, You're It

Accessible notifications with ARIA Live Regions (Part 2)

Accessible notifications with ARIA Live Regions (Part 1)

Setting up a screen reader testing environment on your computer

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

In Quest of Search

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

A guide to designing accessible, WCAG-conformant focus indicators

I’m curating the programme for an upcoming accessibility-focussed conference ✨

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

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

Component-level art direction with CSS Container Queries

Not Your Typical Horizontal Rules

Accessible Text Labels For All

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

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

Inclusively Hiding & Styling Checkboxes and Radio Buttons

Optimizing keyboard navigation using tabindex and ARIA

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

Global and Component Style Settings with CSS Variables

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

What a Year of Learning and Teaching Accessibility Taught Me

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

Accessible Icon Buttons

The SVG Filters Series

The Refactoring UI Book

Nested Links Without Nesting Links

How do you mark up an accordion?

On Switching from HEX & RGB to HSL

SVG Filters: The Crash Course

Interview: net Magazine September 2018 Issue #310

On Designing and Building Toggle Switches

A new Smashing talk. A smashing new experience.

Going Offline

sarasoueidan.com is now a Progressive Web App!

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

When One SVG Embedding Technique Is Not Enough

Cropping & Scaling Images Using SVG Documents

The SVG snippet that replaces a CSS object-fit declaration

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

Migrating from Jekyll+Github Pages to Hugo+Netlify

Building a fully-accessible help tooltip

...is harder than I thought.

Mimic Relative Positioning Inside an SVG with Nested SVGs

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

SVG Style Inheritance and the ‘Flash Of Unstyled SVG’

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

2015 In Review

Animated SVG vs GIF [CAGEMATCH]

Tips for Creating and Exporting Better SVGs for the Web

Developer of the Year 2015 net Award

CSS vs. SVG: The Final Round(up)

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

CSS vs SVG: Styling Checkboxes and Radio Buttons

Building A Circular Navigation with CSS Clip Paths

CSS vs. SVG: Graphical Text Effects

Chapter 4, Smashing Book 5

“Mastering SVG for Responsive Web Design”

Styling the Contents of SVG with CSS

Art-Directing an SVG Embedded Using