A list of pages I added to Pocket.
-
“Progressive enhancement” is a philosophical approach to web design and development that centers users, with the goal of enabling everyone to access the content and complete core tasks, regardless of circumstances influencing how they access the web.
-
The bet, to be revisited a decade and a year later, would be whether the URL of their wager at Long Bets would survive to a point in the semi-distant future. That is, this day, February 22nd, 2022, (2/22/2022).
-
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
-
Press the “Add selector” and “Remove selector” buttons to add or remove a selector in the list of declarations and see how the background color changes accordingly. Each selector will be added to the top of the list to prove that it has a higher specificity than the previous selector.
-
Global Positioning System is, without a doubt, one of the most useful inventions of the late 20th century. It made it significantly easier for ships, airplanes, cars, and hikers to figure out where they are with high degree of accuracy.
-
No popups to close. No ads to ignore. No cookies to accept. No account to create. 100% Free ✨ Feedback, feature requests, questions, let us know!
-
Notice that it gets kinda washed out and muddy in the middle there? This is what Erik Kennedy has coined the “gray dead zone”. Unless you're really careful when selecting colors for your gradients, you'll often wind up with a desaturated midsection in your CSS gradients.
-
Not too long ago, we finally got cross-browser-supported date input elements. With Safari joining the party, we're now all green on the browser support front to show native date pickers everywhere. There was still one piece missing, though.
-
Leading and trailing whitespace are generally invisible. Humans are bad at dealing with things they can’t see. If your system accepts textual codes, or any other human-generated or human-mediated input, you should trim whitespace, whether it’s leading, trailing, or inline (if not meaningful).
-
Paper documents were the original metaphor for the web. Ever since Alan Kay came up with the at XEROX Parc in the 1970's, our whole digital experience has been structured in terms of dull office equipment.
-
Headings are the backbone of the content of a page. A visitor should be able to scan the webpage using headings to get a good impression of its content. Heading levels have meaning, especially for screen reader users and search engines.
-
In a recent Perf Planet Advent Calendar post, Tanner Hodges asked for what many folks who work in this space would like for the holidays: a unified theory of web performance. This is a tall order!
-
Did you know that Edge provides a "password reveal" button in password fields? That's right; password fields include a little clickable "eye icon" to show and hide the entered password. However, a great usability feature only available in one browser isn't great.
-
Understanding how people with disabilities browse the web using assistive technologies (AT) is core to making an accessible and inclusive user experience.
-
Build and test against WCAG consistently by understanding what is a failure against each success criteria. These tests help you focus on the relevant criteria you need to apply and test against.
-
A common interface pattern allows users to choose one item from a pre-defined set of choices, while still allowing them to add a custom selection if nothing else fits. Often these are radio buttons with one choice labeled “Other” that makes another field visible.
-
Web accessibility is incredibly important. The web is the prime medium for information, education, entertainment, and social interaction. And it still is incredibly inaccessible to many people. According to WebAIM’s assessment of one million home pages, 97.
-
Should some links look like buttons, or should some buttons look like links? Twitter was all up in arms about this issue this week. Let’s take a look to see what these two UI elements are and what they do, and then, how they can look.
-
When browsers and screen readers encounter an element, they use semantic markup and ARIA attributes to tell users what it is (ul is a list) and how it’s supposed to work (role="menu"). But they can’t say why it’s there without an accessible name.
-
If you are familiar with web accessibility you know that visual disabilities are both prevalent and multifaceted at the same time. It follows that one of the cornerstones of accessibility is making a page adaptable or allowing it to stay adaptable.
-
DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit. Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there.
-
JavaScript frameworks have a reputation for poor accessibility. But is this an inherent problem of these tools? Can you build accessible sites and apps with Vue, React and Angular if you respect web app idiosyncrasies? I think so.
-
Vitaly Friedman 43 min read Tools, Accessibility, CSS, JavaScript, Best Practices, Round-Ups Share on Twitter, LinkedIn Prepare for today’s communication roles Northwestern’s MS in Information Design.
-
The Service Worker API is the Dremel of the web platform. It offers incredibly broad utility while also yielding resiliency and better performance.
-
My talk Applied Accessibility: Practical Tips for Creating more Accessible Front-Ends is now available to watch online.
-
If I’ve learned anything while coding for accessibility, it’s that I don’t know what I don’t know.
-
Learn how to identify and fix layout shifts. The first part of this article discusses tooling for debugging layout shifts, while the second part discusses the thought process to use when identifying the cause of a layout shift.
-
TL;DR: A lot has changed since 2017 when we last estimated a global baseline resource budget of 130-170KiB per-page. Thanks to progress in networks and browsers (but not devices), a more generous global budget cap has emerged for sites constructed the "modern" way.
-
Using display: contents should allow us to use semantic elements to ensure that our content is understandable by accessibility technology, while also not displaying boxes for those elements.
-
HTML is at the core of many things we do. It’s so ingrained in the frameworks we deal with on a daily basis, many of us might feel like we know it relatively well. I guess I was one of these people - I thought I knew what I was doing. At least sort of. Until I started diving into accessibility.
-
Safari 5.1, back in 2010, was the last WebKit browser that somebody released for the Windows platform. Since then debugging things in WebKit came down to either buying a whole Mac or using a remote Safari in Browserstack.
-
When I first learned CSS clip-path back in the days, I took more time than I had expected, and I struggled to memorize it, too. I don’t know the exact reason, but maybe because I didn’t use it that much? Anyway, I will re-learn it with you.
-
It is easy to get the idea that ARIA fixes everything for accessibility, but the reality is that ARIA serves a very specific purpose, for a very specific audience. ARIA is only supported in browsers and screen readers.
-
A lightweight web component helper for HTML5 videos. Intended for use with muted by default HTML5 videos. Only start playing when the video is visible in the viewport with data-visible-autoplay (via IntersectionObserver) Make sure you leave off the autoplay attribute in your markup.
-
There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thing to do.
-
The Progressive Web App term is now five years old, and it's time to sit down and understand where we are at 2021 within the platform, what has changed during 2020 and what we are expecting for the upcoming months. 2020 was a particular year for everyone, and Progressive Web Apps are no exception.
-
When it comes to CSS, sometimes a border is not really a border. We'll also discuss when you might use one over the other.
-
The title for this page came from a slip of my tongue. I actually had wanted to say "responsive and accessible" web applications, but somehow "responsible" slipped out.
-
When we boil it all down, websites are really just a series of words and pictures. It’s a way for a person (or sometimes a robot, or sometimes a robot in a person trenchcoat) to tell you about a thing and you, a visitor to their internet page, to consume that thing in whatever form.
-
First we need to do some level-setting. The web, by its very nature, is a net-negative for the environment. It exponentially grows at a near-inconceivable scale, and with that comes an ever-growing demand for power.
-
-
I edit a lot of technical articles over at Smashing Magazine, and write a good few myself. Over the years I’ve absorbed a lot of information in terms of what works when writing tutorial content, and one thing I keep coming back to is that you need to know who the ideal reader of your piece is.
-
Screen readers are designed to do one thing: read what’s on the screen. That’s why they call them screen readers, right? You would think that screen reader software would have perfected the art of reading text by now, because that was the whole reason why screen readers were invented.