Accessibility
This page is for developers responsible for making a site usable by everyone, including people who use a screen reader, a keyboard, high zoom or high contrast. On an Exponential site, accessibility depends mostly on your design and templates, and partly on the content model, which can make good practice the default for editors.
Contents
- Where the product stands
- What the content model can do
- Templates and designs
- Forms
- Testing
- Editors
- Checklist
Where the product stands
The project's own assessment is in Accessibility standards: against WCAG 2.2 level AA and WAI-ARIA 1.2 the product partly complies: the admin4 administration was built and tested against AA criteria, the classic administration partly fixed, and the public designs and the online editor are not audited. EN 301 549 and Section 508 are unverified. For a public site, that means your design is what an audit judges: plan for it in your own templates and test it yourself.
What the content model can do
| Decision | Effect |
|---|---|
| Image attributes with Alternative text is required | editors cannot store an image without a text (Images and image aliases) |
| Image objects related or embedded instead of images in many fields | one alternative text, kept up to date in one place |
| Rich text instead of many small fields | real headings, lists and tables, not visual imitations (Rich text) |
| A small set of custom tags with accessible templates | fact boxes, quotes and calls to action with correct markup everywhere |
A title attribute used for the page's <h1> | one heading per page from content |
| A language per translation | the pagelayout can set the page's lang attribute from the content language (Translations and languages) |
Templates and designs
The designers' help covers each topic with examples:
| Topic | Page |
|---|---|
| The basics for a theme | Accessibility basics for themes |
| Landmarks and headings | Landmarks and headings |
| Skip links | Skip links |
| Keyboard and focus | Keyboard and focus |
| Color contrast | Color contrast |
| Reduced motion | Reduced motion |
| Right-to-left languages | Right-to-left designs |
Rules that hold on every Exponential design: CSS in stylesheets with tokens and a dark value for each color token, no inline CSS, no inline JavaScript (No inline CSS). Layouts blocks are templates too: check their markup like any other (Styling layout blocks).
Forms
The shipped collect and user templates print inputs without ids; give your copies ids so labels work, show
validation messages next to the field and in text, and use autocomplete on sign-in and registration forms
(Accessible forms,
User and login templates,
Forms and information collection).
Testing
- Keyboard only: every link, menu, form and dialog reachable and usable, focus always visible.
- Zoom: at 200% and at a narrow width nothing overlaps or scrolls sideways (Testing at zoom levels).
- Contrast: text at least 4.5:1, in light and in dark mode.
- A screen reader on the main templates: front page, a list, a full view, a form, search.
- Automated checks help find missing labels and alternative texts; they do not replace the manual tests.
- Your own design checks: Checklist: accessibility.
Editors
Accessible templates can still get inaccessible content. Brief editors on alternative texts, meaningful link texts, heading order in rich text and captions for video. The editors' course has the material (Editors 101); trainers who teach accessibility find it in Train the trainer, module 5.
Checklist
- To do: Image attributes require alternative text; decorative images have an empty
altin the template. - To do: One
<h1>per page, headings in order, landmarks present, a skip link first. - To do: Every form field has a label; errors are announced in text.
- To do: Keyboard, zoom and contrast tested in light and dark mode on the main templates.
- To do: The
langof each page matches its content language. - To do: Editors briefed.
Related pages
- Accessibility standards
- Project launch checklist
- Designers: start here
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.