Accessibility

Public forms must work for everyone, and in Denmark and the EU they must meet WCAG 2.1 AA (EN 301 549). <qf-form> follows the patterns of established design systems such as GOV.UK and Det Fælles Designsystem.

Built in

  • Real form controls in the page's own DOM: every input has a <label>, and groups of radios and checkboxes are a <fieldset> with a <legend>.
  • Errors: a summary at the top with links to each field, and the message above the field. The message is linked with aria-describedby and the field is marked aria-invalid. Focus moves to the summary.
  • Page changes move focus to the new page's heading, and progress is written out ("Trin 2 af 3").
  • Timing: "required" errors do not appear while people are still tabbing through a page.
  • Search fields follow the WAI-ARIA combobox pattern: arrow keys, Enter and Escape, the highlighted suggestion via aria-activedescendant, and a spoken count of suggestions.
  • Lookups say when they are loading, and results that appear (such as a company name) are announced politely.
  • Optional questions are marked "(valgfrit)" instead of marking required ones with a star.
  • Text can be translated in full, and the form's lang follows the chosen language.
  • The default theme has a visible focus ring, strong contrast and large click targets, and works with 200% zoom and narrow screens.
  • The designer can be used with the keyboard: the outline, the dividers between panes (arrow keys) and undo.

Still yours to test

Accessibility depends on the whole page and on what authors write. Test your portal with a keyboard and a screen reader, check your own theme's contrast, and write clear questions and error messages. The designer makes clear messages easy to write, but it cannot write them for you.