webSemantics

08/03/2026

WCAG — A short interactive guide to the rules & best practices

WCAG rules explained in an easy to understand manner. Includes levels A, AA, and AAA. Includes the optional best a11y practices too....

12/04/2023

Test browser image format .avif and .webp support, with .jpg fallback [Performance]

Examples using: HTML image, CSS background-image, and a JS generated image.

Displays the most performant image format for page load speed.
Tries .avif first, then .webp, and if that fails use a .jpg.

The file size of .avif is about half that of an equivalent jpg.
Less bytes to transfer equates to more performant page.

Examples using: HTML image, CSS background-image, and a JS generated image. Displays the most performant image format for page load speed. Tries .avif...

12/04/2023

One details element open at a time - An accordion

A progressively enhanced accordion using the details element and a small piece of vanilla JavaScript.

https://codepen.io/2kool2/pen/poOgxKb

12/04/2023

Accessible tab navigation to meet WCAG 2.1

This is an example of an ARIA accessible responsive tab control.
The "tabs" can be positioned at the top, left, right, or bottom of the content.

It is progressively enhanced, fully keyboard accessible, and responsive.

No external dependencies and is written in vanilla ES6.

https://codepen.io/2kool2/pen/JjaVMNM?editors=0010

12/04/2023

Flex-wrap detection script.

Detects when a flexbox wraps and applies a 'wrapped' class to both the flexbox and any wrapped flex items.

It uses a resize observer instead of media queries, and avoids the need for minimum or maximum widths or complex calculations.

Detects when a flexbox wraps and applies a 'wrapped' class to both the flexbox and any wrapped flex items. It uses a resize observer instead of media ...

07/12/2021

A bookmarklet to help meet WCAG 1.4.12 Text Spacing success criteria:

To help test WCAG Success Criterion 1.4.12 Text Spacing (Level AA). Adjusts line-height, word-spacing, letter-spacing and paragraph margins....

07/12/2021

New version of Fluid-Responsive Property Calculator is now live for critique. Final stage before replacing the old "font-size" version:

An online tool to generate the CSS required to create a fluid-responsive property, usually font-size, which scales smoothly between two viewport widths. For embedding in your stylesheet.

21/04/2021

A major update for 2021.
Match element heights along a CSS Grid row:

Maintains a consistent visual layout across a CSS grid-row when content size/length is variable in each grid-item. Heading and copy elements, in each ...

20/04/2021

Dymo-tape heading emulation:

Emulation of Dymo embossed tape for use as headings. Includes an imperfect background, a twist, and slight curl....