Skip to content
HisarBlok
Menu
TR

HisarBlok · documentation

Accessibility

The target is WCAG 2.2 AA, on the published sites and in the admin, for people who use a keyboard, a screen reader, speech input, a phone or a zoomed screen.

All docs

For version 0.13.1.

What the sites get

  • Exactly one h1 per page and no skipped heading levels; landmarks (header, navigation, main, footer) and a "skip to content" link.
  • A sticky header never covers the focused element or an anchor target.
  • The small-screen menu needs no script; with a script it closes when focus leaves it and on Escape, and the focus goes back to its button.
  • Form field borders and the focus ring reach at least 3:1 in light and dark; name, email and phone fields carry autocomplete.
  • A refused form is drawn again with a summary announced through role="alert", aria-invalid and its own error text on each wrong field, and everything typed kept.
  • Links that open a new tab say so to a screen reader; repeated "Details" links get distinct names.
  • Code blocks scroll from the keyboard, data tables have headers.
  • Reduced motion and a print view are supported.

What the admin gets

  • A "skip to content" link and landmarks; even in the collapsed menu, links keep their names for a screen reader.
  • The Ctrl+K palette works end to end from the keyboard: the number of results is announced quietly, Tab stays inside, and closing gives the focus back.
  • The confirmation dialog opens with the focus on Cancel; Tab goes round its two buttons and Escape cancels.
  • Stay signed in two minutes before an idle session would be dropped; a warning ten minutes before a sign-in's eight hours are up.
  • Errors are announced with role="alert", other notices with role="status".
  • Text contrast 4.5:1, field borders and the focus ring 3:1, in light and dark. Buttons and lone links are at least 24 px tall.
  • The statistics chart's numbers can be read as a table too.

What a module's screen must do itself

The admin frame gives headings, notices and focus order for free. A module that draws its own screen ties a visible label to each field, marks a wrong field and ties the error text to it, never says something with colour alone, and says where the keyboard lands when the screen is drawn again.

Known gaps

  • In the rich-text editor's toolbar a mark in force (bold on) is shown by colour only, and the arrow keys do not move between its buttons.
  • Some links inside table cells are under 24 px tall; they meet the criterion by spacing, not by size.
  • The button of the browser's own date picker may handle focus differently from browser to browser.

If you run into an accessibility problem, write to us.