Are 'CSS Carousels' accessible?
Spoiler: No, they aren't.
Blog archive
86 articles on design engineering covering project case studies, thought process, front-end strategy, techniques and best practices, focused on HTML, CSS, SVG, accessiblity, and everything in between.
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
Art-Directing an SVG Embedded Using
A Mini Case Study of Embedding, Art-Directing and Providing Accessible Fallback For The <em>Provata Health</em> Results Infographic