Skip to main content
whitep4nth3r logo whitep4nth3r

posts about a11y

Blog posts and tutorials

I write and live stream about front end development. Read tutorials and quick tips on HTML, CSS, JavaScript and Jamstack. Click on the categories to filter posts by topic.

    • An icon of a laptop with angled brackets on the screen.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • The accessibility icon featuring a person in the centre of a circle.
    • The Contentful C logo in blue, yellow and red.
    An illustration of a representation of an image placeholder on a green background, with the text <picture> overlaid.

    How to load responsive images in AVIF and WebP using the HTML picture element

    29 Nov 2021 13 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    A CSS example showing font-size 100% set on the HTML tag.

    How to make your font sizes accessible with CSS

    16 May 2021 3 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • An icon of a blank piece of paper with the bottom right corner turned up.
    • An icon of a laptop with angled brackets on the screen.
    A screenshot of my website, showing how aria labels enrich the context of the HTML in the accessibility tree in Chromium dev tools.

    When to use aria-labels in your HTML

    3 May 2021 3 min read

    • The accessibility icon featuring a person in the centre of a circle.
    • The CSS3 logo featuring a white 3 at the centre of a blue shield shape.
    A screenshot of the Colour Contrast Checker Chrome extension showing a failing colour contrast check

    How to make your code blocks accessible on your website

    26 Feb 2021 5 min read