Skip to main content

Accessibility

Micropage was built by a visually impaired developer, around text and the keyboard instead of a visual canvas. This page lists what every published site gets, what you control in your .page file, and what Micropage doesn't check.

What every published page includes​

  • Language: <html lang> comes from lang: in [site] or the page's meta, and defaults to en.
  • Skip link: the first focusable element is a "Skip to content" link that jumps past the navigation.
  • Landmarks: a labelled <nav>, a <main> and a <footer>.
  • Headings: an h2: line stays an <h2> wherever it sits. Sizing never changes the level, so the page outline is the one you wrote.
  • Keyboard focus: buttons, nav links and post links show a visible focus state. The mobile menu toggle reports whether it is open.
  • Dark mode: pages follow the visitor's system setting.

Color and contrast​

Text on a theme color is picked for you. When you set a color, text on sections with that background comes out #ffffff or #111111, whichever has more contrast by the WCAG formula. Buttons and muted text follow. See Site Colors for the exact rules.

For example, with this in [site], the section below gets white text because the primary is dark:

[site]
colors:
  primary: #b5441b

[Home -> /]

/// section bg:primary
h2: White text, without asking for it

Images​

The words before <- become the image's alt text, so describing the picture is how you add one:

img: Our team at the meetup <- team.jpg

See Images for the other forms.

Forms​

  • Every field has a <label> linked to it.
  • Required fields use the required attribute. The asterisk is hidden from screen readers, and a plain-text key explains it.
  • checkboxes and radios announce their group label with their options.
  • Errors and the success message are announced when they appear.

See Forms.

Tables​

Header cells use scope="col", table: text becomes a <caption>, and a table that scrolls sideways can be focused and scrolled with the keyboard.

What Micropage doesn't check​

  • Missing alt text: an image with no words before <- is published with an empty alt, and nothing warns you yet.
  • Whole-page contrast: text colors are picked for theme colors, but custom colors in a /// html block and fixed text:light or text:dark are yours to check.
  • Raw HTML: anything inside a /// html block is published as you wrote it.