Language: Deutsch · English

Accessible layouts

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

HOW-TO LOW-CODE / DEVELOPER UPDATED: JUL 2026 APPLIES TO NUCLOS 4.2026.X

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.

Principle

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;
}

Further notes

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