Visually hidden, still read aloud

Css

Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Download

Web & CSS accessibility screen-readers chris

More in Web & CSS

Centre a box, two ways Web & CSS Grid is one line. Flex is three and gives you control over the axes separately. Respect a reduced-motion preference Web & CSS One rule that disables animation for people who asked their system for less of it. A semantic, accessible form field Web & CSS The label is tied to the input by id, and the hint is announced with it via aria-describedby. Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Responsive images that do not blow the bandwidth budget Web & CSS srcset lets the browser pick; sizes tells it how wide the image will actually be rendered. Truncate text to a number of lines Web & CSS Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere.

Random picks

Debounce without pulling in a library JavaScript Twelve lines covering the case most projects add a dependency for, including cancelling a call that has not fired yet. Inspect a TLS certificate from the command line Networking Prints the subject, issuer and validity dates without opening a browser. Show what a merge will do before doing it Git Lists the commits and the files a merge would bring in, so a surprise is less likely. Group and count in Ruby Ruby tally does the counting; group_by keeps the members when you need them. Make a shell script fail loudly Shell The four lines that turn a script from 'carries on after an error' into 'stops at the first problem'. Follow redirects and show only the headers Networking Traces a redirect chain to its destination without downloading the body. Walk a directory tree lazily Python pathlib keeps the paths as objects rather than strings, so joining and suffix checks stay readable. Replace text across a whole project Text Processing ripgrep finds the files, sed edits them in place. The dry run first is not optional.