Nuclos accessible layouts: BITV 2.0/WCAG 2.1, complete labels, headings, keyboard navigation, contrast, visually-hidden.

Language: Deutsch · English

Accessible layouts

Design accessible Web Client layouts – labels, structure, keyboard navigation, contrast (BITV/WCAG).

On this page

Nuclos provides the basis for an accessible Web Client per BITV 2.0 / EN 301 549 / WCAG 2.1. This page summarizes the key techniques for accessible layouts.

The simpler (ideally linear) the layout, the easier the operation. If needed, create a separate Web Client layout (key weblayout in the layout usage).

Labels & structure

Complete labels: „with label“ data components set the for attribute to the input – without a label screen readers cannot tell the field's purpose.
Structure: real headings <h1>…<h6> (static HTML component) instead of purely visual panels.
Toggle tips: tooltips appear via a question-mark button (click) instead of on mouseover.

Keyboard navigation

Link all layout elements via Next field or Next component (only one, unique names). The resulting graph must be a closed loop and all elements must be visible. Include inactive fields and texts with links too. Tab panels: the first navigable element in each tab needs the same name (dummy element).

Responsiveness & contrast

Content must be reachable at 400% zoom (1280px) resp. 320px without horizontal scrolling – a single-column layout is recommended. Informative graphics/controls need at least 3:1 contrast.

Visually hidden elements

A bundled CSS class exists for hints to assistive technology:

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

Alt texts: informative images need an alt text, purely decorative ones an empty alt="". Avoid purely visual hints in instructions („the green button“).

Related pages

Keyboard navigation

Keyboard operation.

Öffnen →

Custom CSS

Custom styles/classes.

Öffnen →