✨ This post is sponsored by everyone who has bought my Practical Accessibility course. ✨ The CSS ::before and ::after pseudo-elements are used to insert presentational content before and after (respectively) existing content in an HTML element. The content property is used to de … | Continue reading
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 i … | Continue reading
✨ 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 … | Continue reading
✨ This post is sponsored by each and every one of you 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—understandably—shared the excitement sin … | Continue reading
✨ 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 t … | Continue reading
Hidde tagged me into this chain of blog posts about blogging. I’ve really been enjoying reading these posts by other people. So I was happy to be tagged. The idea is that you answer the same series of questions about your blog. So, here we go. Why did you start blogging in the fi … | Continue reading
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 re … | Continue reading
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 commo … | Continue reading
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 rea … | Continue reading
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 rea … | Continue reading
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 commo … | Continue reading
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 scre … | Continue reading
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 t … | Continue reading
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 t … | Continue reading
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 … | Continue reading
Update: There now exists a native HTML element that maps to the ARIA search role. 🎊 As of March 24th, 2023, the HTML specification added a new grouping element: The element. Read more about the element in Scott’s introductory blog post. There’s been a recent discussion … | Continue reading
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 screensho … | Continue reading
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 bro … | Continue reading
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 … | Continue reading
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 impr … | Continue reading
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 … | Continue reading
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-el … | Continue reading
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 le … | Continue reading
(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 … | Continue reading
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, … | Continue reading