Manuel Matuzovic
As seen in:
Medium,
O'Reilly Media,
Smashing Magazine,
css-tricks.com,
SitePoint,
A List Apart,
Golem.de
Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Manuel Matuzovic
Don't put aria-label on generic elements like divs
posted on 22.05.2026 This post is part of a series called #WebAccessibilityFails, where I collect common issues I find in accessibility audits so that you can avoid them in the future. The title already tells most of the story, but here's why you must avoid labeling generic elements like divs or spans using aria-label or aria-labelledby. <div aria-label="News"> … </div> Don't do this Looking at the ARIA spec, you'll find section "5.2.8.6 Roles which cannot be named (Name prohibited)".
Better defaults for popovers
posted on 16.01.2026 I recently added a rule to my reset style sheet UA+ that I wanted to share with you. When you add a popover to a page and open it, it looks similar to a dialog in terms of its styling. It's positioned at the center of the viewport. Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. That's okay, but I would argue that in most cases you want your popovers aligned closely with the button that controls them.
React: Barrierefreie Web Components erstellen
React hat vor einiger Zeit Version 19 seines Frameworks vorgestellt, das mit vielen spannenden Neuerungen kommt, unter anderem mit der langersehnten Unterstützung für Web Components. Wir nehmen den React-Release zum Anlass, um über die Barrierefreiheit von Web Components zu sprechen, um die grundsätzliche Frage zu beantworten, ob es überhaupt möglich ist, sie barrierefrei einzusetzen – und wenn ja, wie das geht.
Not all automated testing tools support Shadow DOM in web components
posted on 02.01.2024 There isn't much more to say; it's all in the title. Many automated testing tools are a collection of JavaScript functions you run on a page. Most of those rely on querying the DOM. If a tool doesn't consider shadow trees, it only catches accessibility errors in the Light DOM, which may give you a wrong sense of safety and potentially affect your users. That's one more reason not to rely on automated testing only.
Container Style Queries
One of the most requested features in CSS was container queries, the ability to query the size of a parent container. Before container queries, you could only query the size of the viewport. That worked well and still does, allowing you to create responsive websites, but it's really just a compromise because, in most cases, we're interested in the size of our parent container, not the size of the viewport. That’s why container queries are such a critical addition to CSS.
Totally remdom, or How browsers zoom text
posted on 03.11.2023 Last week, I lied to my students. After I explained how the rem unit worked, I told them that they could compare px and rem by increasing the font size in their mobile browsers and see how it affects text zoom. Before I said that, we created a simple test page with two paragraphs and two rules.
Web Components Accessibility FAQ
posted on September 7., 2023 I specialize in HTML and CSS, but I also write JS. Especially in the last year or so, I wrote quite a lot of JavaScript because we decided to port the front end of one of my clients to web components. When I first learned about web components, I had a lot of questions, especially regarding accessibility. While I found answers to many of them, I didn’t know everything I would’ve wanted to know.
Web Accessibility Cookbook
Book description Frontend developers have to consider many things: browser compatibility, usability, performance, scalability, SEO, and other best practices. But the most fundamental aspect of creating websites is one that often falls short: accessibility. Accessibility is the cornerstone of any website, and if a website is inaccessible, users won't be able to interact with it, obtain information, sign up for services, or buy products.
CSS color functions and custom properties
posted on January 12., 2023 I know I’m really late to the party, but I finally understood why people find color functions like hsl(), hwb(), or lab() so appealing. There are many reasons, but one of them is that in combination with custom properties, working with color functions is so much easier, cleaner, and understandable compared to working with hex colors or rbg(). Here's an example. Let's say we have a simple status component.
I broke the rules.
posted on October 25., 2022 When I opened Twitter on Monday morning, I saw this: After careful review, they determined that my account broke the Twitter Rules. Okay, let's have a look at the rules to get an idea of what could've caused this ban.
Manuel Matuzovic: max() Trickery | CSS-Tricks
By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif.
100 Days Of More Or Less Modern CSS
posted on September 26., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
Day 12: max() trickery
posted on October 11., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it. I saw this interesting one-liner in a demo by Temani Afif.
Day 6: the :has() pseudo-class
posted on October 3., 2022 It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it. :has() allows you to check whether a parent element contains specific children.
Parents counting children in CSS
posted on August 29., 2022 The other day I was driving home when suddenly it hit me: We can use :has() to determine how many children a parent element has. You might be thinking that Heydon Pickering already solved that 7 years ago in Quantity Queries for CSS, but that's not what I'm talking about.
Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers | CSS-Tricks
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit. When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows, and grid-template-areas. And from there, the next step is to place items inside the grid. This is the classic approach that should be used and I also recommend it.
Please, stop disabling zoom
posted on May 5., 2022 I know that you’re not supposed to tell people what to do, but in this particular case I’m really tempted because recently I’ve noticed that a lot of websites are preventing users on mobile to zoom.
How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List — Smashing Magazine
22 min read Tools, JavaScript, Accessibility Share on Twitter, LinkedIn Quick summary ↬ Ever wondered how to build a paginated list that works with and without JavaScript? In this article, Manuel explains how you can leverage the power of Progressive Enhancement and do just that with Eleventy and Alpine.js. Most sites I build are static sites with HTML files generated by a static site generator or pages served on a server by a CMS like Wordpress or CraftCMS.
Cascade Layers: First Contact
posted on January 28., 2022 Earlier this week I learned about CSS Cascade Layers and now I’m all hyped up because I really like the concept. I’m eager to find out how we can use them to improve and rethink the architecture of our styles. I will not explain how CSS Cascade Layers work because Bramus and Stephanie have already done that and they did it much better than I ever could. I just want to get my feet wet and share my first impressions. If you’re new to the topic, read their articles first.
Web Security Basics: XSS
posted on January 28., 2022 I decided to learn more about areas of web development I don’t know a lot about. You know,…stuff like SEO and web security. I’ll share my findings here on my blog and I’ll try to do as much research as possible, but please keep in mind that I’m a noob concerning these topics. I began watching Feross Aboukhadijeh’s fantastic Web Security lecture, which inspired me to learn more about web security. This first post is about Cross Site Scripting (XSS).
CSS Specificity Demo
posted on January 26., 2022 I built an interactive demo to illustrate how specificity in CSS works. Press the “Add selector” and “Remove selector” buttons to add or remove a selector in the list of declarations and see how the background color changes accordingly. Each selector will be added to the top of the list to prove that it has a higher specificity than the previous selector.
How To Build An Expandable Accessible Gallery — Smashing Magazine
11 min read Tools, CSS, CSS Grid, Accessibility Share on Twitter, LinkedIn Quick summary ↬ In this article, we’ll be looking at how to set up a gallery that is expandable as well as accessible. One of the use cases for using CSS Grid is to display a gallery of images, but a gallery on its own may not be that exciting. We could, for example, add a click effect to enlarge the image without affecting the grid to make it a little bit more fun.
Element diversity
posted on September 2., 2021 Did you know that there are 112 elements in HTML?! <div id="appRoot"> <div> <div> <div> <div class="heading">Heading</div> <div class="content"> <div> <div> <div class="list"> <div></div> <div></div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> The markup above is something I see a lot on websites I audit professionally or when I just look under the hood of a website because I’m curious to see how it’s structured.
Three Insights I Gained While Researching Vue.js Accessibility — Smashing Magazine
21 min read Vue, Apps, JavaScript, Frameworks, Accessibility Share on Twitter, LinkedIn Quick summary ↬ Web app accessibility appears difficult because it seems that there is little information on the subject available online. But while researching for my eBook, I found that the situation is better than it seems.
Meta Theme Color and Trickery
Starting with Version 15, Safari supports the theme-color <meta> tag both on macOS and iOS. That’s exciting news because now the first desktop browser supports this <meta> tag and it also supports the media attribute and the prefers-color-scheme media feature. I never really took much note of the theme-color meta tag, but now is a good time to learn about its features and limitations and try to discover some interesting use cases.
My current HTML boilerplate
posted on April 9., 2021 Every element I use for the basic structure of a HTML document, with explanations why. Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document the structure we use at work for the sites we build. So, simply copying and pasting wasn’t an option, I had to understand the choices that have been made.
Highlighting columns in HTML tables
posted on March 20., 2021 The col element allows us to style columns in tables. In the past, I’ve used the colgroup and col elements to define max-widths for columns in tables when I didn’t want to rely on the default algorithm for distribution of widths, usually when building templates for e-mail newsletters.
Slow Movement | CSS-Tricks
There was a time when I felt overwhelmed by how fast the web developed. It seemed like not a single day passed without a new plugin, framework, technique, or language feature being released. I believed that in order to survive as a freelancer and to compete with others I had to learn everything everyone else was so good at: webpack, React, Angular, SVGs, Houdini, CSS Grid Layout, ES6, you name it.
Another Collection of Interesting Facts About CSS Grid
Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I was worked on another workshop and I've learned some more exciting facts about the layout spec we all so love. Of course, I'm not going to keep my knowledge to myself. I'm happy to share my findings once again with you, the CSS-Tricks community. Sometimes, reading and understanding parts of the grid—or actually any other—spec can be very hard.
My Accessibility Journey: What I’ve Learned So Far
Last year I gave a talk about CSS and accessibility at the stahlstadt.js meetup in Linz, Austria. Afterward, an attendee asked why I was interested in accessibility: Did I or someone in my life have a disability? Article Continues Below I’m used to answering this question—to which the answer is no—because I get it all the time. A lot of people seem to assume that a personal connection is the only reason someone would care about accessibility. This is a problem.
Writing CSS with Accessibility in Mind
An introduction to web accessibility. Tips on how to improve the accessibility of your web sites and apps with CSS. This article is also available in Russian, thanks to Workafrolic, in Portuguese, thanks to Maujor, and in Japanese, thanks to Keita Nakanishi. If you’re not into reading, there’s a recording of me talking about most of the things in this article at CSS Conf Budapest. About a year ago I started to focus more on web accessibility.
The Difference Between Explicit and Implicit Grids | CSS-Tricks
Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to adapt to their items. This is all handled by the so called explicit and implicit grid. All code samples in this post are accompanied by images in order to display grid lines and tracks.
Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid — Smashing Magazine
11 min read Coding, CSS, Tutorials, CSS Grid Share on Twitter, LinkedIn Take a look on CSS grid layout for making websites with a demo to see different levels of enhancement. Manuel Matuzović explains how floating, flexbox and grid work inviting to provide an accesible and usable experience for various browsers.
A Collection of Interesting Facts about CSS Grid Layout
A few weeks ago I held a CSS Grid Layout workshop. Since I'm, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you. In a lot of code examples and tutorials you will see that you can use and (or the shorthand ) to span an element from the first line to the last. My friend Max made me aware that it's possible to use lower values than as well.
CSS Grid Layout: Animating grid-gap (FF Only)
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying. You can also link to another Pen here, and we'll pull the CSS from that Pen and include it.
Box alignment: justify-content: space-evenly
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying. You can also link to another Pen here, and we'll pull the CSS from that Pen and include it.
Writing JavaScript with Accessibility in Mind — SitePoint
Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your website or web app. This article was originally published on Medium. In my first post Writing HTML with accessibility in mind I explained why and how I got started with web accessibility. I also shared some tips on how you can improve your markup in order to make your websites more accessible. Some of these were pretty basic but nevertheless valuable.
Writing JavaScript with accessibility in mind
Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your website or web app. In my first post Writing HTML with accessibility in mind I explained why and how I got started with web accessibility. I also shared some tips on how you can improve your markup in order to make your websites more accessible. Some of these were pretty basic but nevertheless valuable.
Print style sheets
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying. You can also link to another Pen here, and we'll pull the CSS from that Pen and include it.
I totally forgot about print style sheets
Aaron Gustafson recently sent a tweet to Indiegogo in which he pointed out that their order details pages aren’t usable when printed. When I saw this tweet it struck me, because I realized that it has been a long time since I have optimized a page for print or even spared a thought on checking. Maybe it’s due to the constant resizing of our browsers and making sure that our sites work perfectly in all shapes and sizes or maybe it’s just because I rarely print web pages myself.
`flex-grow` is weird. Or is it?
The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using and . When I found out about , I made a simple demo to find out what it did and how it worked. I thought I got everything figured out, but when I tried it on a website a colleague has recently made, nothing worked as expected. No matter what we did, the layout didn't look and work like it did in my demo.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Manuel
Contact Manuel, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack