Sara Soueidan
@sarasoueidan.com
🇱🇧 Independent UI engineer, speaker, author, and educator / Accessibility advocate / Minimalist
• My accessibility course: https://practical-accessibility.today
• Blog https://sarasoueidan.com
• Newsletter: https://www.sarasoueidan.com/newsletter
• My accessibility course: https://practical-accessibility.today
• Blog https://sarasoueidan.com
• Newsletter: https://www.sarasoueidan.com/newsletter
Pinned
Sara Soueidan
@sarasoueidan.com
· May 15
Introducing the Practical Accessibility course
This is "Introducing the Practical Accessibility course" by Sara Soueidan on Vimeo, the home for high quality videos and the people who love them.
vimeo.com
🧵 (Re)introducing the Practical Accessibility course:
✨ It is a comprehensive, self-paced, online video course designed to demystify web accessibility and to equip you with the knowledge you need to create more accessible websites & apps today 💪🏻
practical-accessibility.today ⤵️
vimeo.com/1082908437
✨ It is a comprehensive, self-paced, online video course designed to demystify web accessibility and to equip you with the knowledge you need to create more accessible websites & apps today 💪🏻
practical-accessibility.today ⤵️
vimeo.com/1082908437
This Thursday November 13th, I will be joining the OZeWAI (an Australian Web Accessibility initiative) on their Ask The Professionals Webinar to talk all about #ARIA, along with Rafal Charlampowicz and Andrew Downie. The session will be moderated by Russ Weakley.
#a11y
#a11y
OZeWAI - Accessibility testing: ARIA, Ask the Professionals - 13 November 2025
OZeWAI hosts a panel of specialists to share tips and tricks on mobile and app accessibility testing.
events.humanitix.com
November 11, 2025 at 8:21 AM
He has learned to look for water in the bathroom when be wants to bathe.
He went in to the sink and found none. So I got his "bathing plate" and placed it on the floor.
He's now sitting on my right hand—half wet and utterly adorable—as I type this on my phone.
Happy Sunday 🥰
He went in to the sink and found none. So I got his "bathing plate" and placed it on the floor.
He's now sitting on my right hand—half wet and utterly adorable—as I type this on my phone.
Happy Sunday 🥰
November 9, 2025 at 11:38 AM
He has learned to look for water in the bathroom when be wants to bathe.
He went in to the sink and found none. So I got his "bathing plate" and placed it on the floor.
He's now sitting on my right hand—half wet and utterly adorable—as I type this on my phone.
Happy Sunday 🥰
He went in to the sink and found none. So I got his "bathing plate" and placed it on the floor.
He's now sitting on my right hand—half wet and utterly adorable—as I type this on my phone.
Happy Sunday 🥰
Reposted by Sara Soueidan
November 6, 2025 at 5:28 PM
Reposted by Sara Soueidan
Thanks to @sarasoueidan.com's Practical Accessibility course, I'm much more confident explaining the accessibility benefits of using semantic elements where possible... instead of merely saying that's the best practice.
css-tricks.com/explaining-t...
css-tricks.com/explaining-t...
Explaining the Accessible Benefits of Using Semantic HTML Elements | CSS-Tricks
Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?
css-tricks.com
November 6, 2025 at 3:59 PM
Thanks to @sarasoueidan.com's Practical Accessibility course, I'm much more confident explaining the accessibility benefits of using semantic elements where possible... instead of merely saying that's the best practice.
css-tricks.com/explaining-t...
css-tricks.com/explaining-t...
Reposted by Sara Soueidan
Daniela Kubesch wrote her Master's Thesis on "The Impact of Web Accessibility Overlays on the Usability and User Experience for People with Permanent Visual Impairments".
Now we can say "Scientific research has shown that accessibility overlays are ineffective."
overlays.dnikub.dev
Now we can say "Scientific research has shown that accessibility overlays are ineffective."
overlays.dnikub.dev
The Impact of Web Accessibility Overlays | Master's Thesis by Daniela Kubesch
This thesis, published in 2024, investigates the impact of accessibility overlays on the usability and user experience (UX) for individuals with permanent visual impairments. The conducted research…
overlays.dnikub.dev
October 30, 2025 at 12:37 PM
Daniela Kubesch wrote her Master's Thesis on "The Impact of Web Accessibility Overlays on the Usability and User Experience for People with Permanent Visual Impairments".
Now we can say "Scientific research has shown that accessibility overlays are ineffective."
overlays.dnikub.dev
Now we can say "Scientific research has shown that accessibility overlays are ineffective."
overlays.dnikub.dev
Reposted by Sara Soueidan
I don't know what you know already, but a good (free) starting resource is MDN: developer.mozilla.org/en-US/docs/W...
@sarasoueidan.com has a full and practical course: practical-accessibility.today
There is also WAI's resources:
www.w3.org/WAI/roles/new/
@sarasoueidan.com has a full and practical course: practical-accessibility.today
There is also WAI's resources:
www.w3.org/WAI/roles/new/
Resources for Getting Started with Digital Accessibility
To get started learning about digital accessibility, read the Introduction to Web Accessibility.
www.w3.org
November 2, 2025 at 9:07 AM
I don't know what you know already, but a good (free) starting resource is MDN: developer.mozilla.org/en-US/docs/W...
@sarasoueidan.com has a full and practical course: practical-accessibility.today
There is also WAI's resources:
www.w3.org/WAI/roles/new/
@sarasoueidan.com has a full and practical course: practical-accessibility.today
There is also WAI's resources:
www.w3.org/WAI/roles/new/
Today, I let my bulbul out and about. He explored the area around the house where there are also many other wild bulbuls.
November 2, 2025 at 12:06 PM
Today, I let my bulbul out and about. He explored the area around the house where there are also many other wild bulbuls.
📰 W3C Web Content Accessibility Guidelines (WCAG) 2.2 is now approved as ISO/IEC international standard
www.w3.org/press-releas...
www.w3.org/press-releas...
W3C Web Content Accessibility Guidelines 2.2 approved as ISO/IEC international standard
WCAG 2.2 is now ISO/IEC 40500:2025. This standard enables more countries to formally adopt WCAG 2.2. ISO/IEC 40500:2025 is free from the ISO website. Supporting resources and translations are free fro...
www.w3.org
October 31, 2025 at 1:35 PM
📰 W3C Web Content Accessibility Guidelines (WCAG) 2.2 is now approved as ISO/IEC international standard
www.w3.org/press-releas...
www.w3.org/press-releas...
❥ "I ask you, human to human, [..] leave the AI to your quantitative tasks if you have to use it at all. Face the world with your thoughts and enrich them through real-world experience. The best thoughts are the ones that have been felt, anyway."
I don't agree with all the points being made here, but this opening sentence really hits home. 👇
blog.pabloecortez.com/its-insultin...
blog.pabloecortez.com/its-insultin...
October 31, 2025 at 1:26 PM
❥ "I ask you, human to human, [..] leave the AI to your quantitative tasks if you have to use it at all. Face the world with your thoughts and enrich them through real-world experience. The best thoughts are the ones that have been felt, anyway."
Enjoyed this writeup by @dbushell.com about the usability of custom cursors in #CSS
dbushell.com/2025/10/27/c...
When I visited the Wondermake website I was surprised the cursor was that big. I didn't realize it was responding to my OS settings. Neat. Interesting that Windows doesn't do the same.
dbushell.com/2025/10/27/c...
When I visited the Wondermake website I was surprised the cursor was that big. I didn't realize it was responding to my OS settings. Neat. Interesting that Windows doesn't do the same.
Custom Cursor Accessibility
The one where I fat finger with a mouse
dbushell.com
October 31, 2025 at 9:38 AM
Enjoyed this writeup by @dbushell.com about the usability of custom cursors in #CSS
dbushell.com/2025/10/27/c...
When I visited the Wondermake website I was surprised the cursor was that big. I didn't realize it was responding to my OS settings. Neat. Interesting that Windows doesn't do the same.
dbushell.com/2025/10/27/c...
When I visited the Wondermake website I was surprised the cursor was that big. I didn't realize it was responding to my OS settings. Neat. Interesting that Windows doesn't do the same.
I just sent out an issue of my Frontend Field Notes newsletter with a more coherent writeup of this post + links to useful resources on the subject.
📰 You can read the issue on my website: www.sarasoueidan.com/newsletter/i...
✉️ And subscribe for future notes: www.sarasoueidan.com/newsletter/ 📬
📰 You can read the issue on my website: www.sarasoueidan.com/newsletter/i...
✉️ And subscribe for future notes: www.sarasoueidan.com/newsletter/ 📬
October 31, 2025 at 7:37 AM
I just sent out an issue of my Frontend Field Notes newsletter with a more coherent writeup of this post + links to useful resources on the subject.
📰 You can read the issue on my website: www.sarasoueidan.com/newsletter/i...
✉️ And subscribe for future notes: www.sarasoueidan.com/newsletter/ 📬
📰 You can read the issue on my website: www.sarasoueidan.com/newsletter/i...
✉️ And subscribe for future notes: www.sarasoueidan.com/newsletter/ 📬
What'd I miss?
components know:
- user stuff
- device stuff
- app stuff
- design stuff
- what stuff is in them
- what stuff they're inside
- etc
It's amazing how much a component can know on the web, and I'm going to try and list it all out. Help me 🤓
#CSS
nerdy.dev/components-c...
components know:
- user stuff
- device stuff
- app stuff
- design stuff
- what stuff is in them
- what stuff they're inside
- etc
It's amazing how much a component can know on the web, and I'm going to try and list it all out. Help me 🤓
#CSS
nerdy.dev/components-c...
Web components know about the user, device, variables, layout and more · October 30, 2025
As Miriam Suzanne says "components know stuff," but like, how much stuff?
nerdy.dev
October 31, 2025 at 4:24 AM
Reposted by Sara Soueidan
I bought this this morning and I’m over half way through it. Probably the best $25 I’ve spent in years. I use web components for my blog posts and have known for a while that there are big gaps in my knowledge, and this has filled a whole bunch of them.
Online on a weekend? You can grab access to my web components course for $25 today and tomorrow. Big ol’ discount. Use the code OCT25-26.
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
(And as usual, if you need further accommodation, just use the email form and we’ll work it out.)
scottjehl.com/learn/webcom...
Web Components Demystified online course | Scott Jehl, Web Designer/Developer
A comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.
scottjehl.com
October 26, 2025 at 5:11 PM
I bought this this morning and I’m over half way through it. Probably the best $25 I’ve spent in years. I use web components for my blog posts and have known for a while that there are big gaps in my knowledge, and this has filled a whole bunch of them.
Since we're on the subject: I wish the <source> element also accepted an alt attribute (or similar) so we can provide suitable and more descriptive alt text for each image. Maybe then the browser could populate the <img>'s alt text with the text we provide for each source.
The alternative, if you don't want to keep the same images in both light and dark mode, can be to use feature queries in the element and render the image suitable for each mode. codepen.io/SaraSoueidan...
A video demonstrating the img in the Codepen change when I switch modes on macOS:
A video demonstrating the img in the Codepen change when I switch modes on macOS:
October 29, 2025 at 2:40 PM
Since we're on the subject: I wish the <source> element also accepted an alt attribute (or similar) so we can provide suitable and more descriptive alt text for each image. Maybe then the browser could populate the <img>'s alt text with the text we provide for each source.
I'm sorry but making content images semi-transparent / reducing their opacity in dark mode is not an inclusive design strategy. It makes the images less accessible—which is more problematic when the images contain text. & the fact that they need to be hovered to become fully visible makes it worse.
October 29, 2025 at 2:20 PM
I'm sorry but making content images semi-transparent / reducing their opacity in dark mode is not an inclusive design strategy. It makes the images less accessible—which is more problematic when the images contain text. & the fact that they need to be hovered to become fully visible makes it worse.
Reposted by Sara Soueidan
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Ex-Masonry Display Type Keyword Poll
See https://github.com/w3c/csswg-drafts/issues/12022 for context.
This poll intentionally leaves out `masonry` as an option, see https://github.com/w3c/csswg-drafts/issues/12022#issuecomment-34172962...
docs.google.com
October 27, 2025 at 7:53 PM
There's a new #CSS Working Group poll to get feedback on different names for the infamous 'Pinterest' layout.
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
- Since it uses many of the grid-* properties, `grid` will be in the name somewhere
- We don't use metaphors in CSS names, so `masonry` is not listed here
docs.google.com/forms/d/e/1F...
Reposted by Sara Soueidan
I'd recommend @tink.uk's talk from FFConf last year: ffconf.org/talks/2024_l... (sorry for the qusai FFConf promotion, but the talk is very very good)
AI & Accessibility: The Good, the Bad... - ffconf.org
Léonie Watson explores the realities of AI and accessibility, separating fact from hype at FFConf.
ffconf.org
October 28, 2025 at 4:57 PM
I'd recommend @tink.uk's talk from FFConf last year: ffconf.org/talks/2024_l... (sorry for the qusai FFConf promotion, but the talk is very very good)
Reposted by Sara Soueidan
October 28, 2025 at 12:21 PM
Reposted by Sara Soueidan
CSS: Has the idea of an Open Graph media type been explored? Like print? For example,
@media opengraph {
/* @media layouts for OG sizes here */
}
Feels like the social preview for a given URL should just be another CSS layout. Setting up screenshot services of layouts for meta tags is so 🫠
@media opengraph {
/* @media layouts for OG sizes here */
}
Feels like the social preview for a given URL should just be another CSS layout. Setting up screenshot services of layouts for meta tags is so 🫠
October 28, 2025 at 2:44 PM
CSS: Has the idea of an Open Graph media type been explored? Like print? For example,
@media opengraph {
/* @media layouts for OG sizes here */
}
Feels like the social preview for a given URL should just be another CSS layout. Setting up screenshot services of layouts for meta tags is so 🫠
@media opengraph {
/* @media layouts for OG sizes here */
}
Feels like the social preview for a given URL should just be another CSS layout. Setting up screenshot services of layouts for meta tags is so 🫠
Reposted by Sara Soueidan
This will cause a lot of confusion. In Europe, new services must now be WACAG 2.1 AA compliant by law, but at the same time, this new ARIA + Atlas will create problems because, obviously, companies need to hop on the stakeholder-AI-hype train at all costs.
October 28, 2025 at 3:08 PM
This will cause a lot of confusion. In Europe, new services must now be WACAG 2.1 AA compliant by law, but at the same time, this new ARIA + Atlas will create problems because, obviously, companies need to hop on the stakeholder-AI-hype train at all costs.
Reading an article about AI and accessibility just because I'm trying to maintain an open mind towards AI in accessibility.
Unsurprisingly, the article concludes that AI cannot give you accurate answers and that you still need human expertise.
Unsurprisingly, the article concludes that AI cannot give you accurate answers and that you still need human expertise.
October 28, 2025 at 2:40 PM
Reading an article about AI and accessibility just because I'm trying to maintain an open mind towards AI in accessibility.
Unsurprisingly, the article concludes that AI cannot give you accurate answers and that you still need human expertise.
Unsurprisingly, the article concludes that AI cannot give you accurate answers and that you still need human expertise.
Incidentally, I said this exact thing in the update for the course chapter I'm editing today. If you're enrolled in the course, you'll get the update very soon.
You can make an element look like something it's not, but under the hood it's still NOT that thing you made it look like.
Making
Making
&
look like tabs doesn't make them tabs. css-tricks.com/pure-css-tab... — tabs have specific semantic and behavior requirements. #a11y
Pure CSS Tabs With Details, Grid, and Subgrid | CSS-Tricks
Can we use the <details> element as the foundation for a tabbed interface? Why yes, we can!
css-tricks.com
October 28, 2025 at 2:38 PM
Incidentally, I said this exact thing in the update for the course chapter I'm editing today. If you're enrolled in the course, you'll get the update very soon.
#HTML is only as accessible as you write it.
Semantics determine what an element is, and browsers provide some interactive behavior for native interactive elements for free.
But just because two patterns have similar behavior doesn't make them semantically the same.
Semantics determine what an element is, and browsers provide some interactive behavior for native interactive elements for free.
But just because two patterns have similar behavior doesn't make them semantically the same.
October 28, 2025 at 2:29 PM
#HTML is only as accessible as you write it.
Semantics determine what an element is, and browsers provide some interactive behavior for native interactive elements for free.
But just because two patterns have similar behavior doesn't make them semantically the same.
Semantics determine what an element is, and browsers provide some interactive behavior for native interactive elements for free.
But just because two patterns have similar behavior doesn't make them semantically the same.
Ugh. "content within a `
` element with `display: contents` is not accessible when expanded." bugs.webkit.org/show_bug.cgi... — sadly unsurprising for Safari considering all the history that Adrian documents in his post.
#a11y
#a11y
October 28, 2025 at 2:20 PM
Ugh. "content within a `
` element with `display: contents` is not accessible when expanded." bugs.webkit.org/show_bug.cgi... — sadly unsurprising for Safari considering all the history that Adrian documents in his post.
#a11y
#a11y