How I approach accessibility
I check whether people can navigate the theme with a keyboard, identify controls with a screen reader and use the interface when zoomed.
WCAG 2.2 guides those checks. It groups accessibility requirements into four principles:
- Perceivable
- People can take in the content.
- Operable
- They can use it, including from a keyboard.
- Understandable
- Labels and errors make sense.
- Robust
- Assistive software can read the structure.
A, AA, and AAA
Each level builds on the previous one. AA includes A; AAA includes both A and AA.
-
Foundation
Level A
A criteria
Text alternatives, named controls and keyboard access.
-
Baseline target
Level AA
A + AA criteria
Adds requirements for contrast, focus, labels and navigation. AA is the baseline target; selected theme features also meet AAA criteria.
-
AAA features included
Level AAA
A + AA + AAA criteria
Selected components already meet AAA criteria, including higher text contrast. Coverage varies by theme, component and configuration. Some default design choices may need adjustment to meet the applicable AAA criteria.
AAA support depends on the theme and its configuration. If your institution requires full AAA conformance, review the chosen theme and adjust any remaining components through its settings, CSS or templates. Assess the complete site, including course content and plugins, against all applicable criteria.
What this looks like in a theme
These features are part of the theme interface.
-
Skip link
Press Tab to reach “Skip to main content” and jump past the menu. Criterion 2.4.1 Bypass Blocks (opens in new tab).
-
Visible focus
The focus indicator stays visible when you use the keyboard, including around the fixed navigation bar. Criteria 2.4.7 Focus Visible (opens in new tab), 2.1.2 No Keyboard Trap (opens in new tab), and 2.4.11 Focus Not Obscured (opens in new tab).
-
Landmarks and headings
Pages use header, navigation, main and footer landmarks, with one page title. Criteria 1.3.1 Info and Relationships (opens in new tab) and 2.4.6 Headings and Labels (opens in new tab).
-
Sliders with buttons
Slider controls let you move between items without dragging. Criteria 2.5.7 Dragging Movements (opens in new tab) and 2.5.8 Target Size (opens in new tab).
-
Contrast-ready colours
Default colours meet 4.5:1 for text and 3:1 for interface elements. Recheck contrast after changing theme colours.
-
Labels and errors
Theme form fields have visible labels. Error messages are linked to the relevant field. Criteria 3.3.1 Error Identification (opens in new tab) and 3.3.2 Labels or Instructions (opens in new tab).
What the theme does not cover
Course content, uploaded files and third-party plugins need their own accessibility checks. Custom colours also need to be checked. This page describes theme features; it does not certify a complete Moodle or iomad site.
IncludedTheme features
- Navigation and layout Skip link, header, navigation, main, and footer, with one page title.
- Component colours Supplied text meets 4.5:1. Interface parts such as borders and icons meet 3:1.
- Focus The ring stays visible and is not covered by the fixed bar. Escape closes a menu and returns focus.
- Names and forms Decorative icons are hidden. Theme fields have a visible label, and the error is tied to the field.
Site ownerContent and settings
- Course content Check the lesson text, activities and images you add to courses.
- Alternative text Write alt text for the images you upload.
- Captions, transcripts, PDFs Provide captions and transcripts for media, and check the accessibility of uploaded PDFs.
- Plugins and brand colours Check additional plugins and any colours you choose in the theme settings.
How I check it
- 01 Keyboard Dashboard, course, menu, and a form, with no mouse.
- 02 Screen reader NVDA or VoiceOver on those same screens.
- 03 Zoom 200% and 400%. Text reflows, and nothing essential is clipped.
- 04 Course content A published course with content and activities.
Repeat these checks after adding content, installing plugins or changing theme colours.