@SaraSoueidan@front-end.social
@SaraSoueidan@front-end.social avatar

SaraSoueidan

@SaraSoueidan@front-end.social

Inclusive design engineering and training • HTML, CSS, a11y, progressive enhancement advocate • Eco-minimalist.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

SaraSoueidan, to accessibility
@SaraSoueidan@front-end.social avatar

✨ New on the blog:

"A guide to designing accessible, WCAG-conformant focus indicators"

https://sarasoueidan.com/blog/focus-indicators/


Completely rewritten and updated to reflect the most recent changes in WCAG 2.2 criteria.

SaraSoueidan, to accessibility
@SaraSoueidan@front-end.social avatar

👋🏻 I published a chapter from the course on my blog: An extensive guide to ARIA Live Regions—what they are, how to use them, & how not to.

Accessible Notifications with ARIA Live Regions

🔗Part 1 https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/

🔗Part 2 https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

The Web Sustainability Guidelines (WSG) 1.0 https://w3c.github.io/sustyweb/

...best practices based on measurable, evidence-based research for designing & implementing digital products & services that put people and the planet first. 🍀🙌🏻

Introductory article: https://www.w3.org/blog/2023/introducing-web-sustainability-guidelines/

SaraSoueidan, to accessibility
@SaraSoueidan@front-end.social avatar

Friends! It’s Monday. And this week is Global Accessibility Awareness Day ()! You know what that means.

📢 I'm having a GAAD SALE

Starting today, you can get the Practical Accessibility course at 25% OFF 🎁 ⤵️

https://practical-accessibility.today

The sale ends on May 20th. ⏳

SaraSoueidan, to CSS
@SaraSoueidan@front-end.social avatar

The State of CSS 2023 survey results are live!

https://2023.stateofcss.com/en-US/

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

@alastc @yatil since much of my previous discussions around this topic happened with you two, wanted to ping you here (too) and let you know that I published a new/updated version of the accessible focus indicators article:
https://sarasoueidan.com/blog/focus-indicators

Instead of explaining one SC, this version explains how 5 criteria determine the a11y requirements.

Since the article is linked in the Understanding doc, ur input/feedback is invaluable to ensure it's 💯.

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

✨ I'm excited to announce that I'm joining @cssdayconf again to give a talk about my favorite front-end topics: accessibility and CSS (and more 😉)

cssday.nl/2024#speakers 👀

June 6–7th inshallah, Amsterdam 🛶

SaraSoueidan, to accessibility
@SaraSoueidan@front-end.social avatar
SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

Reading the accessibility posts on CSS-tricks feels like torture. It almost physically hurts. 😣

The amount of misinformation being spread is insane. And the worst part is that the blog's previous popularity is helping spread this misinformation. We seriously need an intervention at this point.

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

Melted cheese is one of life's greatest pleasures.

SaraSoueidan, to CSS
@SaraSoueidan@front-end.social avatar

"Where utility classes come in is they allow you to make occasional exceptions to these generalized styling rules.

[..] Utility-first CSS is exception-first CSS. And that’s not how exceptions work, in or in general." @heydon

👉🏻What is Utility-first CSS?

https://heydonworks.com/article/what-is-utility-first-css/


I really enjoyed reading this article, especially the ending. 🍿

SaraSoueidan,
@SaraSoueidan@front-end.social avatar

Twitter really doesn't disappoint. I love how I'm always (passive-aggressively) expected to explain why the author of an article I shared thought the way they did or did what they did... just because I shared their article.

And coincidentally this only happens when I share articles that criticize utility-first CSS or Tailwind.

Shocking.

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

Photoshop is now available on the web

http://photoshop.adobe.com

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

I've read, on average, one book per week for the past 13 weeks. All non-fiction. 📚

I started book this week. 📖


What book(s) are you currently reading that you would recommend? The more practical, the better.

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

I haven't blogged regularly in a long while (in about 2 years, actually, since the course).

I'm now slowly getting into the flow of things, and I have a lot of ideas for topics to write about. Too many.

So I'm wondering: what kind of topics do you wish I'd write more about?

SaraSoueidan,
@SaraSoueidan@front-end.social avatar

@tomayac I think these two course chapters that I recently published on my blog might answer a lot of those questions:

https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1/

https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/

I have a draft to elaborate on one of the examples in the chapters with a working demo, and I guess I could elaborate more on other more specific ones. The course also contains chapters on form validation that also tackle dynamic message announcements using focus management.

SaraSoueidan, to accessibility
@SaraSoueidan@front-end.social avatar

"let's not forget, accessibility is about equality. It's about creating a society where everyone has the same access to products and opportunities. And we can’t do this if nobody understands what work needs to be done, or who is best placed to do it!" @craigabbott

https://craigabbott.co.uk/blog/stop-trying-to-recruit-unicorns-with-acorns/

This is a fantastically well written post By Craig. Well worth the read for everyone who works or wants to work in the accessibility field.

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

Last year I was taking a dive into web components (before I started working full-time on the course) and I was wondering why they weren't getting enough traction or attention even though they're great. I'm glad to see more interest and more content pop up talking about them. I'll be sharing my own content once I'm back to my "regular schedule" after the course launch. 😎

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

I got a 485 pts knowledge score on this year's survey. How much did you get?

Take the survey here: https://survey.devographics.com/en-US/survey/state-of-html/2023?source=post_survey_share

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

A small but helpful change I just made to the course website is replacing the typical “Skip to main content” skip link with two more helpful ones:

• Skip to video
• Skip to transcript

If you navigate using a keyboard, you can more quickly skip to the chapter format that you prefer. ⏬

video/mp4

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

Friends, what are you using to cross-post your posts across social media platforms?

SaraSoueidan, to accessibility
@SaraSoueidan@front-end.social avatar

Best intention barriers (ARIA edition)

🔗 https://marcus.io/blog/best-intention-barriers-aria


"Instead of not being aware about the problematic approach the developer chose, they try to improve accessibility but – unbeknownst to them - create new barriers in the first place doing it." @marcus

SaraSoueidan, to random
@SaraSoueidan@front-end.social avatar

Yesterday, I added chapter markers to the Practical Accessibility course videos. 🔖

⏩ If you’re taking the course, you can now skip to specific sections within a video just like you can skip to sections in the text version of a chapter. ⏪

This has been on my todo list for weeks. 🙈

More enhancements to the course website are also in the works.

Aaand I'll finally be announcing the official course launch date soon, too. ✨🗓️

sarajw, (edited ) to random
@sarajw@front-end.social avatar

From years of being bored, unsatisfied, or struggling in various jobs and industries, I finally feel like I have come home.

I'm so happy to join an industry with such brilliant, interesting, and gloriously nerdy people - I mean this in the best possible way!

I have attended both Beyond Tellerrand Düsseldorf and CSS Day 2024 and, wow. Huge thank yous to the organisers, speakers, and to the many warm and funny fellow attendees I had the joy to socialise with.

This is my church.

SaraSoueidan,
@SaraSoueidan@front-end.social avatar

@sarajw @robinwhittleton I did! I love them! Great work!

csscade, to random

Okay, so when making a popover I think the logic should go something like this:

  1. Use title if the content of the popover is just text.

  2. Use the popover attribute if the content is more than plain text and like a menu of options or something.

  3. Use <dialog> if you need to force the user to make a decision or block all other interactions on the page.

https://www.csscade.com/popover-api

SaraSoueidan,
@SaraSoueidan@front-end.social avatar

@csscade Don't use the title attribute. It's not useful for most users and not accessible for many of them. https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/#:~:text=It%20is%20primarily%20displayed%20as,able%20to%20interact%20with%20it.

Using the popover attribute for plain text is good because it provides the interactions needed for all users to toggle and see the text. That's not possible with title.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • JUstTest
  • thenastyranch
  • magazineikmin
  • mdbf
  • GTA5RPClips
  • everett
  • rosin
  • Youngstown
  • tacticalgear
  • slotface
  • ngwrru68w68
  • kavyap
  • DreamBathrooms
  • khanakhh
  • megavids
  • tester
  • ethstaker
  • cubers
  • osvaldo12
  • cisconetworking
  • Durango
  • InstantRegret
  • normalnudes
  • Leos
  • modclub
  • anitta
  • provamag3
  • lostlight
  • All magazines