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

Articles Tagged
accessibility

147 Articles
{
,

}
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)
Direct link to the article HTML for Subheadings and Headings
accessibility headers

HTML for Subheadings and Headings

Let’s say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I’d say. What HTML do you go for? Dare I say, …

Avatar of Chris Coyier
Chris Coyier on Aug 6, 2020 (Updated on Aug 14, 2020)
Direct link to the article SVG Title vs. HTML Title Attribute
accessibility icons SVG title

SVG Title vs. HTML Title Attribute

You know the title attribute? I can do this:

<div title="The Title"I'm a div with a `title`
</div

And now if I’m on a device with a mouse pointer and hover the cursor over that element, I get……

Avatar of Chris Coyier
Chris Coyier on Jul 30, 2020 (Updated on Aug 3, 2020)
Direct link to the article Five 5-minute Videos from Ethan on Design & Accessibility
accessibility

Five 5-minute Videos from Ethan on Design & Accessibility

Ethan:

I’ve been working with Aquent Gymnasium to produce a series of five short tutorial videos, which have been launching over the course of this past week. Since the last video just went live, I’m thrilled to share the

…
Avatar of Chris Coyier
Chris Coyier on Jun 30, 2020
Direct link to the article Quick Tips for High Contrast Mode
accessibility focus high-contrast

Quick Tips for High Contrast Mode

Direct Link

Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.

Here’s the first trick:

[…] if the default CSS outline property doesn’t give you the

…
Avatar of Chris Coyier
Shared by Chris Coyier on Jun 26, 2020
  • Newer
  • 1
  • 2
  • 3
  • ...
  • 14
  • 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