Accessibility

coppice aims at the Web Content Accessibility Guidelines, WCAG 2.2, at level AA. The site takes care of its side; the writing takes care of the rest.

What the site does#

• Titles and headings. Every page's title names it and the site, such as "About · my site", and every page has one top-level heading. Home and compact pages, whose design shows none, have one for screen readers. language in config.toml tells screen readers how to pronounce the text, and [words] puts the site's own words in that language too.
• Readable type. The default fonts were drawn for readers with low vision, the text is 20 pixels (18 on phones) with generous spacing, and the column keeps lines to around seventy characters. Every size can be changed in [sizes].
• Contrast. In every colour theme, light and dark, text, quiet text and links have a contrast of at least 4.5:1 against the background. Links are underlined, and nothing is told by colour alone: the section being read in a contents list is bold as well, and a callout is titled with its kind.
• The keyboard. Everything works from the keyboard, with a visible focus: links, the contents toggle, the docs menu, its search box (/ goes to it, the arrow keys through its results) and the link on each heading of a doc, the copy buttons on code, sidenotes on narrow screens, and galleries.
• Galleries. An opened picture is a dialog: focus moves into it, the page behind it is out of reach until it closes, and focus returns to its tile.
• Motion. The home page's animation holds still for readers whose system asks for reduced motion, and so do animated GIFs in galleries, which otherwise play only when opened.
• Pictures. The build reports every picture without alt text, the description read in its place, and gives every picture its size, so the text doesn't move as pictures load.
• Structure. Pages use the HTML elements made for each part: navigation, main text, dates as <time>, figures and their captions. Arrows in links are hidden from screen readers, which read the words.

What the writing does#

• Headings in order. Go down one level at a time, ##, ###, ####, so the headings make an outline. Screen reader users move through a page by them.
• Links that say where they go. A link is often read out of its sentence: write "the settings", not "click here".
• A description for every picture. Say what it shows and why it's there, in a sentence or less. A picture that's only decoration says so in HTML, with alt="" role="presentation", and the build won't report it.
• Not colour alone. In a diagram or chart, label things as well as colouring them.
• Words for sound and video. Add captions to a video and a transcript to audio, and don't make either play by itself.
• Little that moves. Outside a gallery, an animated GIF plays for ever; keep such pictures few, short and still where you can.