#visually hidden css

I just love the personal site of Manuel Matuzović, a front-end developer based in Vienna, Austria. I was reading through Manuel’s slides for a talk he did at React Finland yesterday on 12 Tips for More Accessible React Apps and was immediately impressed with the bold design on his site (it looked great on mobile, and works wonderfully on desktop as well). Knowing his typical attention to detail for accessibility, I was pretty sure the site would be wonderfully accessible. And it is! 

I love the little touches with a skip link neatly nestled into the design, animated SVG logo on focus and various link interactions. Manuel used semantic markup in his pages, with a visually hidden h1 element with his name on the homepage. It’s a breath of fresh air getting to see a nicely designed site and know that it’s got accessibility handled! There’s a “beta” message on it, but I think it’s already in great shape.

Manuel: thank you for sharing your knowledge with us in your talks and content bits like the TIL (“Today I Learned”) section of the site. I especially love your Dark Side of the Grid stuff as I’m also using and speaking about accessible CSS Grid. Your contributions are fantastic and I hope they continue!