Accessibility for site builders
This page is for website creators who want a site that people with disabilities can use with screen readers, keyboards, magnification or voice control. Accessibility is built in templates and stylesheets and kept up by editors. The reference most legislation points to is the W3C's Web Content Accessibility Guidelines (WCAG).
Contents
What the template author controls
| Area | Do |
|---|---|
| Language | <html lang="..."> from $site.http_equiv.Content-language; lang on content in another language; dir="rtl" for right-to-left (Right-to-left sites) |
| Landmarks | header, nav (with aria-label when there are several), main, footer |
| Skip link | a "Skip to content" link first in the page, to #main (The pagelayout) |
| Headings | one h1 per page (the page name), headings in order |
| Navigation | the current page marked with aria-current="page" (Menus and navigation) |
| Focus | a visible focus style on every link and control; never outline: none without a replacement |
| Contrast | text at least 4.5:1 against its background, large text 3:1 |
| Images | alt from the image's alternative text; decorative images alt="" |
| Motion | respect prefers-reduced-motion for sliders and animations |
| Zoom | layouts that work at 200% zoom and on narrow screens, no horizontal scrolling |
What editors control
- Alternative texts for images: require them on image fields (The content model and editing).
- Link texts that say where they lead.
- Headings in rich text used as headings, in order, not for size.
- Tables with header rows for data, not for layout.
- Plain language, short paragraphs.
Give editors a short list of these with their handover (Handing the site over to editors).
Exponential features that help
- Image fields can require alternative text.
- The online editor writes structured rich text (headings, lists, tables) rather than free HTML.
- Right-to-left content is marked with
langanddirbyparts/exp_content_direction.tpl. - The administration itself follows an accessibility design (admin4 design), so editors with disabilities can work too.
- Content checks find problems in content (Content checks).
Forms
- Every input has a visible
<label>. - Required fields are marked in text.
- Errors are shown next to the field and summarized at the top, and the summary receives focus.
- CAPTCHAs have an accessible alternative (both shipped CAPTCHA services offer one).
Checklist
- To do: Landmarks, skip link and one
h1in every page type. - To do: Keyboard only: every menu, form and dialog can be used and the focus is always visible.
- To do: Contrast checked for text, links and buttons, in every color scheme the design has.
- To do: Images have alternative texts; decorative images are empty.
- To do: Forms labeled; errors announced.
- To do: 200% zoom and a phone width work.
- To do: Tested with an automatic checker and by hand (Testing your site's accessibility).
Related pages
- Testing your site's accessibility
- Accessibility, security and compliance checklists
- Right-to-left sites
- 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.