Sara Soueidan

Inclusive web UI engineer and educator, int'l speaker, writer/author • HTML, CSS, a11y, progressive enhancement advocate • Eco-minimalist.

🔗 Website: https://sarasoueidan.com
💌 Newsletter: https://sarasoueidan.com/newsletter
🎥 Accessibility course: https://practical-accessibility.today
Interests: [#HTML](https://front-end.social/tags/HTML ) [#CSS](https://front-end.social/tags/CSS ) [#a11y](https://front-end.social/tags/a11y ) [#ProgressiveEnhancement](https://front-end.social/tags/ProgressiveEnhancement ) [#InclusiveDesign](https://front-end.social/tags/InclusiveDesign )

Public Key

npub1247ldr5f8rlwqqwlmedstg7tcxrtcvv4zxkute4wpqw95jxfd4sqsuzzvh

NIP-05 Address

sarasoueidan_at_front-end.social@momostr.pink

Profile Code

nprofile1qqs92l0k36yn3lhqq80aukc9509urp4uxx23rtw9u6hqs8z6fryk6cqpz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0dsavlc5c

Publishing to

relay.snort.social

relay.damus.io

nos.lol

Author Public Key

npub1247ldr5f8rlwqqwlmedstg7tcxrtcvv4zxkute4wpqw95jxfd4sqsuzzvh

Show more details

Last Notes

2026-06-24 15:40:51 UTC

The HTML <dialog> and <button> elements, the HTML Invoker Commands API, the View Transitions API + Progressive enhancement == *chefs kiss*
https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/
Lovely post from @npub1yne…lm8n

2026-06-15 07:00:53 UTC

- reply

it's genuinely so warming being welcomed into the 40s by friends who are already in their 40s 🙈

2026-06-15 06:59:35 UTC

- reply

Thank you Sara!

2026-06-15 06:24:20 UTC

- reply

👋🏻 Where can I read more about this, please?

2026-06-15 06:23:32 UTC

Officially 40 today! 🎂
I'm sort of giddy and excited about it and I can't explain why lol 🙈

2026-05-21 02:57:33 UTC

Back to the Mastodon progressive web app after using Ivory for a while.

2026-05-15 12:11:13 UTC

This morning I sent an email newsletter out 📬 announcing a soft-launch of this year's Global Accessibility Awareness Day #GAAD promotion:
For the next two weeks, the Practical Accessibility course is going on sale!
25% off ($299 instead of $399) 🎁
Sale ends on June 1st ⏳
https://practical-accessibility.today

2026-04-24 06:08:16 UTC

Friends in Europe,
Like many around the globe, one of my course students recently has lost his job and is now looking for a new opportunity. ✨
Do you know any good companies in Belgium that are looking for a Frontend developer with a passion for UI/UI and Accessibility to connect him with?

2026-02-15 16:35:51 UTC

Hey Masto friends,
What UI patterns do you find the most complex or challenging to build or implement accessibly?

2025-12-03 07:20:31 UTC

Today is the LAST DAY of my Black Friday sale! ⌛️
If you've been thinking about grabbing access to the Practical Accessibility course, now's the time to do it 👇🏻
30% off expires tomorrow: https://practical-accessibility.today

2025-12-03 07:15:38 UTC

Thank you for writing this @npub1he7…mmdk 🫶🏻
https://adrianroselli.com/2025/12/you-cant-make-something-accessible-to-everyone.html
There's a short story of frustration and comfort behind this post. A friendly discussion led to a writeup by Adrian, and I will follow up later with a little more about the backstory as I know it can bring some much-needed comfort to many people getting into or already working in #a11y

2025-11-20 14:59:37 UTC

📣 Hear hear! The biggest savings on the Practical Accessibility course start *today*—for a limited time only.
Starting today, you can get the course for 30% off — that's $279 instead of $399. The discounted price excludes sales tax that may be applied depending on where you are buying from.
This is *the biggest sale* since I opened early access to the course 2 years ago.
https://practical-accessibility.today/

2025-09-21 05:11:55 UTC

- reply

Not one AI tool is more valuable than you acquiring knowledge and learning how to use it.
Not to mention that AI isn't following the latest discussions happening in the field, nor is it keeping up with the latest updates and additions to the specs. You'll only be able to get this kind of insight from people like you who _are_ following and staying on top of things on a daily basis.
Thank you for coming to my TED talk. 😃

2025-09-21 05:11:40 UTC

- reply

It said adding decorative images in CSS is fine (without alt text) and recommended using HTML instead. This is only partially true.
So there you have it. If you're wanting to learn *proper* HTML, CSS, and accessibility, prefer learning from a human. AI is not going to teach you all you need to know.

2025-09-21 05:11:28 UTC

- reply

It told me that that's not possible and that's one of the limitations of CSS images.
I gave it a hint and asked it specifically about providing alternative text for CSS images added using the `content` property. (At this point I thought it would just search the web and find my latest blog post about the topic and use it to answer my question.)
Once again it confidently said that it's not possible to provide alternative text for CSS images. 😃

2025-09-21 05:11:02 UTC

Every once in a while I like to test ChatGPT's knowledge. You know, just to see how well it's keeping up with updates in the field and how correct and trustworthy its information is. (Spoiler: it's not.)
Despite sounding extremely confident and like it "knows" what it's saying, it turns out it doesn't. (Shocking, I know!)
The latest example I tried is I asked it how you can provide alternative text for CSS generated images...

2025-08-24 06:36:28 UTC

#TIL from @npub130l…n5e6 over on Bluesky that the `leading-trim` property was renamed to `text-box`—a shorthand for `text-box-trim` (not to be confused with `margin-trim`) and `text-box-edge`
`text-box` does sound more descriptive when you remember that every element in CSS is a box. 📦
#CSS

2025-08-19 05:41:40 UTC

Friends, this is a veeeery long shot but does anyone know if and where I can acquire paper copies of net magazine? I know it's been out of print for years, but I'm wondering if it might still be possible to get a copy of two or three of its issues from 10 years ago. 🥹
I can share the titles/months of the specific issues I'm after if that helps.

2025-08-18 13:29:13 UTC

- reply

This post is directly related to the concept of ‘CSS Carousels’ which I discussed in a previous article: https://www.sarasoueidan.com/blog/css-carousels-accessibility/
I recommend reading the previous article (if you haven't yet) for additional background and context around the concept of scroll markers.

2025-08-18 13:27:04 UTC

New on the blog:
“CSS-only scrollspy effect using scroll-marker-group and :target-current”
https://www.sarasoueidan.com/blog/css-scrollspy/
—
A short post about the new #CSS scroll-target-group property, how to use it with :target-current, and important #accessibility considerations to keep in mind. #a11y

2025-07-24 12:41:46 UTC

- reply

I sighed a little in relief reading that others are against it too. I thought I was the only one at this point.

2025-07-24 12:10:05 UTC

I saw a post on X from someone who works in the productivity space who said that it's "morally repugnant" NOT to use AI.
Incredible that it's becoming the norm for people to shame others and call them stupid on public platforms (someone else literally said that) for not using AI.

2025-07-01 18:04:53 UTC

- reply

I love that this is a broad discussion and love reading your perspective!
Is that similar to the popover example Jake provides in the post? I would say hover-only interactions are a no-go for usability, especially since the aside content may contain interactive elements (like links). This does look like it's a popover then, right?

2025-07-01 17:20:49 UTC

#lazyWeb
Geeky friends, O'friendly geeks,
What are the best practices for optimizing performance for self-hosted videos?
Say someone* wants to ditch third-party services like Vimeo/Youtube and self-host their videos without compromising page #performance Are there any guidelines and best practices?
Aside from choosing an accessible video player, what should someone know/do?
—
*me. someone is me.

2025-07-01 16:57:42 UTC

- reply

This.
<aside> has `complementary` role which we're overriding...
and <section> won't always be exposed as a meaningful element anyway unless it has an accessible name (then it's exposed as a region), and since it doesn't have a name in this use case then it would be exposed as generic.
Again, both OK since the role is being overridden, but for pure semantic purposes I personally prefer <aside>.

2025-07-01 16:19:31 UTC

https://jakearchibald.com/2025/give-footnotes-the-boot/ — in which @npub1dpj…e0jl discusses why you should ditch footnotes on the web, and suggests more appropriate alternatives.
My choice is both <aside role="note"> and the <details> disclosure widget. The choice depends on how long and how tangential the aside is.

2025-05-21 14:42:28 UTC

I'm curious:
When someone asks you, "why does accessibility matter?" or "why is accessibility so important?", what do you usually answer?
P.S. I might quote your response in a post or discussion.

2025-05-19 08:13:44 UTC

- reply

Friendly reminder that today and tomorrow are the last two days to get 25% OFF if you use the code GAAD25. ✨
https://practical-accessibility.today

2025-05-19 08:13:33 UTC

This week I'm starting to work on a new BONUS chapter for the Practical Accessibility course. ✨
This is the first of a few chapters I want to add to the course this year.
#a11y #PracticalA11y

2025-05-06 15:28:34 UTC

[New blog post]
Are CSS Carousels accessible? https://sarasoueidan.com/blog/css-carousels-accessibility
In this post, I share some important insights from examining the accessibility of CSS-only carousels that use new features introduced in the #CSS Overflow Module Level 5 spec.
#a11y

2025-04-14 08:37:12 UTC

- reply

Thank you dear Sara <3

2025-04-14 08:03:07 UTC

For the first time in more than two years I am feeling more like myself again.
It took a hell of a long time to recover from... all the things—including the worst burnout I've ever been through.
But I'm finally at a point where I can *finally* say: I'm back! 🤗

2024-09-08 09:00:03 UTC

- reply

also thank you! Glad you enjoyed the talk :)

2024-09-08 08:59:51 UTC

- reply

It's not a joke 😭 it's the other cascade. How CSS cascades to the a11y layer. The reason I and others laughed is that the "normal" cascade is already considered "bad" to devs who don't understand and love CSS. So this was like "there's another cascade, too".

2024-09-07 13:34:26 UTC

Periodic reminder that "wrapping the <label> around the <input> is fine, and is sufficient for conformance on its own, however adding explicit association with` for` and `id` is still necessary in practice."
Details: https://www.tpgi.com/should-form-labels-be-wrapped-or-separate/
—
"Both Dragon Naturally Speaking for Windows, and Voice Control for macOS and iOS, don’t recognize implicit association, so the Click email address command wouldn’t work." @npub15yr…pa64
#a11y #HTML
https://cdn.masto.host/frontendsocial/media_attachments/files/113/096/526/907/790/809/original/4d3542e1f77f5d69.png

2024-09-02 15:51:34 UTC

Google a product. Find it on a website. Buy, or don't buy a product—just stay long enough on the website to indicate interest.
Open Instagram. All sponsored posts are about that product and similar ones.
I hate Google and Meta.

2024-08-20 15:42:50 UTC

The "State of CSS" survey is now out https://survey.devographics.com/en-US/survey/state-of-css/2024
This is literally the only community survey I've participated in every year for the past several years. If you can spare 15–20 minutes, please take it and help influence the future of #CSS.