Accessibility
This site follows the UK’s accessibility standard for websites, the Web Content Accessibility Guidelines (WCAG) 2.2 at level AA. Some help is always on. Accessibility mode adds more for anyone who finds screens hard to read or use. It keeps the site’s colours and layout, and only changes this browser.
Always on, for everyone
- “Skip to main content” appears when you first press Tab.
- A thick black and yellow outline shows where you are when you use the keyboard.
- Everything you can click can be reached with Tab and used with Enter or Space.
- Buttons that only show an icon, and boxes that only show grey example text, have names that screen readers say out loud.
- If your device is set to reduce motion, animations are switched off.
- Zoom in the account menu on the home page goes up to 200%.
When Accessibility mode is on
- Grey text and outlines are darker, so they’re easier to see.
- Small buttons are made at least 24 by 24 pixels.
- Text links are underlined.
- Text has a little more space between lines.
- Animations are switched off.
- The setting carries across every page of this site, including the reports.
verifiedAccessibility statement
Which standards this site follows. WCAG 2.2 level AA. This is the standard UK public sector websites must meet under the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018, and the usual way of showing “reasonable adjustments” under the Equality Act 2010. JMS Consulting’s council clients are bound by those Regulations, so this site is built to the same standard.
How far it meets them: partly compliant. The table shows each WCAG 2.2 AA point that has been worked on. It has been checked by hand in Chrome; it has not yet been tested with a screen reader.
| WCAG 2.2 point | What it means | On this site |
|---|---|---|
| 3.1.1 Language (A) | The page says which language it is in | Met: British English on every page |
| 2.4.1 Bypass blocks (A) | A way to skip past repeated menus | Met: “Skip to main content” appears on the first Tab |
| 2.4.2 Page titled (A) | The browser tab names the page | Met: every page has its own title |
| 2.4.7 Focus visible (AA) | You can see where the keyboard is | Met: black and yellow outline when using the keyboard |
| 3.2.3 Consistent navigation (AA) | Menus stay in the same place | Met: the same sidebar and top bar on every report |
| 1.3.4 Orientation (AA) | Works upright and on its side | Met |
| 3.3.8 Accessible sign-in (AA) | No memory puzzles to sign in | Met: passwords can be pasted or filled by a password manager |
| 1.4.4 Resize text (AA) | Text can be made twice as big | Partly: Zoom on the home page goes to 200%; report pages use the browser’s zoom |
| 1.4.3 Text contrast (AA) | Text stands out from its background | Met in Accessibility mode for the site’s own text. Chart and map colours not checked. |
| 1.4.11 Non-text contrast (AA) | Boxes, outlines and controls are easy to see | Met in Accessibility mode (darker outlines) |
| 1.4.1 Use of colour (A) | Colour is never the only clue | Met in Accessibility mode (links underlined) |
| 1.4.12 Text spacing (AA) | More space between lines doesn’t break anything | Met in Accessibility mode, which adds the extra spacing |
| 2.5.8 Target size (AA) | Buttons are big enough to tap | Met in Accessibility mode (at least 24 by 24 pixels) |
| 2.2.2 Pause, stop, hide (A) | Nothing keeps moving on its own | Met in Accessibility mode, or automatically if your device is set to reduce motion |
| 2.4.11 Focus not hidden (AA) | The keyboard outline isn’t covered up | Partly: Accessibility mode keeps focused items clear of the top and bottom |
| 2.1.1 Keyboard (A) | Everything works without a mouse | Partly, always on: clickable items work with Tab, Enter and Space |
| 4.1.2 Name, role, value (A) | Screen readers know what each control is | Partly, always on: icon-only buttons and example-text-only boxes have spoken names |
| 4.1.3 Status messages (AA) | Pop-up messages are read out | Partly: the Library and the Data Transfer report announce theirs |
| 2.5.7 Dragging (AA) | Anything you drag can be done another way | Partly: the Library editor has arrows as well as dragging; maps need dragging to move around |
| 1.4.10 Reflow (AA) | Works on a narrow screen | Partly: tables scroll sideways, which the standard allows for tables |
| 3.3.2 Labels (A) | Every box says what to type | Partly: every box has a spoken name; some only show grey example text on screen |
| 1.1.1 Text alternatives (A) | Pictures have a description | Not yet: Library photos, maps and charts have no separate descriptions |
reportReporting a problem
If something on this site is hard to use, email jetmistry@jmsconsulting.org and say which page it was on. If you need a report in another format, ask and it will be provided.
Statement prepared 1 October 2026, site version 131. Reviewed when the site changes.
infoWhat has been done
A plain description of every accessibility change, done and not done, written so it can be copied and reused on another project.
ACCESSIBILITY WORK — jmsconsulting.org v131 (1 October 2026)
Standard followed: WCAG 2.2, level AA (Web Content Accessibility Guidelines).
UK context: the level public sector sites must meet under the Public Sector
Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations
2018; also the usual evidence of "reasonable adjustments" under the Equality
Act 2010. Overall status: partly compliant.
The same work was done on LifeSync v147, so both sites behave alike.
How it is built: one shared file, /assets/site-a11y.js, is loaded at the
end of every page (home, sign-in, Admin, every Library, every Bolton
report, the Structures Toolkits and SLVI, and the Accessibility page). It
adds its own small style sheet, so no page's own design was edited.
=====================================================================
A. ALWAYS ON (for everyone, no setting needed)
=====================================================================
1. Language of the page — WCAG 3.1.1 (A)
Every page's html element carries lang="en-GB", so screen readers use
British English pronunciation.
2. Skip link — WCAG 2.4.1 (A)
A link "Skip to main content" is put first in every page. It is hidden
off-screen until it receives keyboard focus, then appears at the top
left (yellow #FFDD00 background, black #0B0C0C text and outline,
GOV.UK style). It jumps to the page's <main> element, or to its first
<h1> where a page has no <main>; that element is given tabindex="-1" so
it can take focus.
3. Page titles — WCAG 2.4.2 (A)
Every page has its own title, e.g. "Structures Register (Flat File) |
JMS Consulting"; a Library's title names its domain, e.g. "Bolton
Council Library | JMS Consulting".
4. Keyboard focus outline — WCAG 2.4.7 (AA)
Anything focused with the keyboard gets a 3px black (#0B0C0C) outline,
2px away from it, with a 7px yellow (#FFDD00) ring outside — the
GOV.UK focus style. It uses :focus-visible, so it does not appear for
mouse clicks or taps.
5. Keyboard access to clickable items — WCAG 2.1.1 (A)
A helper runs when each page loads and again whenever new content is
drawn (a MutationObserver, debounced to 300 ms). Every element that has
an onclick but is not already a button, link or form field, and which
does not contain its own buttons or links, gets tabindex="0" and
role="button". Pressing Enter or Space on it clicks it.
6. Names for icon-only buttons — WCAG 4.1.2 (A)
The same helper gives every button that shows only an icon (no visible
words) an aria-label copied from its tooltip (title), so screen readers
don't read out the icon's internal name.
7. Names for boxes that only have example text — WCAG 4.1.2 (A) and
1.3.1 (A)
Every text box, text area and drop-down with no label (no <label>,
aria-label or aria-labelledby) gets an aria-label copied from its grey
example text (placeholder), or for a drop-down from its tooltip.
8. Reduced motion from the device setting — supports WCAG 2.2.2 (A)
If the phone or computer is set to "reduce motion"
(prefers-reduced-motion: reduce), all animations and transitions are
cut to almost nothing.
9. Text can be made larger — WCAG 1.4.4 (AA)
The Zoom slider in the account menu on the home page now goes from 80%
to 200% (was 130%). Report pages use the browser's own zoom.
10. Already in place: the same reports sidebar and top bar on every
Bolton report (WCAG 3.2.3, AA); sign-in allows paste and password
managers (WCAG 3.3.8, AA); pages work upright and on their side
(WCAG 1.3.4, AA); sliders that resize a page show an outline and only
change the page when let go; the Library editor's drag-to-move also
has up and down arrow buttons and arrow keys (WCAG 2.5.7, AA); the
Library and the Data Transfer report announce their pop-up messages
(role="status", WCAG 4.1.3, AA).
=====================================================================
B. ACCESSIBILITY MODE (on/off; saved in this browser under the key
"jms-site-a11y-mode"; adds the class "a11y-mode" to <body> on every
page). The switch is in the account menu on the home page, in the
signed-in menu on every report and toolkit page, and on the
Accessibility page.
=====================================================================
1. Stronger text and outline colours — WCAG 1.4.3 (AA), 1.4.11 (AA)
Secondary (grey) text becomes #3F464D (the variables --on-surface-muted
and --muted). Outlines become #858E96 (--outline) and strong outlines
#5F6B76 (--outline-strong). The chosen colour palette is otherwise
kept, and no line is black.
2. Focus kept clear of fixed bars — helps WCAG 2.4.11 (AA)
Focused items are kept 90px clear of the top and bottom of the screen
when the page scrolls to them (scroll-margin).
3. Bigger small targets — WCAG 2.5.8 (AA)
Buttons, button-like elements, drop-downs, tick boxes and radio
buttons are at least 24 by 24 pixels.
4. Links not shown by colour alone — WCAG 1.4.1 (A)
Plain text links in the main content, paragraphs and lists are
underlined, with the underline 3px below the text.
5. Text spacing — WCAG 1.4.12 (AA)
Line height 1.6 for the page, paragraphs and list items; word spacing
0.06em.
6. No movement — WCAG 2.2.2 (A)
All animations and transitions are cut to almost nothing.
=====================================================================
C. NOT DONE YET (known gaps)
=====================================================================
- 1.1.1 Text alternatives (A): Library photos have captions but no
separate descriptions; the report maps and charts have no text
alternative beyond the tables beside them.
- 3.3.2 Labels or instructions (A): boxes that only show grey example text
now have a spoken name, but on screen the example text still disappears
once you start typing.
- 2.5.7 Dragging movements (AA): moving around the report maps needs
dragging (the zoom buttons work without it).
- 1.4.10 Reflow (AA): wide tables scroll sideways (allowed for tables);
not every page has been checked at 320px wide.
- 1.4.3 / 1.4.11 contrast of chart and map colours (BCI bands, flood
layers) has not been checked.
- PDFs made from the reports are print copies; they are not tagged for
screen readers.
- Not yet tested with a screen reader (VoiceOver, TalkBack or NVDA).
=====================================================================
D. HOW TO REUSE ON ANOTHER PROJECT
=====================================================================
- Copy /assets/site-a11y.js and add one line before </body> on every page:
<script src="/assets/site-a11y.js" defer></script>
Section A then works straight away and changes nothing visible except
the skip link and the keyboard outline.
- For section B, put a <button class="jms-a11y-switch"></button> wherever
the switch should appear; the script turns it into the switch. Change
the variable names in its style sheet if the project's grey-text and
outline variables are called something else.
- Publish an accessibility statement listing each WCAG point as Met,
Met in Accessibility mode, Partly, or Not yet, with a date and a way to
report problems.