Skip to content
Lavia docs

Accessibility

A store locator is often used on the move: on a phone, one-handed, sometimes with a screen reader or a strong zoom. The app’s three blocks aim for WCAG 2.2 level AA, on any Online Store 2.0 theme, so everyone can find their store.

Because the blocks inherit from the theme, their accessibility is a joint effort: what the blocks do, and what the theme does around them. This page details both, then gives a quick check to run after an integration.

What the blocks do

Section titled “What the blocks do”

Colors and contrast

  • The blocks take the theme’s colors. The only colors they set (muted text, control borders) are computed from the theme’s text color, with a contrast of 4.5:1 for text and 3:1 for controls.
  • A state (chosen store, active filter) is drawn with the theme’s text color: a bar, a tint, a thicker border.
  • Color is never the only information: a store’s type is written in the list and the popup, next to its marker’s color, and the opening status says “Open now” or “Closed” next to its green or red dot.

Keyboard and focus

  • Everything works with the keyboard, in the order it is seen: on a phone, the search, the map, then the list.
  • Focus stays visible: the blocks never remove the theme’s outline.
  • The search is an ARIA combobox: arrows to go through the suggestions, Enter to choose, Escape to close then clear. Escape also folds the filters panel.

Screen readers

  • Every control has a label, even when it shows none (the search, the icon buttons).
  • The number of suggestions, the number of stores after a filter and the view on arrival’s fallback sentence are announced.
  • A link that opens a new tab (directions, the page’s map) says so.
  • A clickable store card has a single link read, its name; its other links (phone, directions) keep their action.
  • Photos have alternative text.
  • A store page has a single h1, the name, and headings in order.

Size and motion

  • Click targets are 24 px at least.
  • Sizes are in em and rem: they follow the theme’s text size and the browser’s zoom.
  • Animations are turned off when the visitor asks for less motion (prefers-reduced-motion).

Texts

  • Every text of the blocks, including those read only by screen readers, comes from the app’s language files: they follow the page’s language (English, French, German, Spanish, Italian).
  • Dates, times and distances are written in the page language’s format.

What is left to the theme

Section titled “What is left to the theme”
  • The colors of the section’s color scheme: the contrast between its text and its background. Choose for the block’s section a color scheme that holds 4.5:1.
  • The style of links and buttons: the blocks keep the theme’s.
  • The page’s title: if you place the theme’s heading above the Store page block, empty the block’s Title field, so there is a single h1.

When you restyle a block (see Theme blocks):

  • keep a contrast of 4.5:1 for text and 3:1 for control borders;
  • don’t remove the focus outline;
  • don’t make visible an element meant for screen readers only (store-locator__visually-hidden), and don’t hide it with display: none;
  • keep click targets of 24 px at least.

Check your integration

Section titled “Check your integration”

Once the blocks are placed and restyled, five minutes are enough for the gestures that matter:

  1. Keyboard only, on the store locator page: tab from the search to the list. Focus must stay visible at each step. Type a city, choose a suggestion with the arrows and Enter.
  2. Zoom to 200% in the browser: nothing must overlap or leave the screen.
  3. On a phone, or at 375 px wide: the search, the map and the list must fit together, and at the end of the list the scroll must pass on to the page.
  4. With a screen reader (VoiceOver on Mac and iPhone, NVDA on Windows): on a store page, go through the headings; on the store locator, apply a filter and listen to the announced number of stores.
  5. Contrast: check the colors you changed with a contrast tool.