Keyboard shortcuts and table of contents

RoseaThemes
A profile of a head opens toward an orbit of accessibility symbols: an eye, a person icon, an ear, and a keyboard, drawn in blue, white, and orange.

WCAG

Accessibility is part of how I build Moodle themes — not something added after the interface is finished.

What's in the theme Documentation

How I approach accessibility

Accessibility has been part of how I build Moodle themes for years. Not as an extra feature and not as a widget added at the end.

A Moodle site is something people use every day — to study, teach, manage courses, submit work or find information. If part of that interface cannot be reached with a keyboard, understood by a screen reader or used at 200% zoom, I do not consider the design finished.

I use WCAG 2.2 as the practical baseline. Its four principles are a useful way to describe what I am trying to achieve:

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

I work mainly around WCAG 2.2 Level AA. In practice, that means much more than checking colours. I look at keyboard navigation, focus states, headings, labels, forms, menus, page structure and the way components behave when the interface is zoomed or used with assistive technology.

  • Level A

    The floor. Without it, some people cannot use the page at all: a control with no name, an image with no text alternative, or a path that only works with a mouse.

  • Level AA

    The usual requirement, including EN 301 549 for public procurement in the EU. I build and check the theme interface against WCAG 2.2 Level AA: contrast, focus, headings, labels, and keyboard access.

  • Level AAA

    Extra rules such as 7:1 text contrast or sign-language interpretation. Useful in places, not practical across every Moodle screen. These themes do not claim AAA.

What this looks like in a theme

Some of this is almost invisible when everything works properly. The accessible baseline is built into the theme code, not added later as an optional overlay.

Skip link

First Tab reaches “Skip to main content” and jumps past the menu. Criterion 2.4.1 Bypass Blocks.

Visible focus

The ring stays visible and is not covered by the fixed bar. Criteria 2.4.7, 2.1.2, and 2.4.11.

Landmarks and headings

Header, navigation, main, and footer stay in order, with one page title. Criteria 1.3.1 and 2.4.6.

Sliders with buttons

Dragging is not the only way to move. Criteria 2.5.7 and 2.5.8.

Contrast-ready colours

Supplied colours meet 4.5:1 for text and 3:1 for the interface. A pale brand palette can fail that.

Labels and errors

Theme fields have a visible label, and the error is tied to the field. Criteria 3.3.1 and 3.3.2.

What the theme does not cover

There is also a limit to what a theme can do. I can make the navigation, components, forms and default colours accessible, but I cannot fix inaccessible course content, PDFs, videos or third-party plugins from inside the theme. This page describes the theme itself, not a certificate for a finished Moodle platform.

Ships in the codeIn the theme

  • 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.

Not in the themeStill on your side

  • Course content Lesson text, activities, and images you add are outside the theme files.
  • Alternative text An image with an empty description stays empty. The theme cannot invent that text.
  • Captions, transcripts, PDFs Video, audio, and files you upload are separate documents. They need their own text alternative.
  • Plugins and brand colours An extra plugin, or a pale palette you set in the theme settings, can drop the page below AA.

How I check it

  1. 01 Keyboard Dashboard, course, menu, and a form, with no mouse.
  2. 02 Screen reader NVDA or VoiceOver on those same screens.
  3. 03 Zoom 200% and 400%. Text reflows, and nothing essential is clipped.
  4. 04 A real course One published course, not an empty demo site.

Automated scanners are useful as a first pass, but they do not tell me whether navigating through a real course actually makes sense. I still test the theme manually with a keyboard, a screen reader, zoom and published course content.