webSemantics

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

WCAG — Short guide to 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....

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.

[Performance] Test browser image format .avif and .webp support, with .jpg fallback [Swanage] Examples using: HTML image, CSS background-image, and a JS generated image. Displays the most performant image format for page load speed. Tries .avif...

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

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

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.

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 ...

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

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

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

Fluid-responsive property calculator 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.

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

Match element heights along a grid row (v2) 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 ...

Dymo-tape heading emulation:

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