WCAG guidelines for line-height

If you're struggling to figure out typography, here are some basic rules provided by the WCAG:

  • line-height should be at least 1.5 times the font-size
  • The spacing that follows paragraphs should be at least 2 times the font-size
  • letter-spacing should be at least 0.12 times the font-size
  • word-spacing should be at least 0.16 times the font-size

https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

December 7, 2021 at 2:15 PM

Web Accessibility Chrome Extension

Automated accessibility testing will probably never be able to catch all the issues that a real human could, but it doesn't hurt to have one in your tool belt anyway.

The "axe DevTools" Chrome extension, by Deque Labs, can be very helpful in finding many critical and easy-to-miss accessibility issues.

December 6, 2021 at 5:31 PM

CSS grid-area shorthand

Using CSS grid with grid-area can be useful in certain circumstances, and especially for stacking elements without using position: absolute. For example, there's a particularly clever trick that can be used to make textarea and input elements automatically resize based on their contents.

Here's what the different versions of the shorthand translate to:

/* 4 */ grid-area: 0 / 0 / 1 / 1; grid-area: 0 / /* grid-row-start / */ 0 / /* grid-column-start / */ 1 / /* grid-row-end / */ 1; /* grid-column-end; */ /* 3 */ grid-area: 0 / 0 / 1; grid-area: 0 / /* grid-row-start / */ 0 / /* grid-column-start / */ 1; /* grid-row-end / */ /* <grid-column-start's custom-ident or auto>; */ /* 2 */ grid-area: 0 / 0; grid-area: 0 / /* grid-row-start / */ 0; /* grid-column-start / */ /* <grid-row-start's custom-ident or auto> / */ /* <grid-column-start's custom-ident or auto>; */ /* 1 */ grid-area: 0; grid-area: 0; /* grid-row-start / */ /* <grid-row-start's custom-ident or auto> / */ /* <grid-row-start's custom-ident or auto> / */ /* <grid-row-start's custom-ident or auto>; */

September 11, 2021 at 5:12 PM

iOS prevents changes to volume property of <audio> and <video> elements

When creating custom interfaces around the HTML5 <audio> and <video> elements, make sure you hide the volume control if the user is on iOS. According to Apple's documentation, the volume property of <audio> and <video> elements is read-only, and always returns 1:

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

iOS-Specific Considerations for Safari HTML5 audio and video, under the "Volume Control in JavaScript" section.

August 18, 2021 at 12:11 AM