Michaël Vanderheyden

Michaël Vanderheyden

@th3s4mur41.me

Lead UX Engineer & Accessibility Specialist @ cycos, an Atos Business #CPWA #WebDev #A11y #CSS Martial arts lover | Shotokan Karate black belt | BJJ practitioner | Bikejöring https://th3s4mur41.me

98 followers192 following337 posts

Pinned

Is your "Back to Top" link breaking your UX? href="#" might be valid HTML, but it creates a major accessibility focus desync—scrolling the screen for sighted users while trapping keyboard focus at the bottom. Read why your linter is right to hate it: th3s4mur41.me/blog/href-ha...

th3s4mur41.mehref="#" and the Focus TrapAn empty href="#" is valid HTML — but it scrolls the page without moving keyboard focus, silently breaking WCAG 2.4.3. Here's why, and the one-line fix.

Michaël Vanderheyden reposted

Interested in setting aside the magical prompter and learning some web standards skills the old fashioned way? You can sign up for my online Web Components course for free until Oct 31 with the code markitzero. If you find it useful, please consider letting folks know! 🎃

scottjehl.comWeb Components Demystified online course | Scott Jehl, Web Designer/DeveloperA comprehensive, premium course about building dynamic, fast, resilient apps with standard web components.

Michaël Vanderheyden reposted

CSS-Tricks has a new owner! Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that. https://css-tricks.com/css-tricks-has-a-new-owner/

css-tricks.comCSS-Tricks has a new owner!Yes, I've got the keys to the castle, so to speak. And, even after 12 years of working on the site, I'll admit I'm a little overwhelmed and nervous about that.

Michaël Vanderheyden reposted

Tomorrow, October 16th, marks Practical Accessibility's third birthday. 🎂 To celebrate, I am gifting everybody 25% off for the next 48 hours 🎁 Individual and team licenses alike! The discount is automatically applied during checkout—no code is needed. 👉🏻 practical-accessibility.today Enjoy! #a11y

practical-accessibility.todayThe Practical Accessibility CourseA get-right-down-to-it online course for Web designers and developers who want to start creating more accessible Web user interfaces and digital products today

Michaël Vanderheyden reposted

Link Parameters is the thing that gives you the ability to style embedded external SVGs. Something many have wanted to do for a long time! If you want to show your support of this, give these 2 issues a thumbs-up and comment: 💬 github.com/web-platform... 💬 github.com/web-platform...

Michaël Vanderheyden reposted

I’ve been banging the drum about *not* using ARIA menu roles for site navigation for nearly a decade. I’ve just updated my 2017 post with what has become my general point-by-point refutation when I see them proposed: adrianroselli.com/2017/10/dont... #HTML #accessibility #a11y #ARIA

adrianroselli.comDon’t Use ARIA Menu Roles for Site NavOnce again, the advice is in the title of the post. But I will ramble anyway since you scrolled this far. First run with the advice, and then review some background on ARIA and how navigation and menu...

Michaël Vanderheyden reposted

The time to ramp up your scroll-driven animations skills is **NOW** Go check scroll-driven-animations.style for and free 10-part video course created by yours truly, as well as a bunch of tools and demos.

scroll-driven-animations.styleScroll-driven AnimationsA bunch of demos and tools to show off Scroll-driven Animations

Michaël Vanderheyden reposted

The CFP is open for 10 more days. So far, I have only 11 submissions, but I need at least 24. So, please share your ideas! First-time authors are very welcome!

Friends, it's that time of the year: Once again, I'm asking you to help me create another amazing HTMHell Advent Calendar by writing about HTML. The CFP is open until October 3! docs.google.com/forms/d/e/1F...

Michaël Vanderheyden reposted

A single HTML attribute can transform your site's screen reader accessibility... Setting the lang attribute correctly ensures proper pronunciation instead of gibberish delivered with a bad accent. Check out my new post to learn why it matters: th3s4mur41.me/blog/a11y-ti...

th3s4mur41.meLanguage Attribute: Setting the Right ContextLearn how the HTML lang attribute improves screen reader pronunciation, supports multilingual accessibility, and enables language-aware testing across browsers

Michaël Vanderheyden reposted

🎨 Ever wondered why oklch() is so odd? Why adjusting L doesn't produce good color ramps? And why TF is L=100% not white?! I just wrote a thorough explanation of why this happens¹: github.com/web-platform... 👍 Upvote if you want this fixed in browsers in 2027! ¹ Spoiler: it’s lack of gamut mapping

EnergyID is deprecating their legacy webhooks at the end of the month! ⚠️ To keep your setup running, I've replaced hw2energyid with hw-hooks (available on npm & Docker). Check out the update and migration details on @npmx.dev: npmx.dev/package/hw-h... and @github.com: github.com/Th3S4mur41/h...

github.comGitHub - Th3S4mur41/hw-hooks: A tool to synchronize data from HomeWizard to EnergyIDA tool to synchronize data from HomeWizard to EnergyID - Th3S4mur41/hw-hooks

Michaël Vanderheyden reposted

🚀 Container style queries are baseline; New attr() capabilities are nearly there. Neat apart, but together they change how we can wire up components. Practice will make perfect, and I still need to rewire my brain for this combo. So, time to start that rewire. utilitybend.com/blog/contain...

utilitybend.comContainer style queries and advanced attr(): rethinking how to wire up my components in CSS | utilitybendWiring HTML attributes into CSS with advanced typed attr(), and letting container style queries pass that state down to child components.

Michaël Vanderheyden reposted

Why is it not the law that if I click a link in your app it just opens in my damn browser. Never has an in-app browser done anything useful.

Michaël Vanderheyden reposted

Interop 2027 proposals are officially open → goo.gle/4xh1tEY Which web platform features need better cross-browser compatibility next year? Submit your ideas before September 23rd. Also be sure to like and comment on submitted ideas.

Great post on color contrast! Combining WCAG + APCA is the way to go. Still, always test your combos in a color blindness simulator. Math only gets you so far, and visual tests often reveal surprising fails for certain use cases!

jess ♿🇨🇦@oddi-jessica.bsky.social

WCAG Contrast (Enhanced): Why APCA Alone Isn't Enough. LinkedIn Article: shorturl.at/tIJEk #A11y #ColourContrast #WCAG #APCA #DisabledDesigner #Accessibility

Michaël Vanderheyden reposted

New Things You Should Know About HTML Here in Mid 2026 The foundational language of the web is getting plenty of love lately! While HTML moves a bit more slowly than its buddies, CSS and JavaScript, that tends to be a good thing. I'm not gonna do, like, in here. That's too basic for you. Tha

blog.master.devNew Things You Should Know About HTML Here in Mid 2026The foundational language of the web is getting plenty of love lately! While HTML moves a bit more slowly than its buddies, CSS and JavaScript, that tends to be a good thing. I’m not gonna do, like,…

Michaël Vanderheyden reposted

Figure, video, figcaption, and accessibility | What makes a video element accessible is captions, descriptions, and a transcript. When those aren't available, what options remain for providing an accessible name for a video element? | schalkneethling.com/posts/figure...

schalkneethling.comFigure, video, figcaption, and accessibilityWhat makes a video element accessible is captions, descriptions, and a transcript. When those are out of reach, what are the remaining options for giving a video element an accessible name?

Michaël Vanderheyden reposted

In CSS you can feature detect support for selectors, properties + values, and at-rules using `@supports`. But how do you feature detect a change to an underlying implementation, or two existing properties suddenly working together? Enter `named-feature()` … → brm.us/named-feature

brm.usFeature Detecting “Undetectable” CSS Features with @supports named-feature()In CSS you can feature detect support for things like selectors, properties + values, and at-rules using @supports. But how do you feature detect a change to an underlying implementation, or two exist...

Michaël Vanderheyden reposted

It's really weird that the response to JPEG XL shipping is "yesss fuck WebP!" Like, we've had AVIF for years, and it outperforms JPEG XL in almost all web use-cases.

Michaël Vanderheyden reposted

Help me out: I’m looking for some examples of full-page skeleton screens and loading states that are out there. Care to share your favorite examples with me? (There are a lot of examples that have skeleton screens on a component level, but I’m having trouble finding proper full-page ones)

Michaël Vanderheyden reposted

Syntax aside, would you want layers that can win from unlayered styles as Dave describes here? Favorite this post to cast your vote. RT to reach more people.

Dave Rupert@davatron5000.bsky.social

what about `@reyal` that works the opposite of `@layer` where un-reyal'd styles are the weakest?

I'm with @bram.us on this one. Switching color mode shouldn’t feel like a guessing game. 3-state toggles (Light / Dark / System) win every time over 2-state toggles with hidden logic in my book. Clear UX always beats unpredictable behavior!

Remember when preprocessors were the only way to write modular CSS? Native CSS mixins are now being prototyped in Chromium! 🚀 I revisited my 2020 post on Sass/Less mixins to see what changes when reusable style blocks move straight into the browser. th3s4mur41.me/blog/mixins-...

th3s4mur41.meMixins: From Preprocessors to Native CSSNative CSS mixins in Chromium: practical examples, runtime differences vs Sass/Less, flag-based testing, DevTools gaps, and where the draft spec goes further.

Michaël Vanderheyden reposted

Times where attribute selector were bad for performance are long gone... Use attributes directly in CSS instead of duplicating them in classes.

Álvaro Montoro@alvaromontoro.com

Don't use a class for that! Developers love classes, but HTML already has many attributes that can be used to identify and select elements, why not take advantage of them and get some extra benefits too? alvaromontoro.com/blog/68107/d... #html #css #webdev

Michaël Vanderheyden reposted

Replying to @bram.us

In brm.us/styling-the-... I jotted down a quick intro to the concepts that we’ll be introducing: 1. Define Routes with @route 2. Query the navigation with @navigation 3. Select the navigation trigger with :nav-source 4. Advanced link selection with :link-to() (And url-pattern() woven throughout)

brm.usStyling the Navigation: Declarative Route and Navigation Matching in CSSOne of the things that we at Chrome have been thinking about for a while now is a way to do declarative route and navigation matching in CSS. Together with Noam Rosenthal and David Baron I’ve been wor...

Michaël Vanderheyden reposted

QQ about Dark Mode Toggles on websites How many options do you show to users? - Three values: System, Light, or Dark - Two values: Light, Dark (with one of them mapping to “System” behind the scenes). Why the one or the other? (I have an opinion about it, but I’m looking for external input)