Accudio

import Image from '../components/Image'

export default function () {
  return (
    <Image
      src="otter.jpg"
      alt="an otter standing on a log looking majestic"
      srcset={[300, 450, 600, 800, 1000, 1200]}
      sizes="100vw"
      width="1200"

Accudio

{% image {
  src: 'otter.jpg'
  alt: 'an otter standing on a log looking majestic'
  srcset: [300, 450, 600, 800, 1000, 1200]
  sizes: '100vw'
  width: 1200
  height: 800
  loading: 'lazy'
  class: 'image-class'
} %}

Accudio

Building for Accessibility

Series Eight aims for websites we develop to meet the accessibility standard WCAG 2.1 at a minimum of AA level. Most sites won't be certified to WCAG standards unless required to, but we should aim for at least AA where possible.

This document covers a few things to watch out for and common issues you will need to deal with whilst developing a website. It is accompanied by the Testing for Accessibility document (in-progress) which explains how we can test the accessibility of our sites using automated tools and manual processes.

To see a table of contents of this document within GitHub, you can click the "list" icon in the top-left (see this guide).

Workshops

We will be hosting a workshop on accessibility building and testing for developers, in addition to one for designers. When complete the recording will also be available here.

Accudio

#### FIG ENV VARIABLES ####
[ -s ~/.fig/shell/pre.sh ] && source ~/.fig/shell/pre.sh
#### END FIG ENV VARIABLES ####

# Enable Powerlevel10k instant prompt. Should stay close to the top of ~/.zshrc.
# Initialization code that may require console input (password prompts, [y/n]
# confirmations, etc.) must go above this block; everything else may go below.
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

Accudio

body {
  background: black;
}
body, img {
  filter: invert(1) hue-rotate(180deg);
}

Accudio

{
  "name": "glyphhanger-usage",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "convert": "npx glyphhanger --subset=\"*.ttf\" --formats=woff2",
    "subset": "npx glyphhanger --subset=\"*.ttf\" --US_ASCII --formats=woff2"
  },
  "keywords": [],

Accudio

{# using macro directly #}
{{ image({
  url: '/path/to/image.jpg',
  alt: 'Image alt attribute',
  class: 'mb-30',
  imgClass: 'rounded',
  lazy: false,
  width: 1920,
  height: 1080,
  ratio: 0.5,

Accudio

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(allCaches => {
      return Promise.all(allCaches.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});