# Accessibility
> Keyboard order, skip links, focus management across composed layouts, and the ARIA the component set requires.
---
LLMS index: [llms.txt](/brand/llms.txt)
---
Accessibility appears throughout this system as measurements — contrast ratios
on [Colour](/brand/docs/foundations/color/), the 44px touch floor on
[Responsive](/brand/docs/foundations/responsive/), the focus trap on
modals. This page covers what those cannot: **order, announcement, and focus**
— the properties that only exist once components are composed into a screen.
The target is **WCAG 2.2 Level AA**.
## Reading and focus order
There is one order, and the DOM defines it. Keyboard order, screen-reader order,
and visual order must agree.
That makes source order a **layout constraint**, not a detail: write regions in
the order they should be read, and let CSS place them. The
[page shell](/brand/docs/interface/patterns/) is therefore authored as
skip link → header → sidebar → main → complementary, and Grid puts the sidebar
on the left.
**Never use `order`, `row-reverse`, or `grid-area` to change the sequence a
reader encounters.** It moves the pixels and leaves the keyboard behind, which
is exactly the bug that a
[stacked mobile layout](/brand/docs/foundations/responsive/) exposes:
if the DOM is already in reading order, the collapse to one column is free.
**Never set a positive `tabindex`.** `tabindex="0"` puts an element in the
natural order and `tabindex="-1"` makes it programmatically focusable; anything
above zero creates a second, competing order.
## Skip links
Every page begins with a skip link — the first focusable element in the DOM,
visually hidden until focused, then rendered as a normal control against the
midnight header.
One skip link per major landmark the keyboard would otherwise have to traverse.
For the page shell that is two: **Skip to content** and **Skip to navigation**.
A sidebar of thirty items in front of the content is thirty tab stops on every
single page.
```html
Skip to contentSkip to navigation
```
```css
.pj-skip {
position: absolute;
left: var(--space-4);
top: calc(-1 * var(--space-9)); /* off-screen, still focusable */
z-index: 100;
padding: var(--space-2) var(--space-4);
min-height: 44px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
transition: top var(--duration-standard) var(--ease-out);
}
.pj-skip:focus { top: var(--space-4); }
```
The target must be able to receive focus: ``.
Without it, some browsers move the viewport but leave focus at the top of the
document, and the next `Tab` lands back in the navigation.
## Landmarks
The page shell maps onto landmarks one-to-one. Use the elements, not `role`
attributes on `div`s:
| Region | Element | Notes |
|---|---|---|
| Sidebar | `