Blog

• Writing even more CSS with Accessibility in Mind, Part 1: Progressive Enhancement

  

  September 9., 2020

  About 4 years ago, I began to focus on web accessibility professionally. I read many articles and books, watched talks, followed experts, and I also shared my knowledge at meet-ups and online. The first 3 articles I wrote were Writing HTML with Accessibility in Mind, Writing JavaScript with Accessibility in Mind, and Writing CSS with Accessibility in Mind. I've shared the most exciting new things I've learned about creating inclusive experiences in each language.

• Accessible to some

  

  June 24., 2020

  According to WebAims annual accessibility analysis, 98.1% of home pages of the top 1,000,000 websites have detectable WCAG 2.0 failures. Some of these sites may only have minor contrast issues or maybe just a single missing id, while others are highly inaccessible. However, this number is pretty damn high, considering the fact that automatic testing tools only report obvious accessibility issues.

• Reverse ordered lists

  

  June 4., 2020

  I’m working on a project where I have a list of items in reverse order. The list starts with the latest item and ends with the oldest. I wanted to express that both semantically and visually. I did some research and found interesting solutions, some of them good, others not so much.

• Here’s what I didn’t know about “content”

  

  May 26., 2020

  This is part 3 of my series Here’s what I didn’t know about… in which I try to learn new things about CSS. This time I'm trying to find out what I didn’t know about the content property.

• The beauty of progressive enhancement

  

  April 28., 2020

  Nokia released an updated version of its iconic Nokia 3310 about 3 years ago. It was affordable for me (€60/$65), so I had to get one. It came with a 2 MP camera, a battery that lasts 30 days (up to 22 hours talk time), 2G, 16 MB storage, the original Snake game, and a browser.

• Here’s what I didn’t know about “color”

  

  April 19., 2020

  This is part 2 of my series Here’s what I didn’t know about… in which I try to learn new things about CSS. This time I'm trying to find out what I didn’t know about the color property.

• Blogging is one of the best ways of learning

  

  April 19., 2020

  I can’t stress enough how important it is to blog if you want to become better at web development. You learn so much more by explaining something in your own words than by just reading and copying & pasting.

• How many browsers do you know?

  

  March 12., 2020

  While testing a new feature recently, I realised that I don’t know too many browsers. I can list some, but I don‘t really know them like I know Firefox or Chrome. I want to change that, and I invite you to do the same.

• Why 543 KB keep me up at night

  

  February 26., 2020

  The question how good good enough is and at which point a website is ready to go online is keeping me busy lately. The web is in bad shape and it’s because we’re making it too easy on ourselves. “It’s online and works in most browsers” is not enough - we have to be much more considerate of what we’re putting online.

• One of my favourite accessibility testing tools: The Tab Key.

  

  February 20., 2020

  I’m employed for about a year now and many things are different compared to being a freelancer. One interesting thing in my specific situation is that I have to evaluate the accessibility of third-party tools regularly. Usually there’s no time for a full audit, I have to gain a good overview of the quality of a product as quickly as possible.

• Reading recommendations: Animation on the web and vestibular disorders

  

  February 11., 2020

  It’s 7:25 a.m. and I’ve already learned so much. Actually, I just wanted to write a few paragraphs for an article about accessibility in CSS before I go to work, but I got caught up reading about animation on the web and vestibular disorders.

• Here’s what I didn’t know about list-style-type

  

  January 28., 2020

  At the CSS-in-Vienna meet-up last week Ulrich told me that starting with Chrome 79 it's possible to define a string value for the list-style-type property. I was surprised because I thought ::marker was supposed to solve that. That's why I did some research, here’s what I learned.

• Here’s what I didn’t know about…

  

  January 28., 2020

  Recently, it feels like I see a property, a property value or a selector I haven’t heard about pop up every day. Often these things I learn aren’t even that new, which makes me wonder how much I don’t know about CSS.

• CSS pro tip for mac users: always show scroll bars in macOS.

  

  January 20., 2020

  I built a quite complicated component in HTML and CSS last week and I was happy with the result. After testing in different browsers and operating systems, I realised that I had to rewrite the whole thing because I didn’t consider that by default scroll bars don’t take up space on macOS, but on Windows they do. I tweeted about a similar issue about a year ago, but it seems that I didn’t take my own advice, so here’s a reminder for you and me.

• matuzo.at from scratch #1 - Designing and finding inspiration

  

  January 17., 2020

  The this video I explain how I approach design and how I find inspiration, both online and offline. Subscribe to the YouTube channel.

• Bad accessibility equals bad quality

  

  January 15., 2020

  When I talk about web accessibility at meet-ups and conferences, it’s safe to assume that at least one person will ask me something like “Yeah, accessibility sounds nice, but how many people are actually disabled? How many of my users are blind? And why would a blind person visit my website?”

• matuzo.at from scratch #0 - introduction

  

  January 9., 2020

  I'm redesigning and building my website from scratch. In this first video I introduce myself and I describe what my plans are for the following weeks and months. Watch it to see if this series of videos is for you or not.

• Beyond automatic accessibility testing: 6 things I check on every website I build

  

  October 15., 2019

  I just finished an accessibility audit for a client and I decided to share some quick checks I perform in every site I audit and build. It’s something that you can apply to your project right away, you don’t have to learn a tool or a software.

• Please write and talk more about CSS

  

  September 25., 2019

  I saw a lot of JavaScript today considering that I was at a CSS conference.

• Don't be afraid to share

  

  August 20., 2019

  I don’t consider myself a web accessibility expert but I’ve learned enough in a relatively short time to feel comfortable enough to share my knowledge in blog posts, workshops and talks.

  Here’s some advice, if you want to share stuff but are wary about doing it.

• Building the most inaccessible site possible with a perfect Lighthouse score

  

  May 31., 2019

  It’s always nice to see when people post their Lighthouse scores on social media to highlight how well they’ve optimised their own or their client's website. It shows that they care about the quality of what they build.

• The Dark Side of the Grid (Part 2)

  

  May 11., 2019

  CSS Grid layout is powerful and flexible. It's great for our development experience, but it may come at the cost of user experience and accessibility if we don’t use it responsibly.

  This article series gives you an overview of potential implementation pitfalls; or, in other words, the dark side of the grid.

• 12 Tips for More Accessible React Apps (Slides, React Finland 2019)

  

  April 25., 2019

  If you want to improve the accessibility of your React apps but you don't know how or where to start, this talk is just what you need. Manuel shares 12 tips that will help you build web sites and applications that can be used by anyone. Each tip fits on one slide and you'll be able to put them into practice right away without having to learn anything fundamentally new. The tips include testing, HTML, JS techniques, and general best practices.

• Improving the keyboard accessibility of Embedded CodePens

  

  March 7., 2019

  I'm a huge fan of CodePen (No, they didn’t pay me to write this). I'm using it for prototyping, experimenting, sharing code, and in my latest blog post, The Dark Side of the Grid, I'm also making use of their Embedded Pens.

  CodePen allows you to customize syntax highlighting, and background and text colors of UI elements in Embedded Pens. As a PRO user, I can also add custom CSS, which gives me the ability to improve Pens not just visually but in terms of accessibility.

• The Dark Side of the Grid (Part 1)

  

  February 7., 2019

  CSS Grid Layout is one of the most exciting recent CSS specifications because of its flexibility, extent, and power. It makes our lives so much easier but it also creates new dangers regarding user experience and accessibility.

• Hello World!

  

  January 4., 2019

  It happened. I finally have a website.

  Of course, it's not my first website but the first one in a long time. My very first personal site went online about 17 years ago. It was a table-based layout with no CSS at all. All styling happened by adding HTML attributes.

• I Threw Away my Mouse

  

  December 16., 2018

  Last year I attended JS Conf Budapest and I watched many great talks but “YES! Your site can (and should) be accessible” by Laura Carvajal was the most thought-provoking talk for me. Laura explained how the Financial Times made accessibility a core part of their development process and she shared several lessons she and her team had learned. In her third lesson Throw away your mouse, Laura mentioned that just testing with the keyboard wasn’t enough and that only going keyboard-only all the time made a difference.

• Another Collection of Interesting Facts about CSS Grid Layout

  

  April 13., 2018

  Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I 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.

• My Accessibility Journey: What I’ve Learned So Far

  

  February 6., 2018

  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?

  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.

• Writing CSS with Accessibility in Mind

  

  September 17., 2017

  About a year ago I started to focus more on web accessibility. The most effective method of learning for me is teaching others. That’s one of the reasons why I’m talking at meetups and conferences and why I’m writing articles about the topic. I wrote about Progressive Enhancement for Smashing Magazine and about accessibility basics here on Medium. This article is the third in a series of collections of accessibility tips. They’re in no particular order, you can read Writing HTML with accessibility in mind and Writing JavaScript with accessibility in mind now or later if you’re interested.

• The Difference Between Explicit and Implicit Grids

  

  August 10., 2017

  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.

• Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

  

  July 24., 2017

  When can I start using CSS grid layout?” “Too bad that it’ll take some more years before we can use grid in production.” “Do I need Modernizr in order to make websites with CSS grid layout?” “If I wanted to use grid today, I’d have to build two to three versions of my website.” The CSS grid layout module is one of the most exciting developments since responsive design. We should try to get the best out of it as soon as possible, if it makes sense for us and our projects.

• A Collection of Interesting Facts about CSS Grid Layout

  

  July 21., 2017

  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.

• Writing JavaScript with accessibility in mind

  

  February 12., 2017

  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.

• Writing HTML with accessibility in mind

  

  December 13., 2016

  An introduction to web accessibility. Tips on how to improve your markup and provide users with more and betters ways to navigate and interact with your site.

• I totally forgot about print style sheets

  

  November 15., 2016

  A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.

• Getting started with CSS Font Loading

  

  October 12., 2016

  I was in the mood to learn something new and so I decided to take a look at the CSS Font Loading API.

• `flex-grow` is weird. Or is it?

  

  December 26., 2015

  When I found out about flex-grow, 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. That got me thinking and I started to doubt that I knew what flex-grow was all about.