Accessibility and keyboard use

This page is for anyone who works the keyboard rather than a mouse, uses a screen reader, or finds motion and colour hard to read. It applies to every role and every page.

Skip to content

Every page has a hidden link that appears as soon as you press Tab on a freshly loaded page. A black bar labelled SKIP TO CONTENT appears at the top left. Press Enter and focus jumps past the header menu to the main part of the page.

Use it when you do not want to tab through every menu item on every page. It works on the dashboard, Participants, profiles, the Prashan page, Help and the admin pages.

Moving with Tab

• Tab moves to the next link, button or field. Shift+Tab moves back.
• Whatever has focus gets a thick black outline, 3 pixels wide with a 3 pixel gap. It is the same on every page, so you always know where you are.
• In a form, Tab moves field to field in the order they appear on screen.
• Space ticks or unticks a tick box. Space or Enter presses a button.
• On dropdowns, use the arrow keys to change the value.

Black buttons change to white with black text when they receive focus, the same as when the mouse hovers over them.

Enter confirms, Esc cancels

• In the Manual Search box on the Prashan page, Enter runs the search.
• On the login page, Enter in the password field logs you in.
• In the registration form, Enter inside a text field does not submit by accident; use the button at the end.
• In a confirm dialog, Tab to the button you want and press Enter.
• Esc closes confirm dialogs, the remarks modal on a profile, the guardian search and add-guardian modals on the edit page, and the Explore Features and Contact boxes in the footer. Closing with Esc is the same as pressing Cancel.

Esc on the site-mismatch warning

When you verify a child whose preferred site differs from yours, Esc on that warning means Proceed, not cancel. To change the site, click Change site.

Esc sometimes does nothing while your cursor is inside a multi-line text box. Click outside the box, then press Esc.

Reduced motion

If your device is set to reduce motion, SBDMS follows it:

• The grey loading placeholders stop shimmering and show as still blocks.
• The spinning circle on the Working… screen turns slowly and evenly instead of fast.

How to turn it on:

• Windows: Settings, Accessibility, Visual effects, turn off Animation effects.
• macOS: System Settings, Accessibility, Display, tick Reduce motion.
• Android: Settings, Accessibility, Remove animations.
• iPhone / iPad: Settings, Accessibility, Motion, Reduce Motion.

Other movements, such as a toast sliding in, are short and stop within a fraction of a second.

Screen readers

Pages use real buttons, links, tables and labels, so a screen reader announces them correctly.

• Form fields have visible labels that the reader speaks.
• The Working… screen is announced as a status while it is showing.
• Pop-up warnings on the Prashan page and the registration form are marked as dialogs with a title, so the reader says what the box is for when it opens.
• The Admin section in the phone menu announces whether it is expanded or collapsed.
• Toasts appear and disappear on their own; some readers may not announce them. If an action seems to have done nothing, check the record or repeat it.

The team tests with VoiceOver on Safari and NVDA on Firefox. Some pop-ups built with the app’s scripting library do not always announce when they open. If you hit one, Tab once and the reader picks up the box.

The black-and-white theme

SBDMS has two colour themes. Both use a white background; only the ink colour changes.

• Olive is the default. Buttons, borders and headings are olive green.
• Mono is pure black on white, for the highest contrast.

To switch, scroll to the footer of any page and click the small square button that says Olive or Mono. The label shows the theme you are on now; clicking it swaps to the other. Your choice is saved in a cookie for a year, so it stays after you close the browser. If cookies are blocked, the theme still applies until you leave the page.

Text size

SBDMS uses normal browser text sizes. Press Ctrl and + (or Cmd and + on a Mac) to zoom in. Tables scroll sideways inside their box when they get too wide, so nothing is cut off.

Keyboard shortcuts cheat sheet

Keys	Where	What happens
Tab on a fresh page	Any page	Shows the SKIP TO CONTENT link
Tab / Shift+Tab	Any page	Next / previous link, button or field
Enter	On a button or link	Activates it
Space	On a tick box	Ticks or unticks
Enter	Manual Search box, login password	Search / log in
Esc	Confirm dialog, remarks modal, footer boxes	Closes without saving
Esc	Site-mismatch warning during verification	Proceeds (same as Proceed)
Ctrl+P / Cmd+P	Child or guardian profile	Prints a one-page profile
F5 / Ctrl+R / Cmd+R	Any page	Reloads
Ctrl+Shift+R / Cmd+Shift+R	Any page	Reloads and ignores the browser cache
F12 / Cmd+Option+I	Any page	Opens developer tools to find a trace ID
Ctrl+F / Cmd+F	Any page	Finds text on the page

There are no single-letter shortcuts. Typing in a field never triggers an action by accident.