This is the first in a series of articles I'm naming "Effortless Accessibility", in which I will share actionable tips on HTML and CSS features (existing and new/cutting edge!) that you can use to improve the accessibility and usability of your websites and web applications with little to no effort. --> Changelog Despite the fact that Chrome exposes the alt text of a CSS image as part of the…
Kevin and I been planning this podcast for months and our schedules finally aligned and we made it happen. We originally planned to chat for a bit… but we had so much fun that almost two hours flew by without us noticing 😅 We covered: Defining web accessibility and why it matters How we each became more aware of it (our accessibility origin stories) Raising awareness and addressing common…
✨ This post is sponsored by everyone who has bought my Practical Accessibility course . ✨ The Bootstrap Scrollspy —now commonly known as just “Scrollspy”—is a feature that automatically updates navigation links based on the user’s scroll position to indicate which link is currently active in the viewport. It is popular because it aims to enhance the user experience by providing visual cues about…
✨ This post is sponsored by everyone who has bought my Practical Accessibility course . ✨ “CSS Carousels” were formally introduced a few weeks ago in an article on the Chrome for developers blog , and quite a few people have shared the excitement since then. When I first heard of them I was very reluctant to jump on the bandwagon of excitement. I will also admit that there was even a small part…
Why did you start blogging in the first place? I started blogging when I was still learning front-end development—specifically CSS—back in 2012. I was learning a lot and writing what I was learning as a way to organize my thoughts and solidify my learnings, and at some point I realized that my notes can help others learn and understand the same. So, I created my blog a few months later in order to…
In the first part of this chapter we discussed what we might need live regions for, and how to create them using HTML and ARIA. In this part, we’re going to discuss what live regions are not suitable for and why, and we’re going to discuss more robust ways to implement some common UI patterns that you might otherwise consider using live regions for. After that, we’re going to go over some best…
In this chapter, we’re going to learn about ARIA live regions — the accessible notifications system that enables us to make dynamic web content more accessible to screen reader users. Without live regions, some rich web applications would be more challenging to use for screen reader users. So if you’re building web applications such as Single Page Applications (SPAs), you need to understand live…
When you’re designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility and usability issues that cannot be caught by automated accessibility checkers. You can catch the majority of issues by performing testing using the screen readers that your users rely on the most. If you haven’t already, you want to set up a screen…
I spent some time in Reeder app this morning, catching up with RSS and the latest articles published by my favorite blogs. I was reading Scott O’Hara’s article about using JavaScript to detect high contrast and dark modes , which includes a small, very useful script to do exactly what the title says. The output of that script at first looked like it was a “false positive”. But some further…
Update: There now exists a native HTML <search> element that maps to the ARIA search role. 🎊 As of March 24th, 2023, the HTML specification added a new grouping element: The <search> element . Read more about the element in Scott’s introductory blog post . There’s been a recent discussion on Twitter about the idea of adding a new element in HTML that represents a search interface. A search form,…
Imagine you visit a website and you want to browse it for some content. You want to buy something; or maybe book a flight somewhere. And as you move your cursor onto the page, it suddenly disappears. Your hand may be still on the mouse, and you’re moving the mouse across the screen and across the page; but you can’t see where it is. You may or may not be hovering over a link or a button or any…
Apple Keynote doesn’t come with code syntax highlighting built in. I really wish it did, and hope that Apple would at some point add this feature, especially considering how many developers and engineers use Keynote to create talk slides. Seven years ago, I used to take screenshots of code snippets to include them in my presentations. That was very impractical. If I wanted to make changes to the…
Our content will not always look the way we expect it or want it to. Many apps, tools, and environments that people use to browse the Web strip our content of our CSS and apply their own styles to it. And unless we always keep that in mind, we risk creating incomplete or even broken experiences for users of those technologies or tools. You might be reading this very blog post in a reading app…
Container Queries (CQ) allow us to change the styles of a component so it responds to the size of its nearest container. With CQ, we can change how an element looks based on where on a page it is placed and how much horizontal space it occupies. A lot about a design pattern could change based on how much space it’s got. So Container Queries can be used to do more than just shift elements around in…
The HTML <hr> element adds a horizontal rule (or line) wherever you place it. A horizontal rule is used to provide a visual break and divide content. Like other HTML elements, horizontal rules can be styled using CSS (and SVG). This means that they don’t have to look like boring, plain horizontal lines. You can get a little creative with them, adding a nice little personal touch to your content…
My talk Applied Accessibility: Practical Tips for Creating more Accessible Front-Ends is now available to watch online . This blog post is an extended transcript for a section of the talk, in which I discuss how to create more descriptive button (and/or link) text labels that improve the e-commerce experience for screen reader users, whilst making sure those buttons don’t fail WCAG success…
I can't count the number of times I've tried installing a command line tool on my machine, only to find myself going down a black hole of node modules & dependencies, and a seemingly non-ending list of error messages in the terminal. This would go on for a while before I finally give up and call it quits, only to revert back to find myself googling the name of an online app and using that to do…
Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image…
The faster the user can navigate your UI the better. The faster they can get to the content they need, the better. Therefore, the less steps they have to go through, the more efficient their overall experience with the UI will be. And this applies to keyboard tabbing, too: the less tabs the user needs to stop at while navigating, the faster they are to get to where they need. The way we mark up…
Ever since I learned about CSS Variables a few years back, my absolute favorite feature has been the ability to scope variables to components. But to be honest, I haven't been putting this feature to much use over the years, until I created my own pattern library last year to speed up prototyping and client work. That’s where scoped CSS variables really shined for me. So I want to share my…
(This article was originally published on 24accessibility ) . A few years ago I didn't know what the term "accessibility" meant. I built Web sites that were partially inaccessible because I didn't know better . Fast forward to today, I know enough to be able to write, speak and run workshops on accessibility, helping others build more a accessible and inclusive Web. Much like everyone else in our…
A few months ago I teamed up with SuperFriendly to create an accessible micro-site for the Khan Academy 2018 Annual Report . The site is a very beautiful visual representation of Khan’s real-life impact on world education, their end-of-year financial reports, and more. By nature, the annual report contains a lot of data and visualizations and charts to represent it. My mission was to make sure…
An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. These buttons can be found in the majority of app and user interfaces today. The infamous hamburger menu button is a great example of such buttons when not visually labelled “Menu”. Twitter’s Compose…
SVG Filters 101 The first article in a series on SVG filters. This guide will help you understand what they are and show you how to use them to create your own visual effects. SVG Filter Effects – Outline Text with <feMorphology> In this second part of the SVG Filter series you'll learn all about the feMorphology filter, how it works and how you can use it to create paint-like image effects and…
I’ve never taken or had any design classes in school or university. Most of my (humble) design knowledge I’ve picked up online from random articles here and there, and from breaking down and building designs that I liked. So, when I found Steve on Twitter and saw how he was sharing design tips targeted at developers with no design background, I followed him in the blink of an eye. I'm not…
Chris Coyier started a thought exercise thread last week asking the community how they would approach building nested links. I had the same requirement a couple of years ago when I was building the front-end foundation for Smashing Magazine . So I thought I’d write my response to Chris’s thread out in the form of a blog post. The Challenge The following video shows what an article on the home…
I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the responses I got that partly changed the way I would approach building an FAQ section, and some…
I got used to writing lengthy technical articles over the last few years that I’d been finding it increasingly harder to publish articles that are not lengthy and overly technical over the last few months. This had led me to abandon a lot of rough ideas and article drafts, eventually leading to my blog feeling abandoned for months in a row. This isn’t just bad because, well, it is bad. What made…
A couple of weeks ago I tweeted about a feature that I didn’t know existed in VS Code: the visual color editor that pops up when you hover over color values in a style sheet. Sorry, your browser doesn't support embedded videos. The VS Code color editor that pops up when you hover over a color value. The editor allows you to visually choose and edit colors, and to switch from one color format to…
I always try to customize in-house client workshops to my client’s needs. That sometimes also means that if my client’s design and dev team is interested in learning something that is not covered in my workshop, I will tweak the content of the workshop to make sure they learn what they need to make their work better. One such example is when I ran my SVG Workshop for the design and engineering…
Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark and vice versa. I liked, and was inspired, by the theme switch in the Medium app, shown below. The Medium app’s theme customizer is a simple…
Earlier this month I rolled out a new and long overdue feature on this Web site: offline viewing. In other words, from now on, after your first visit, you can re-visit my Web site even when you’re not connected to the Internet. Furthermore, depending on the device and application you’re using to visit this site, you may also be able to add the site to your mobile homescreen, similar to other…
I love when I’m pushed to think of creative techniques when tackling design and dev challenges on my client projects. And it so happens that the new Smashing Magazine design released this year was one of the more (fun and) challenging projects I’ve worked on. And one of the challenges I had to tackle was delivering three fairly complex SVG images in a performant, accessible way. I was the…
I’m always interested in and thinking about ways to use SVG in my client projects to solve common UI challenges — uses that go beyond simple icon display and animated illustrations. I’m also always researching and looking for practical uses of SVG to add to my talk and workshops material that go beyond SVG the image format, and more into the document nature of it. After all, SVG on the Web isn’t…
In this article I explain the subtle but important difference between auto-fill and auto-fit for sizing columns in CSS Grid. Each of them exhibits a responsive behavior once compbined with repeat() that you may or may not want for your responsive layout.
During the last 18 months, working on my Web site became a daunting task—be that for developing, redesigning it, writing a blog post, or making updates to my speaking and workshop pages. My then static site generator, Jekyll , is why. And a change has long been overdue... Jekyll became unbearably slow at compiling my Web site after every change I made. Until, at one point, waiting for the site to…
Positioning elements inside an SVG image is very similar—if not identical—to positioning elements absolutely in HTML. Every element in SVG is positioned "absolutely" relative to the SVG viewport, and the position inside the viewport is governed by the current coordinate system in use . But this similarity in positioning elements should not conceal the fact that there is a fundamental difference…
If you’re reading this article, then I can probably assume you’ve already decided to switch from using fonts for icons to an SVG icon system. Or maybe you're pondering the idea and want to get an overview of how that would be done and whether or not it's worth it. Either way, this post is here to help you with that. If you’re not already convinced as to why SVG is a better icon system, then I…
There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. Yet you might sometimes get some unpredictable results that might frustrate you when working with SVG, if you don’t know the details of how certain features should behave and what to expect from them, as per the specifications. SVG…
SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. But this, of course, only applies to images that are good candidates for SVG, such as: Logos non-complex, vector-based…
Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in the graphics editor in the process of creating the SVG directly affects the resulting code and hence the work of the…
This is the last article in the series of article comparing common CSS techniques to their SVG counterparts. This article is a roundup of several CSS and SVG solutions, as opposed to being an article comparing one solution that can be achieved using either CSS and SVG. There are already a bunch of excellent articles out there that cover the details for each of these solutions, so we will get an…
This post is the third in the series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both.In this article, we are going to go over techniques for creating arbitrarily-shaped UI components using CSS properties and SVG’s capabilities, and a mix of both! Specifically, we will be talking about how to create circular menus, as these are the…
This post is the second in the series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. In this article, we’re going to look into ways to style checkboxes and radio buttons using both CSS and SVG. You will learn how you can create animated checkboxes using SVG's line drawing capabilities.
The CSS clip-path property is one of the most underused and yet most interesting properties in CSS. It can be used in conjunction with CSS Shapes to create interesting layouts, and can be taken to the extreme to create some incredibly impressive layouts and animations like the Species in Pieces project. While exploring the creation of arbitrarily-shaped UI components using CSS and SVG, it occurred…
This post is the first in a series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. Since I am biased to SVG, this series is really intended to prove that SVG — because of its nature as both an image and a document format — is simply better than CSS when it comes to solving certain design problems on the web. But to keep an objective…
An in-depth article on how to style the contents of the SVG <use> element and overcome some challenges it brings. We get into where the contents are cloned (the shadow DOM!), what limitations that brings up and how to work around them by taking advantage of the CSS cascade and using CSS Variables to get full control over the content while providing fallback for non-supporting browsers.
I have recently finished a front-end development project for Provata Health — a US-based health and wellness company specializing in health promotion and behavior change science. As part of their marketing website , I worked on an infographic that showcases the three major health results one can achieve by following their health program. The graphic is a perfect candidate for SVG and you’ll see…
The state of SVG animation is changing. CSS, SMIL and JavaScript can be used to animate SVGs. However, SMIL is soon to be deprecated and was never supported in Internet Explorer. CSS animations on SVG elements don’t have the best browser support (yet), not to mention are quite buggy in some browsers. JavaScript is currently the best SVG animation tool. In this article, we'll go over the current…
The SVG viewBox attribute is easily one of SVG's most powerful features. Mastering this attribute can take your SVG skills to the next level, especially considering that a couple of the main SVG spriting techniques rely on this attribute to work. Because the viewBox attribute can be used to crop and extend the SVG canvas, it can be used for art-directing SVGs—by using it to crop the SVG to the…