Sara Soueidan — Independent web UI developer, author, speaker, and educator working at the intersection of design and code, helping front-end designers and developers build innovative, inclusive, and accessible web experiences using modern HTML, CSS, and SVG.
70 articles from this blog
Explains how to use CSS's slash syntax to provide alternative text for CSS-generated content, improving web accessibility for screen readers.
A video podcast featuring Sara Soueidan and Kevin Powell discussing web accessibility, covering HTML semantics, ARIA, CSS, and common myths.
Explains how to create a CSS-only scrollspy effect using the new scroll-marker-group property and :target-current pseudo-class, eliminating the need for JavaScript.
An analysis of the accessibility and usability of experimental CSS Carousels, highlighting current limitations and browser support issues.
A web developer shares their blogging journey, tools, and inspiration, focusing on front-end technologies like HTML, CSS, and accessibility.
A guide to using ARIA Live Regions for creating accessible notifications in web applications, focusing on screen reader compatibility.
Explores ARIA Live Regions limitations, best practices, and robust alternatives for accessible notifications in web development.
A guide to setting up a screen reader testing environment for accessibility testing, covering software, configurations, and browser combinations.
Explores how the CSS prefers-color-scheme media query prioritizes app-level theme settings over OS-level preferences, with practical testing examples.
Argues for adding a new <search> HTML element as semantic sugar for the ARIA search role, improving web accessibility and native HTML parity.
A guide to designing and implementing accessible focus indicators for keyboard and assistive technology users, covering WCAG compliance.
Two methods for adding syntax-highlighted code to Apple Keynote slides, including using VS Code's copy feature and a web tool.
Tips for web developers to ensure content remains understandable and functional when CSS is stripped by Reader modes and reading apps.
Explores using CSS Container Queries for component-level art direction, particularly for responsive images within card layouts.
A guide to creatively styling HTML <hr> elements with CSS and SVG, moving beyond plain lines to add visual flair while maintaining semantics.
A guide to creating accessible text labels for eCommerce buttons and links that work for both screen reader and speech-input users.
A developer's guide to installing and using Glyphhanger on macOS to convert and optimize TTF font files for web use (WOFF/WOFF2).
A guide to accessibly hiding and styling checkboxes and radio buttons using SVG, focusing on maintaining usability for all users including screen reader users.
A guide to improving web accessibility by optimizing keyboard navigation using tabindex and ARIA attributes for better user experience.
Explains how to use CSS Variables for global project settings and component-scoped styles to improve CSS maintainability and prototyping.
