corpus.blog
41554 blogs · [ { "id": "01a07df5-011c-730b-8c6e-efa9be7d1a87", "title": "CSS to speech: alternative text for CSS-generated content", "url": "https://www.sarasoueidan.com/blog/alt-text-for-css-generated-content/", "published_at": "2025-09-17T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9be9888c0", "title": "🎥 New (Video) Podcast: \"Navigating the World of Web Accessibility with Sara Soueidan\", with Kevin Powell", "url": "https://www.sarasoueidan.com/blog/podcast-with-kevin-powell/", "published_at": "2025-09-11T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9bf8ad43a", "title": "CSS-only scrollspy effect using scroll-marker-group and :target-current", "url": "https://www.sarasoueidan.com/blog/css-scrollspy/", "published_at": "2025-08-18T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9bfd00986", "title": "Are 'CSS Carousels' accessible?", "url": "https://www.sarasoueidan.com/blog/css-carousels-accessibility/", "published_at": "2025-05-06T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c02937b3", "title": "Tag, You're It", "url": "https://www.sarasoueidan.com/blog/tag-youre-it/", "published_at": "2025-04-29T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c08866fe", "title": "Accessible notifications with ARIA Live Regions (Part 2)", "url": "https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/", "published_at": "2024-01-15T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c120c979", "title": "Accessible notifications with ARIA Live Regions (Part 1)", "url": "https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/", "published_at": "2024-01-15T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c1d04a85", "title": "Setting up a screen reader testing environment on your computer", "url": "https://www.sarasoueidan.com/blog/testing-environment-setup/", "published_at": "2022-11-24T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c2952384", "title": "The CSS prefers-color-scheme user query and order of preference", "url": "https://www.sarasoueidan.com/blog/prefers-color-scheme-browser-vs-os/", "published_at": "2021-10-03T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c2e20f39", "title": "In Quest of Search", "url": "https://www.sarasoueidan.com/blog/in-quest-of-search/", "published_at": "2021-09-15T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c366315c", "title": "A guide to designing accessible, WCAG-conformant focus indicators", "url": "https://www.sarasoueidan.com/blog/focus-indicators/", "published_at": "2021-08-13T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c36f4dce", "title": "A couple of ways to highlight code syntax in Apple Keynote slides", "url": "https://www.sarasoueidan.com/blog/copy-paste-from-vscode-to-keynote/", "published_at": "2021-05-23T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c430dfde", "title": "Design for reading: tips for optimizing content for Reader modes and reading apps", "url": "https://www.sarasoueidan.com/blog/tips-for-reader-modes/", "published_at": "2021-05-10T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c5186b67", "title": "Component-level art direction with CSS Container Queries", "url": "https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/", "published_at": "2021-05-09T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c5e569d0", "title": "Not Your Typical Horizontal Rules", "url": "https://www.sarasoueidan.com/blog/horizontal-rules/", "published_at": "2021-03-25T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c6a16148", "title": "Accessible Text Labels For All", "url": "https://www.sarasoueidan.com/blog/accessible-text-labels/", "published_at": "2021-03-17T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c7139bae", "title": "How I set up Glyphhanger on macOS for optimizing and converting font files for the Web", "url": "https://www.sarasoueidan.com/blog/glyphhanger/", "published_at": "2021-03-02T00:00:00+00:00" }, { "id": "01a0de6b-caec-7101-bd08-a30da3eadd23", "title": "New helper added: Interactive SVG Coordinate System – Interactively explore the viewport, viewBox, & preserveAspectRatio of an SVG.", "url": "https://www.sarasoueidan.com/demos/interactive-svg-coordinate-system/", "published_at": "2021-01-18T00:00:00+00:00" }, { "id": "01a0dd6a-55a9-705c-b387-9999a4723115", "title": "Just write", "url": "https://www.sarasoueidan.com/desk/just-write/", "published_at": "2020-08-23T05:18:45+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c80943d0", "title": "Inclusively Hiding & Styling Checkboxes and Radio Buttons", "url": "https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/", "published_at": "2020-06-16T09:11:58+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c80d4fe3", "title": "Optimizing keyboard navigation using tabindex and ARIA", "url": "https://www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/", "published_at": "2020-06-09T17:01:45+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c8195c02", "title": "Global and Component Style Settings with CSS Variables", "url": "https://www.sarasoueidan.com/blog/style-settings-with-css-variables/", "published_at": "2020-06-01T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c8d0bd45", "title": "What a Year of Learning and Teaching Accessibility Taught Me", "url": "https://www.sarasoueidan.com/blog/what-accessibility-taught-me/", "published_at": "2019-12-25T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9c9c58447", "title": "Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report", "url": "https://www.sarasoueidan.com/blog/accessible-data-charts-for-khan-academy-2018-annual-report/", "published_at": "2019-10-10T09:54:41+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9ca4ebd26", "title": "Accessible Icon Buttons", "url": "https://www.sarasoueidan.com/blog/accessible-icon-buttons/", "published_at": "2019-05-22T12:59:17+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9ca945a84", "title": "The SVG Filters Series", "url": "https://www.sarasoueidan.com/blog/svg-filters-series/", "published_at": "2019-01-15T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cab1b998", "title": "The Refactoring UI Book", "url": "https://www.sarasoueidan.com/blog/refactoring-ui/", "published_at": "2019-01-02T07:36:45+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9caef750f", "title": "Nested Links Without Nesting Links", "url": "https://www.sarasoueidan.com/blog/nested-links/", "published_at": "2018-09-07T09:51:51+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cb4834fe", "title": "How do you mark up an accordion?", "url": "https://www.sarasoueidan.com/blog/accordion-markup/", "published_at": "2018-09-03T10:54:24+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cc26fe9e", "title": "Just write.", "url": "https://www.sarasoueidan.com/blog/just-write/", "published_at": "2018-08-14T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9ccf1d1f8", "title": "On Switching from HEX & RGB to HSL", "url": "https://www.sarasoueidan.com/blog/hex-rgb-to-hsl/", "published_at": "2018-08-12T11:31:26+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cd00d797", "title": "SVG Filters: The Crash Course", "url": "https://www.sarasoueidan.com/blog/svg-filters/", "published_at": "2018-08-11T00:47:34+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cd5162e7", "title": "On Designing and Building Toggle Switches", "url": "https://www.sarasoueidan.com/blog/toggle-switch-design/", "published_at": "2018-07-23T01:51:50+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cdcc30c7", "title": "Going Offline", "url": "https://www.sarasoueidan.com/blog/going-offline/", "published_at": "2018-04-23T15:37:23+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cdefc395", "title": "Case Study: Optimizing SVG Text & Image Delivery with Inline SVG", "url": "https://www.sarasoueidan.com/blog/optimizing-svg-delivery-with-svg/", "published_at": "2018-01-10T16:55:20+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9ce28bbc1", "title": "Cropping & Scaling Images Using SVG Documents", "url": "https://www.sarasoueidan.com/blog/svg-object-fit/", "published_at": "2018-01-02T04:07:56+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9ce6bf1ad", "title": "Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit", "url": "https://www.sarasoueidan.com/blog/auto-fill-auto-fit/", "published_at": "2017-12-29T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9ced4a6c7", "title": "Migrating from Jekyll+Github Pages to Hugo+Netlify", "url": "https://www.sarasoueidan.com/blog/jekyll-ghpages-to-hugo-netlify/", "published_at": "2017-06-06T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9cf92bb4d", "title": "Mimic Relative Positioning Inside an SVG with Nested SVGs", "url": "https://www.sarasoueidan.com/blog/mimic-relative-positioning-in-svg/", "published_at": "2016-06-27T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d0177cca", "title": "Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG", "url": "https://www.sarasoueidan.com/blog/icon-fonts-to-svg/", "published_at": "2016-04-25T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d0c39a4a", "title": "SVG Style Inheritance and the ‘Flash Of Unstyled SVG’", "url": "https://www.sarasoueidan.com/blog/svg-style-inheritance-and-FOUSVG/", "published_at": "2016-03-01T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d131b534", "title": "Animated SVG vs GIF [CAGEMATCH]", "url": "https://www.sarasoueidan.com/blog/svg-vs-gif/", "published_at": "2015-11-24T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d21e6cb2", "title": "Tips for Creating and Exporting Better SVGs for the Web", "url": "https://www.sarasoueidan.com/blog/svg-tips-for-designers/", "published_at": "2015-11-16T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d2fb71ac", "title": "CSS vs. SVG: The Final Round(up)", "url": "https://www.sarasoueidan.com/blog/css-vs-svg-the-final-roundup/", "published_at": "2015-09-16T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d2fe0983", "title": "CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components", "url": "https://www.sarasoueidan.com/blog/css-vs-svg-arbitrarily-shaped-ui-components/", "published_at": "2015-09-01T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d3fc5993", "title": "CSS vs SVG: Styling Checkboxes and Radio Buttons", "url": "https://www.sarasoueidan.com/blog/css-vs-svg-styling-checkboxes-and-radio-buttons/", "published_at": "2015-08-26T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d44ac95c", "title": "Building A Circular Navigation with CSS Clip Paths", "url": "https://www.sarasoueidan.com/blog/building-a-circular-navigation-with-css-clip-paths/", "published_at": "2015-08-17T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d4ae9be3", "title": "CSS vs. SVG: Graphical Text Effects", "url": "https://www.sarasoueidan.com/blog/css-vs-svg-graphical-text/", "published_at": "2015-07-31T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d53bb910", "title": "Styling the Contents of SVG with CSS", "url": "https://www.sarasoueidan.com/blog/styling-svg-use-with-css/", "published_at": "2015-07-16T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d56c5fa3", "title": "Art-Directing an SVG Embedded Using the HTML object element", "url": "https://www.sarasoueidan.com/blog/art-directing-svg-object/", "published_at": "2015-07-08T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d57bd031", "title": "The State of SVG Animation", "url": "https://www.sarasoueidan.com/blog/state-of-svg-animation/", "published_at": "2015-06-05T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d65a91f0", "title": "Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS", "url": "https://www.sarasoueidan.com/blog/svg-art-direction-using-viewbox/", "published_at": "2015-05-21T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d703bffa", "title": "An Introduction To Graphical Effects in CSS", "url": "https://www.sarasoueidan.com/blog/css-graphics/", "published_at": "2015-04-29T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d745959d", "title": "A Primer To Background Positioning In CSS", "url": "https://www.sarasoueidan.com/blog/css-background-positioning/", "published_at": "2015-03-24T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d7fe6f8b", "title": "Building a Circular Navigation with SVG", "url": "https://www.sarasoueidan.com/blog/building-a-circular-navigation-with-svg/", "published_at": "2015-03-09T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d8942890", "title": "Extending the Color Cascade with the CSS currentColor Variable", "url": "https://www.sarasoueidan.com/blog/currentcolor/", "published_at": "2015-02-24T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9d96edf2c", "title": "Better SVG Fallback and Art Direction With The picture Element", "url": "https://www.sarasoueidan.com/blog/svg-picture/", "published_at": "2015-02-15T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9da2e5c8f", "title": "Compositing And Blending In CSS", "url": "https://www.sarasoueidan.com/blog/compositing-and-blending-in-css/", "published_at": "2015-01-27T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9daf58876", "title": "Useful SVGO[ptimization] Tools", "url": "https://www.sarasoueidan.com/blog/svgo-tools/", "published_at": "2015-01-26T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9dba25c71", "title": "Tips For Optimizing SVG Delivery For The Web", "url": "https://www.sarasoueidan.com/blog/svg-optimization/", "published_at": "2014-12-19T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9dc95300e", "title": "An Overview Of SVG Sprite Creation Techniques", "url": "https://www.sarasoueidan.com/blog/overview-of-svg-sprite-creation-techniques/", "published_at": "2014-12-16T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9dd3206da", "title": "Styling and Animating SVGs with CSS", "url": "https://www.sarasoueidan.com/blog/styling-and-animating-svgs-with-css/", "published_at": "2014-11-03T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9dd7d2b9d", "title": "A Guide to SVG Animations (SMIL)", "url": "https://www.sarasoueidan.com/blog/guide-svg-animations-smil/", "published_at": "2014-10-13T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9dd98b64a", "title": "Making SVGs Responsive With CSS", "url": "https://www.sarasoueidan.com/blog/responsive-svgs/", "published_at": "2014-08-19T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9de05fc92", "title": "Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports", "url": "https://www.sarasoueidan.com/blog/nesting-svgs/", "published_at": "2014-08-05T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9df03e614", "title": "Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute", "url": "https://www.sarasoueidan.com/blog/svg-transformations/", "published_at": "2014-07-30T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9df735279", "title": "Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio", "url": "https://www.sarasoueidan.com/blog/svg-coordinate-systems/", "published_at": "2014-07-17T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9dfd0bc77", "title": "Clipping in CSS and SVG — The clip-path Property and Element", "url": "https://www.sarasoueidan.com/blog/css-svg-clipping/", "published_at": "2014-07-08T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e0756190", "title": "Structuring, Grouping, and Referencing in SVG — The, , and Elements", "url": "https://www.sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/", "published_at": "2014-07-03T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e111a224", "title": "Everything You Need To Know About The CSS will-change Property", "url": "https://www.sarasoueidan.com/blog/css-will-change-property/", "published_at": "2014-06-10T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e156b843", "title": "Moving Forward With CSS Shapes", "url": "https://www.sarasoueidan.com/blog/moving-forward-with-css-shapes/", "published_at": "2014-05-05T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e173f35e", "title": "CSS Shapes 101", "url": "https://www.sarasoueidan.com/blog/css-shapes-101/", "published_at": "2014-04-29T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e17e33fc", "title": "CSS Regions Matter", "url": "https://www.sarasoueidan.com/blog/css-regions-matter/", "published_at": "2014-02-15T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e1cfac15", "title": "Animating CSS Shapes with CSS Animations and Transitions", "url": "https://www.sarasoueidan.com/blog/animating-css-shapes/", "published_at": "2014-01-14T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e25a0170", "title": "Using CSS Regions With CSS Shapes For A Better Reading Experience", "url": "https://www.sarasoueidan.com/blog/css-regions-with-shapes-for-readability/", "published_at": "2013-12-05T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e27fb69e", "title": "Techniques For Creating Textured Text", "url": "https://www.sarasoueidan.com/blog/textured-text-techniques/", "published_at": "2013-12-02T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e36ce81c", "title": "Techniques For Responsive Typography", "url": "https://www.sarasoueidan.com/blog/responsive-typography-techniques/", "published_at": "2013-11-11T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e3b362a4", "title": "CSS Overlay Techniques", "url": "https://www.sarasoueidan.com/blog/css-overlay-techniques/", "published_at": "2013-11-07T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e3c91ba8", "title": "Creating Non-Rectangular Layouts With CSS Shapes", "url": "https://www.sarasoueidan.com/blog/css-shapes/", "published_at": "2013-11-05T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e487f1c3", "title": "Navicon Transformicons: Animated Navigation Icons with CSS Transforms", "url": "https://www.sarasoueidan.com/blog/navicon-transformicons/", "published_at": "2013-10-20T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e5722ebc", "title": "Building A Circular Navigation With CSS Transforms", "url": "https://www.sarasoueidan.com/blog/circular-navigation/", "published_at": "2013-08-09T00:00:00+00:00" }, { "id": "01a07df5-011c-730b-8c6e-efa9e65acb17", "title": "Lessons from the “Seductive Interaction Design” Book", "url": "https://www.sarasoueidan.com/blog/lessons-from-seductive-interaction-design-book/", "published_at": "2013-04-26T00:00:00+00:00" } ] posts Claim your blog
Back to Sara Soueidan
Blog · corpus.blog/blogs/sarasoueidan.com/posts

Sara Soueidan

sarasoueidan.com

2025

CSS to speech: alternative text for CSS-generated contentoriginal ↗
17 Sept 2025
🎥 New (Video) Podcast: "Navigating the World of Web Accessibility with Sara Soueidan", with Kevin Powelloriginal ↗
11 Sept 2025
CSS-only scrollspy effect using scroll-marker-group and :target-currentoriginal ↗
18 Aug 2025
Are 'CSS Carousels' accessible?original ↗
6 May 2025
Tag, You're Itoriginal ↗
29 Apr 2025

2024

Accessible notifications with ARIA Live Regions (Part 2)original ↗
15 Jan 2024
Accessible notifications with ARIA Live Regions (Part 1)original ↗
15 Jan 2024

2022

Setting up a screen reader testing environment on your computeroriginal ↗
24 Nov 2022

2021

The CSS prefers-color-scheme user query and order of preferenceoriginal ↗
3 Oct 2021
In Quest of Searchoriginal ↗
15 Sept 2021
A guide to designing accessible, WCAG-conformant focus indicatorsoriginal ↗
13 Aug 2021
A couple of ways to highlight code syntax in Apple Keynote slidesoriginal ↗
23 May 2021
Design for reading: tips for optimizing content for Reader modes and reading appsoriginal ↗
10 May 2021
Component-level art direction with CSS Container Queriesoriginal ↗
9 May 2021
Not Your Typical Horizontal Rulesoriginal ↗
25 Mar 2021
Accessible Text Labels For Alloriginal ↗
17 Mar 2021
How I set up Glyphhanger on macOS for optimizing and converting font files for the Weboriginal ↗
2 Mar 2021
New helper added: Interactive SVG Coordinate System – Interactively explore the viewport, viewBox, & preserveAspectRatio of an SVG.original ↗
18 Jan 2021

2020

Just writeoriginal ↗
23 Aug 2020
Inclusively Hiding & Styling Checkboxes and Radio Buttonsoriginal ↗
16 Jun 2020
Optimizing keyboard navigation using tabindex and ARIAoriginal ↗
9 Jun 2020
Global and Component Style Settings with CSS Variablesoriginal ↗
1 Jun 2020

2019

What a Year of Learning and Teaching Accessibility Taught Meoriginal ↗
25 Dec 2019
Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Reportoriginal ↗
10 Oct 2019
Accessible Icon Buttonsoriginal ↗
22 May 2019
The SVG Filters Seriesoriginal ↗
15 Jan 2019
The Refactoring UI Bookoriginal ↗
2 Jan 2019

2018

Nested Links Without Nesting Linksoriginal ↗
7 Sept 2018
How do you mark up an accordion?original ↗
3 Sept 2018
Just write.original ↗
14 Aug 2018
On Switching from HEX & RGB to HSLoriginal ↗
12 Aug 2018
SVG Filters: The Crash Courseoriginal ↗
11 Aug 2018
On Designing and Building Toggle Switchesoriginal ↗
23 Jul 2018
Going Offlineoriginal ↗
23 Apr 2018
Case Study: Optimizing SVG Text & Image Delivery with Inline SVGoriginal ↗
10 Jan 2018
Cropping & Scaling Images Using SVG Documentsoriginal ↗
2 Jan 2018

2017

Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fitoriginal ↗
29 Dec 2017
Migrating from Jekyll+Github Pages to Hugo+Netlifyoriginal ↗
6 Jun 2017

2016

Mimic Relative Positioning Inside an SVG with Nested SVGsoriginal ↗
27 Jun 2016
Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVGoriginal ↗
25 Apr 2016
SVG Style Inheritance and the ‘Flash Of Unstyled SVG’original ↗
1 Mar 2016

2015

Animated SVG vs GIF [CAGEMATCH]original ↗
24 Nov 2015
Tips for Creating and Exporting Better SVGs for the Weboriginal ↗
16 Nov 2015
CSS vs. SVG: The Final Round(up)original ↗
16 Sept 2015
CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Componentsoriginal ↗
1 Sept 2015
CSS vs SVG: Styling Checkboxes and Radio Buttonsoriginal ↗
26 Aug 2015
Building A Circular Navigation with CSS Clip Pathsoriginal ↗
17 Aug 2015
CSS vs. SVG: Graphical Text Effectsoriginal ↗
31 Jul 2015
Styling the Contents of SVG with CSSoriginal ↗
16 Jul 2015
Art-Directing an SVG Embedded Using the HTML object elementoriginal ↗
8 Jul 2015
The State of SVG Animationoriginal ↗
5 Jun 2015
Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSSoriginal ↗
21 May 2015
An Introduction To Graphical Effects in CSSoriginal ↗
29 Apr 2015
A Primer To Background Positioning In CSSoriginal ↗
24 Mar 2015
Building a Circular Navigation with SVGoriginal ↗
9 Mar 2015
Extending the Color Cascade with the CSS currentColor Variableoriginal ↗
24 Feb 2015
Better SVG Fallback and Art Direction With The picture Elementoriginal ↗
15 Feb 2015
Compositing And Blending In CSSoriginal ↗
27 Jan 2015
Useful SVGO[ptimization] Toolsoriginal ↗
26 Jan 2015

2014

Tips For Optimizing SVG Delivery For The Weboriginal ↗
19 Dec 2014
An Overview Of SVG Sprite Creation Techniquesoriginal ↗
16 Dec 2014
Styling and Animating SVGs with CSSoriginal ↗
3 Nov 2014
A Guide to SVG Animations (SMIL)original ↗
13 Oct 2014
Making SVGs Responsive With CSSoriginal ↗
19 Aug 2014
Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewportsoriginal ↗
5 Aug 2014
Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attributeoriginal ↗
30 Jul 2014
Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatiooriginal ↗
17 Jul 2014
Clipping in CSS and SVG — The clip-path Property and Elementoriginal ↗
8 Jul 2014
Structuring, Grouping, and Referencing in SVG — The, , and Elementsoriginal ↗
3 Jul 2014
Everything You Need To Know About The CSS will-change Propertyoriginal ↗
10 Jun 2014
Moving Forward With CSS Shapesoriginal ↗
5 May 2014
CSS Shapes 101original ↗
29 Apr 2014
CSS Regions Matteroriginal ↗
15 Feb 2014
Animating CSS Shapes with CSS Animations and Transitionsoriginal ↗
14 Jan 2014

2013

Using CSS Regions With CSS Shapes For A Better Reading Experienceoriginal ↗
5 Dec 2013
Techniques For Creating Textured Textoriginal ↗
2 Dec 2013
Techniques For Responsive Typographyoriginal ↗
11 Nov 2013
CSS Overlay Techniquesoriginal ↗
7 Nov 2013
Creating Non-Rectangular Layouts With CSS Shapesoriginal ↗
5 Nov 2013
Navicon Transformicons: Animated Navigation Icons with CSS Transformsoriginal ↗
20 Oct 2013
Building A Circular Navigation With CSS Transformsoriginal ↗
9 Aug 2013
Lessons from the “Seductive Interaction Design” Bookoriginal ↗
26 Apr 2013