A blog about web development, HTML, CSS, JavaScript, and web accessibility.

aria-haspopup and screen readers

I read Steve Faulkners “hasPopup hasPoop” where he mentions differences in what screen readers announce when dealing with the aria-haspopup attribute. I wanted to know how that manifests used on a button.

Visually hidden links with 0 dimensions

If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0. I’ve always wondered why.

O dialog focus, where art thou?

Here’s a job interview question for you: When you click a button and call the showModal() method to open a modal <dialog>, where does the focus go by default, and how can you move it elsewhere?

the article element and screen readers

I wanted to know how and if common screen readers expose the <article> element.
Here are my results:

the details element and in-page search

An important factor in terms of UX and accessibility for deciding whether the <details> element is the right solution for a problem is the find-in-page behaviour.

form and search landmarks

I wanted to know how well common screen readers and browsers support search and form landmarks. Here are my results:

Cascade Layers are useless*

*if you don‘t understand the problems they solve and use them in combination with other solutions that tackle the same challenges albeit less elegantly and with the downside of limiting you in taking full advantage of selectors, one of the coolest features in CSS, and if you ignore the fact that they can help you organise and manage your own and third-party code.

Day 101: scoping

Similar to container queries or cascade layers, we have another new impactful feature in CSS: scoping.

Syntax podcast episode 623: “Nothing in CSS” errata

I just listened to the Syntax podcast for the first time because they were discussing topics near and dear to my heart, HTML and CSS. The episode is called “Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset”, and they’re talking about all the things that can be 0, none, or hidden in CSS and HTML. Super interesting stuff, but unfortunately, they got some things wrong. The don‘t have a comment section, so I’m commenting on the episode here in case someone else gets confused by their misinformation.

CSS! CSS! CSS!

I just came home after three beautiful days in Amsterdam, where I gave a talk at the CSS Day conference. I’ve watched many inspirational and engaging presentations and had many interesting conversations. My biggest takeaway: The CSS community needs you!