Built to be used by everyone.
The components aim for WCAG AA, the tools check pages against it, and this site has the same goal. This page says how, and where each still falls short.
Components, aiming for AA. One baseline for all of them.
Every component in the library is written to one baseline. WCAG AA is the target, and it is set out in the library's own rules for how a component is built.
-
Semantic markup
Sections, articles, headers and navs where they belong, a button for every action and a link for every place. Headings follow the document, not the type size.
-
Contrast
At least 4.5:1 for body text and 3:1 for large text, with visible focus states on everything you can reach.
-
Keyboard and ARIA
Full keyboard use. Tabs and menus carry their ARIA roles and states, and most FAQs use the native disclosure element.
-
Reduced motion
Every component stylesheet has a reduced-motion block, and moving parts such as tickers pause when they are hovered or focused.
-
Checked by a script
The library's validator flags a stylesheet with no reduced-motion block, a menu button that is not a real button, or a menu toggle without its expanded state.
-
Your part
Heading levels depend on where you place a component, so check them in your page. Outside Terminal, a navigation bar's mobile menu button needs a few lines of your own script.
No automated test checks contrast, focus or keyboard use yet. The docs describe each component's anatomy and what it expects of the page around it.
Check a contrast. Four levels at once.
WCAG AA + AAA in two colors. Paste a text colour and a background and it gives the ratio and four results: AA at 4.5:1 and 3:1, AAA at 7:1 and 4.5:1, for normal and large text.
- Transparent colours are blended over the background first
- It runs in your browser and never counts as a run
- Large text is at least 18 pt regular or 14 pt bold; anything smaller must clear the higher threshold
Presets
Three tools that check a page. Signed in.
They sit with the rest of the tool system. Every one needs you signed in.
-
Contrast Checker
WCAG AA + AAA in two colors. The ratio between a text colour and a background, graded against AA and AAA for normal and large text. It runs in your browser and never counts as a run.
-
Accessibility Audit
Runs the axe-core rules through Lighthouse against any public page, on mobile or desktop, and grades contrast, names and labels, ARIA and structure. Each failure comes with the elements and the fix, checks a tool cannot judge are marked for a manual look, and the report downloads as a PDF.
-
Landmark Map
The page as a screen reader hears it: the landmark tree and the heading outline, in the order the page serves them. It flags a missing or duplicated main landmark, duplicate landmarks with no name, nesting, and no H1, several H1s, empty or skipped headings.
An audit reports what it finds. It does not certify that a site is accessible. Past runs stay in Reports, filed by site.
This site's accessibility statement. Gaps included.
baselumen.com and the Baselumen app aim to meet WCAG AA. This is what is in place, and what is not yet.
- In place
-
Every page declares its language. With reduced motion set on your device, smooth scrolling, scroll reveals and decorative motion are switched off.
The cookie dialog is a labelled dialog: focus moves into it when it opens, Escape closes it, and each choice is a switch that says whether it is on.
In the app, a client's tabs move with the arrow keys, Home and End, and a workspace you cannot open stays in the menu and says why rather than being skipped.
- Known gaps
-
There is no skip link to the main content yet.
The cookie dialog does not yet keep focus inside it, or return focus when it closes.
The app needs a window at least 1024 pixels wide, which can get in the way at high zoom.
- Report a barrier
- Write to support@stacklumen.com with the page's address and what got in the way. Say if you would like the content in another form.
Audit a page. Any public address.
Sign in and point the accessibility audit at any public address.