The five best design links, every weekday

Domain: sarasoueidan.com

sarasoueidan.com

Accessible notifications with ARIA Live Regions (Part 1)

We’re going to learn about the accessible notifications system that enables us to make dynamic web content more accessible to screen reader users.

sarasoueidan.com

A guide to designing accessible, WCAG-compliant focus indicators

By designing and implementing accessible focus indicators, we can make our products accessible to keyboard users.

sarasoueidan.com

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.

sarasoueidan.com

Not Your Typical Horizontal Rules

Like other HTML elements, horizontal rules can be styled using CSS. This means that they don’t have to look like boring, plain horizontal lines.

sarasoueidan.com

Redesigning and rebuilding my Web site from the ground up

It’s about time my Web site got a complete makeover. It’s going to be more than just a fresh coat of paint.

sarasoueidan.com

Accessible Text Labels For All

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

sarasoueidan.com

“Yes or No?” — One Checkbox vs Two Radio Buttons.

Which one should you use when you can use both?

sarasoueidan.com

Inclusively Hiding & Styling Checkboxes and Radio Buttons

Checkboxes and radio buttons are two common examples of form elements that we desperately want to have full control over styling but we don’t.

sarasoueidan.com

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.

sarasoueidan.com

The Khan Academy 2018 Annual Report Case Study

Khan Academy is a non-profit organization whose mission is to provide a free, world-class education to anyone, anywhere.

sarasoueidan.com

Accessible Icon Buttons

An icon button is an icon that triggers some sort of action on the page.

sarasoueidan.com

How do you mark up an accordion?

I made a poll on Twitter the other day asking the #lazyweb how they would mark up a FAQ section.

sarasoueidan.com

On Designing and Building Toggle Switches

One of the demos I'm creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark.

sarasoueidan.com

Animated SVG vs GIF

sarasoueidan.com

Animated SVG vs GIF

sarasoueidan.com

Tips for Creating and Exporting Better SVGs for the Web

sarasoueidan.com

Building a Circular Navigation with SVG

sarasoueidan.com

Circulus.svg: The SVG Circular Menu Generator

sarasoueidan.com

Better SVG Fallback and Art Direction With The Picture Element

sarasoueidan.com

Compositing And Blending In CSS