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

Articles Tagged
labels

5 Articles
{
,

}
Direct link to the article Unchain My Inaccessibly-Labelled Heart
accessibility aria labels

Unchain My Inaccessibly-Labelled Heart

Suzy Naschansky from the HTMHell Advent Calendar:

<h2 id="article1-heading"All About Dragons</h2<pI like dragons. Blah blah blah blah blah.</p<p<a id="article1-read-more" aria-labelledby="article1-read-more article1-heading"Read more</a</p

See that aria-labelledby attribute? It chains two IDs from the …

Avatar of Geoff Graham
Geoff Graham on Dec 14, 2022
Direct link to the article HTML Inputs and Labels: A Love Story
accessibility forms inputs labels semantics

HTML Inputs and Labels: A Love Story

Most inputs have something in common — they are happiest with a companion label! And the happiness doesn’t stop there. Forms with proper inputs and labels are much easier for people to use and that makes people happy too.…

Avatar of Amber Wilson
Amber Wilson on Mar 30, 2021 (Updated on Apr 2, 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 Jun 1, 2021)
Direct link to the article Styling Complex Labels
accessibility HTML labels

Styling Complex Labels

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
Chris Coyier on Oct 5, 2020
Direct link to the article CSS Only Floated Labels with :placeholder-shown pseudo class
:placeholder-shown forms labels

CSS Only Floated Labels with :placeholder-shown pseudo class

The floated label technique has been around for a good long while and the general idea is this: we have an text input with the placeholder attribute acting as a label. When a user types into that input, the label …

Avatar of Robin Rendle
Robin Rendle on Oct 4, 2018

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top