Beta . Ortha CMS is in public beta. Every plan is free until it ends.
Features Ortha CMS on GitHub

Accessibility and theme

Shell plugin @orthacms/shell-admin

What the admin commits to for accessibility, how it is verified, and where the gaps are.

Documents 0.13.1 Updated Edit this page Report a problem

On this page

The admin targets WCAG 2.1 AA and is tested for it: automated checks run over the pages in both themes, and the interface is walked by keyboard.

Keyboard

Everything works by keyboard.

  • Dialogs keep focus inside and return it to whatever opened them.
  • Menus close on Esc and return focus to their button.
  • Deleting the tile you were on moves focus to the surrounding section, not the top of the page.
  • The entry editor’s properties panel opens from a button that stays in the top bar, and closing it — Esc, a click outside, or Hide — puts focus back on that button. On a desktop, while it is open the page behind it is out of reach, so focus cannot wander under it. Pinned as a column, its collapse button exists in the panel and in the top bar, and focus moves between them.
  • The entry editor saves with ⌘S, publishes with ⌘⇧P and opens the properties panel with ⌘. (Ctrl elsewhere). The Save draft and Publish buttons announce theirs.
  • Go to field in the editor’s status list, and a section picked in On this page, move focus into the field itself.
  • Every resizable edge — the sidebar, the pinned properties panel, the media folders — is a focusable splitter that announces its width: ← / → resize by 16px (64px with Shift), Home / End jump to the narrowest and widest, and Enter collapses the sidebar or the properties panel.
  • Selection in tables is announced, including the {n} selected bar.
  • A saved view’s menu opens from the keyboard with Shift+F10 or the context-menu key; F2 renames the view in its tab, and focus returns to the tab.
  • In the Media Library’s details panel, ← / → step through the files and Esc closes it, returning focus to the file that opened it.
  • Form sections are headings with a fold button — heading navigation lands on them, and the button says whether it is open, how many fields need fixing and how many changed.
  • The locale menu reads its summary as one sentence, then each language row, including why an inactive row cannot be chosen.
  • The Ask Ortha AI button’s name is its visible label, and it announces its shortcut; its tooltip shows on hover only, so it never covers a chat window. A minimised chat’s pill says in words whether it is working, finished or waiting for you, and its close button has its own name.

Content is checked too

The rich-text editor checks what you write — heading order, table headers, link text, language markers — and shows every finding while you can still fix it. The server refuses the errors; the editor also shows the advice. See the rich-text editor.

Alt text can be written at upload and in the file’s details panel, the grid marks images that have none, and Insights counts them.

Language

  • Every language in the system has a standard language tag, so screen readers pronounce translated text correctly.
  • Right-to-left languages are laid out right-to-left automatically.
  • A passage inside a rich-text body can be marked as another language.

Theme

Colour theme — Light, Dark or System — in Preferences on your own user page.

  • Saved to your account, so it follows you to other browsers.
  • A browser that has used the admin before shows your theme from the first moment. A brand-new browser starts with your system’s theme and switches once your preference loads.

Colour pairs are measured: at least 4.5:1 for text and 3:1 for control edges.

The widths you give the resizable panels are saved to your account the same way.

Motion

Pages cross-fade as you move between them, dialogs and tooltips ease in, and a tab’s indicator slides to the one you pick. With your system set to reduce motion, none of it moves: pages switch at once and everything simply appears. A highlight that marks something just created is a change of colour, not movement, so it stays.

Where the gaps are

Two honest caveats

Content colours are not checked. You can set a text colour and highlight that are unreadable together; nothing warns you.

Only the shipped admin is covered. Plugins your developers add are their responsibility.