Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
accessibility

140 Articles
{
,

}
Direct link to the article How We Improved the Accessibility of Our Single Page App Menu
:focus-within accessibility focus menu navigation

How We Improved the Accessibility of Our Single Page App Menu

I recently started working on a Progressive Web App (PWA) for a client with my team. We’re using React with client-side routing via React Router, and one of the first elements that we made was the main menu. Menus …

Avatar of Luke Denton
Luke Denton on Feb 25, 2021
Direct link to the article Beautiful accessibility with Floating Focus
accessibility focus

Beautiful accessibility with Floating Focus

Direct Link

Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scrolling: it’s …

Avatar of Chris Coyier
Shared by Chris Coyier on Feb 15, 2021
Direct link to the article Responsible Web Applications
accessibility layout web components

Responsible Web Applications

Direct Link

Joy Heron bought a cool domain name and published an article there:

Luckily, with modern HTML and CSS, we can create responsive and accessible web apps with relative ease. In my years of doing software development, I have learned some

…
Avatar of Chris Coyier
Shared by Chris Coyier on Feb 12, 2021
Direct link to the article What’s New in WCAG 2.1: Label in Name
accessibility aria labels

What’s New in WCAG 2.1: Label in Name

WCAG 2.1 Recommendations rolled out in 2018. It’s been a couple years now and there are some new Success Criterion. In this article, I will discuss Label in Name, which is how we visually label components. We’ll take a …

Avatar of Todd Libby
Todd Libby on Dec 15, 2020 (Updated on Dec 17, 2020)
Direct link to the article More on content-visibility
accessibility content-visibility performance

More on content-visibility

Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out …

Avatar of Chris Coyier
Chris Coyier on Oct 28, 2020
Direct link to the article Comparing Various Ways to Hide Things in CSS
accessibility hiding

Comparing Various Ways to Hide Things in CSS

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique.

Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of …

Avatar of Marko Ilic
Marko Ilic on Oct 27, 2020 (Updated on Nov 3, 2020)
Direct link to the article Focus management and inert
accessibility focus inert

Focus management and inert

Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You may already be familiar with this way of navigating if you use it to …

Avatar of Eric Bailey
Eric Bailey on Oct 19, 2020 (Updated on Feb 8, 2021)
Direct link to the article Styling Complex Labels
accessibility HTML labels

Styling Complex Labels

Direct Link

Danielle Romo covers the HTML pattern you need when you have a wordy <label> with fancy styling for an <input type="radio">.

The trick? The ol’ <span class="hidden-visually"> that contains the label that you want to be read, and a …

Avatar of Chris Coyier
Shared by Chris Coyier on Oct 5, 2020
Direct link to the article Accessible Web Animation: The WCAG on Animation Explained
accessibility animation prefers-reduced-motion

Accessible Web Animation: The WCAG on Animation Explained

It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to make sure our animations have a positive impact on accessibility, like …

Avatar of Val Head
Val Head on Sep 22, 2020
accessibility

Inclusive Design 24

Direct Link

Totally free.

No sign-up. No registration. All sessions are streamed live and publicly on the Inclusive Design 24 YouTube channel – see the entire playlist for the event.

Quite the lineup.…

Avatar of Chris Coyier
Shared by Chris Coyier on Sep 16, 2020
Direct link to the article Nailing the Perfect Contrast Between Light Text and a Background Image
accessibility canvas JavaScript

Nailing the Perfect Contrast Between Light Text and a Background Image

Have you ever come across a site where light text is sitting on a light background image? If you have, you’ll know how difficult that is to read. A popular way to avoid that is to use a transparent overlay…

Avatar of Yaphi Berhanu
Yaphi Berhanu on Aug 7, 2020 (Updated on Aug 10, 2020)
  • 1
  • 2
  • 3
  • ...
  • 13
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top