Blog

• 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.