Accessibility / target WCAG 2.2 AA
Accessibility statement
This page states what was tested, when, and what the results were. A commitment with no measurement behind it is not a statement, it is a sentiment.
- Target WCAG 2.2 AA
- Body text 18.08:1
- Overlays used None
- Response target 7 days
The standard
The standard this site is built to
AA throughout, and AAA for body text, because long-form reading at the AA floor is tiring.
This site targets WCAG 2.2 level AA throughout, and level AAA for body text contrast, which is the one place where clearing the minimum is not enough.
It is hand-coded PHP, HTML and CSS with a small amount of JavaScript. There is no page builder, no accessibility overlay and no widget claiming to fix accessibility at runtime. Overlays do not work and frequently make things worse for the people they claim to help.
The measurements
Contrast, measured
Every colour pairing on this site was computed from its relative luminance rather than eyeballed, at the design stage, before any of it was built.
| Pairing | Colours | Ratio | Required | Result |
|---|---|---|---|---|
| Body text on the page ground | #F2F4F7 on #08090B |
18.08:1 | 4.5:1 | Passes AAA |
| Body text on a raised surface | #F2F4F7 on #101319 |
16.88:1 | 4.5:1 | Passes AAA |
| Secondary and metadata text | #98A1AE on #08090B |
7.63:1 | 4.5:1 | Passes AAA |
| Company orange as text | #FF7F00 on #08090B |
7.86:1 | 4.5:1 | Passes AAA |
| Primary button label on the button | #0B0D10 on #FF7F00 |
7.68:1 | 4.5:1 | Passes AAA |
| Control borders and UI boundaries | #5C6470 on #08090B |
3.33:1 | 3:1 | Passes AA |
| Brand tint as text (lowest of five) | #ce4f23 on #08090B |
4.52:1 | 4.5:1 | Passes AA |
The ground is dark for a measured reason rather than an aesthetic one. The company's own orange is
#FF7F00, taken from its icon. On white it reaches 2.53:1, which fails outright; on
this near-black it reaches 7.86:1. Inverting the ground is what made the brand's own colour usable
as type.
The same problem applies to the five subsidiary hues and is solved the same way. At full strength 365i's navy measures 1.93:1 on this ground and would be illegible. Each brand therefore carries a second, lightened value alongside its own, raised in lightness only so the hue stays recognisable, and it is that value that is ever set as text. Those pairings live in the site's data file rather than in its stylesheet, so a future brand colour cannot quietly fail.
Links are underlined, always. Colour alone is never the only way to tell that something is a link, a state or a result.
The behaviour
Keyboard, motion and structure
Four things that are easy to claim and easy to check, so here is exactly what each one does on this site.
-
Keyboard
Every interactive element is reachable and operable by keyboard in a logical order. A skip link is the first focusable thing on every page. Focus is always visible: a three-pixel outline in the company orange, offset from the element, measuring 7.86:1 against the page ground. That includes the three data tables, which scroll sideways on a narrow screen and so are focusable in their own right. A region that scrolls but cannot be focused cannot be read by keyboard alone, and this sentence was added the day the tables were fixed rather than the day the claim was written.
-
Motion
Everything animated is written as
gsap.from()behind aprefers-reduced-motioncheck, so a reduced-motion request, or a script that simply fails to load, leaves every element in its final state rather than hidden. The only looping thing on the site is the homepage showreel's progress hairline, and it stops when the reel stops. -
Controls that keep moving
The homepage showreel advances on a timer, so under WCAG 2.2.2 it carries an explicit, labelled pause control rather than pausing as a side effect of picking a site. Reduced motion switches off the auto-advance and leaves manual selection working. Without JavaScript it renders as one static screenshot and no dead buttons.
-
Jumping to a section
The contents index at the top of each page scrolls smoothly to the section rather than jumping, so you can see where you have been taken. That is switched off entirely by
prefers-reduced-motion, which restores the instant jump. Either way the section lands clear of the sticky header rather than underneath it, which is checked on every link of every page at three widths rather than assumed. -
Structure, zoom and reflow
Semantic HTML throughout: headings in order, real lists, tables with scoped headers, real landmarks. ARIA only where no native element expresses the role. The layout reflows to a single column with no horizontal scrolling, and wide tables scroll inside their own container rather than pushing the page sideways.
The gaps
What is not perfect
An honest statement lists them.
- This site has not been audited by an independent third party. The testing is our own: automated checks plus manual keyboard and screen reader passes.
- Screen reader testing has been done with NVDA and VoiceOver. It has not been tested with JAWS or with Dragon voice control.
- The data tables carry several columns. They are marked up correctly and they scroll rather than overflow, but a wide table read linearly is inherently harder work than prose, and some of the same information is deliberately repeated in sentences for that reason.
- Background images in page heads and section bands carry an empty
altand are hidden from assistive technology. That is the correct treatment for decoration, but it does mean a screen reader user gets no description of them. Nothing on this site is stated only in a picture. - External sites we link to are outside our control and may not meet the same standard.
Reporting
Reporting a barrier
Treated exactly like a factual correction: investigated, fixed, and the fix recorded.
If something on this site is not usable for you, please tell us at support@bsolveit.com. Please say which page and what happened. We aim to respond within seven days.
The process is on the editorial standards page, and the contact page has a form if you would rather not open a mail client.