Accessibility

#Structure

Screen readers turn a page into a single line. People move through it by landmarks and headings, so the design decides both:

• Landmarks: mark the big areas of the page: header, navigation, search, main content (exactly one), aside, footer. If an area appears twice (a top menu and a footer menu), give each a name that tells them apart.
• Headings: one page title (H1), then sections (H2), then sub-sections (H3), never skipping a level. Levels follow the content's structure, not how big the text looks. A large price isn't a heading; a small "Caratteristiche" section title is.
• Hierarchy: put related things together, and keep the main action easy to reach on a phone.

#Focus and flow

Everything must work with a keyboard alone: Tab moves between controls, arrow keys move inside a group, Enter activates.

• Reading order is focus order. Design the layout so the natural order (left to right, top to bottom) is the right order to move through it.
• Decide the first focus of each page and each overlay: on a search page, probably the search field.
• Overlays give focus back. When a modal or drawer closes, focus returns to the control that opened it.
• Groups are one stop. A row of filter chips, tabs or a photo strip is reached with one Tab and moved through with the arrows.
• No mouse-only actions. Nothing reachable only by hover, drag or swipe.

The focus ring is global (--ds-focus-ring-*). Never remove an outline. If a component draws its own focus state, it must be at least as visible.

#Labels and images

• Name what has no text: icon-only buttons, meaningful icons (status, energy class), meaningful photos and charts.
• Name generic actions in context: several "Salva" or "Scopri di più" on one page each need a name that says what they act on.
• Names say the purpose, not the look: "Salva l'annuncio", not "Cuore". Don't add the role ("pulsante"): screen readers say it already.
• Decorative images are marked decorative, so they're skipped.
• Alt text is short (under about 125 characters) and starts with the content, not "Immagine di". No essential information only inside an image.

#Target size

Use tw-min-h-target (24px, the WCAG minimum) as the floor, and tw-min-h-target-comfortable (44px) for primary actions and anything used on phones. Material recommends 48px for touch, so on touch-heavy screens consider whether 44 is enough (a /ds-add decision). Keep at least tw-gap-2 (10px) between neighboring targets so they aren't hit by mistake.

#Contrast beyond text

Text needs 4.5:1, or 3:1 when it's large. Controls that sit in a group (a row of buttons or chips) also need 3:1 between each control and the background, so each one can be told apart. A single, prominent control stands out by itself. Disabled controls are exempt.

#States people need

Design the states, not just the happy path:

• empty;
• loading;
• error, with what to do next;
• very long text;
• missing image;
• missing price;
• one item, and many items.

#Copy

Use clear action labels ("Contatta l'agenzia", not "Clicca qui"), and error messages that say what happened and how to fix it. Text must survive zoom and longer translations without being cut off.