This is part 1 of 3 in a series of articles about CSS Grid layout and accessibility.

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.

Image for post
Image for post

Preface

It has already been two years since the first browsers, Chromium 57 and Firefox 52, shipped CSS Grid Layout un-prefixed. Many developers have experimented with it or are using it in production already. More will come as soon as support for Internet Explorer 10 and 11 becomes less important.
Grid offers many ways of building layouts and it challenges us to rethink the way we approach them. …


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


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. It all boils down to two of the most important unwritten rules in front-end development: Learn the basics and take enough time to plan and write HTML. Both you and your users will benefit from clean and semantic markup.

Luckily, HTML is not the only language we have to make websites, but the more complex the language, the easier things can go wrong and JavaScript can get very complex. Whilst being content that our code works, it’s easy to forget about users with other input devices than a mouse or touch pad, e.g. keyboard or screen reader users. In this second article of four about web accessibility I have gathered some tips on what to consider when writing JavaScript and how to make your JavaScript components more accessible. …


Just some notes on where I’m at in my career and what’s important to me professionally at the moment.

2017 just started and like every year a lot of people made New Year’s resolutions which they may or may not keep. Some people share theirs publicly online because they believe that this will increase their motivation and the likeliness of a positive outcome. The concept behind it is that by sharing goals with the public, they can be held accountable for achieving them or not. Personally, I don’t think much of these ideas.
First I don’t see the point of setting a start and end date for something you want to change in your life. If you want to change, it’s not enough to just set goals and deadlines, you have to change your habits and establish daily routines.


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.

If you don’t want to read the preface, jump right to the tips.

This article is also available in Russian, thanks to Workafrolic, Korean, thanks to Yongui, and Portuguese, thanks to EmanuelG.

Personal development and change in perspective

When I made my first website my highest priority was to get content online. I didn’t care much about usability, accessibility, performance, UX or browser compatibility. Why would I? I made a robust table based layout and I offered a 800×600 and a 1024×768 version of my site. On top of that, I informed users that the website was optimized for Internet Explorer 5.

Image for post
Image for post
Screenshots of the old finance.senate.gov website informing users that the website is optimized for Netscape and Internet Explorer with an 800×600 screen resolution. https://web.archive.org/web/20090325102735/http://finance.senate.gov/

This was of course before I started to work professionally as a web designer and my perspective in what was important changed.
Years later, instead of dictating the requirements for my websites, I started to optimize them for all major browsers.
Beginning with Ethan Marcotte’s game changing article I started caring about devices as well.
Making websites for all kinds or browsers and devices is great, but pretty much useless if the websites are too slow. So I learned everything about critical CSS, speed indices, font loading, CDNs and so on. …


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

Aaron Gustafson recently sent a tweet to Indiegogo in which he pointed out that their order details pages aren’t usable when printed.

Visit my website to read the rest of this article.


Image for post
Image for post

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

You may ask yourself why I chose CSS Font Loading. Well, because up until now I hadn’t taken the time and browser support is already pretty great. At least for me it’s good enough because I treat web fonts as an enhancement and I’m fine with older or less capable browsers serving system fonts.

Before I show you how it works, I want to really quickly review the state of web font loading and explain why we need something like CSS Font Loading. …

About

Manuel Matuzovic

Frontend Developer / @wearewebclerks meetup organizer / slavic studies student / @mmatuzo on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store