# Accessibility

> How ali.id.au works with keyboards, screen readers and reduced motion, what's under the hood, and how to report a problem.

Source: https://ali.id.au/accessibility/ (last edited 2026-10-17)

This site should work for you whatever you're using to read it: keyboard, screen reader, phone, or a browser with motion turned down. Here's what's built in, and how to tell me when something doesn't work.

## What's built in

* **Keyboard**: everything is reachable by keyboard, with visible focus. Press <kbd>?</kbd> anywhere for the shortcuts: <kbd>/</kbd> opens search, <kbd>j</kbd> and <kbd>k</kbd> jump between headings, and <kbd>g</kbd> then <kbd>m</kbd>, <kbd>t</kbd> or <kbd>c</kbd> goes to the menu, the content or the table of contents. <kbd>`</kbd> (or the terminal button in the footer) opens a PowerShell-style console: <code>cd</code> and <code>ls</code> move around the site and <code>Get-Resource</code> searches it. <kbd>Tab</kbd> completes commands and paths there; on an empty line it moves focus as usual.
* **Skip links** to navigation, content and (on resource pages) the table of contents.
* **Videos**: a YouTube video is a link with its title until you press play, then the player takes its place and gets focus. Nothing loads from YouTube before that.
* **Focus that follows you**: after you follow a menu link, focus lands in the right place on the new page instead of back at the top.
* **Screen readers**: semantic HTML with landmarks and a proper heading outline, labelled controls, and a live region that announces where you've moved to. On phones the menu is inert while it's closed, so its hidden links aren't tabbed through or read out.
* **Motion**: if your system asks for reduced motion, animations, smooth scrolling and the occasional Melbourne drizzle are off.
* **Next page**: resource pages and posts end with a link to the next one. In the current design, scrolling past it loads that page in below; the address bar and menu follow along, and screen readers hear when it has loaded. The link works as a normal link from the keyboard.
* **Light and dark**: follows your system setting. The theme button in the footer (a half circle, sun or moon, each labelled for screen readers) switches between Auto, Light and Dark, and remembers your choice in this browser. The Time Machine button (a clock turning back) (or <code>Set-SiteTheme</code> in the console) dresses the site in one of its older looks; those are light only, so the theme button is hidden while you wear one, and they keep body text contrast at 4.5:1 or better and visible keyboard focus, and the picker works with the arrow keys, <kbd>Enter</kbd> and <kbd>Esc</kbd>.

## Under the hood

A Hugo static site with plain CSS, OKLCH colour variables, no framework and no CDN: the font (Barlow), the icons (SVG via CSS masks) and the search (Pagefind, indexed at build time) are all served from here. The only third-party script is Microsoft Clarity analytics, and the Melbourne temperature in the footer comes from [Open-Meteo](https://open-meteo.com/), fetched at most every few hours. Assets are content-hashed and the site deploys to GitHub Pages from GitHub Actions on every push.

## Something not working?

I haven't had the site formally audited, so there will be gaps. If something doesn't work with your setup, [email me](mailto:ali@ali.id.au) with what you were trying to do, what happened, and which browser and assistive tech you're using. I'll fix what I can.

