Web App Tips

Published Elsewhere

Articles I've written that are published on other platforms.

The How and Why of Keyboard Accessibility
Improving Keyboard Accessibility for Web Apps — Part 1

About 15% of the world’s population have some form of disability. That’s over 1 billion people! Everyone deserves a satisfying web browsing experience, and it’s our responsibility as web developers to ensure they have it. There’s a wide range of concerns relating to making web apps accessible for all users, and it can seem daunting to exhaustively cater to every one of them. This article series focuses on one basic accessibility concern: supporting alternative input devices, most commonly a keyboard. Generally, desktop users navigate the web with a mouse or...

Use Semantic HTML
Improving Keyboard Accessibility for Web Apps — Part 2

Different HTML tags exist for specific purposes, and this is what semantic HTML is all about — using the right HTML tags in your web page based on their specified purpose. Perhaps the most important semantic elements...are the button and anchor link elements. Browsers recognize these elements and understand that they’re supposed to be interactive, and as such certain behaviours are associated with them out of the box. One such behaviour is that they receive keyboard focus by default. So a user tabbing through a web app will land on a button element naturally, but if you created that button with something like <div role=”button”> it will, by default, not receive focus when tabbing. Now it is possible to...

Styling components with BEM and SCSS

Specificity, scoping, reusable code, code clarity⁠—these are major problems plaguing traditional CSS. If you've ever struggled with making something work in CSS, the reason likely traces back to something on this list. As you would expect, there are many tools in the ecosystem aimed at solving one or more of these issues. One is the popular BEM methodology. Another is the ubiquitous Sass preprocessor. I thought it would be great to take advantage of both, so I came up with a system for structuring my Syntactically Awesome StyleSheets...