Page 3 - Barrierefreiheit

A WCAG audit produces a snapshot that can already be stale by the next deployment, because a new feature, a changed component markup, or an updated third-party script can shift the state of a page within minutes. Lighthouse CI closes exactly that gap by measuring the accessibility score automatically on every build, checking it against a defined threshold, and surfacing a regression immediately instead of only discovering it months later during the next manual review. This article covers setting up Lighthouse CI as continuous monitoring in a Magento and Hyvä deployment pipeline.

A dropdown menu that only works with a mouse, or a tab bar that requires ten separate Tab presses to jump between individual tabs, violates established WAI-ARIA expectations. Keyboard navigation in React follows fixed patterns like roving tabindex and arrow key handling that can be reused across any complex component.

Using outline:none without a replacement makes it practically impossible for keyboard users to operate a page, because it stays invisible which element is currently active. With :focus-visible, high-contrast focus rings and clear WCAG criteria, this common mistake can be fixed precisely, without sacrificing visual calm for mouse users.

Form elements are among the hardest HTML elements to style. Browser defaults, platform-specific appearance and missing utility hooks turn checkboxes, select dropdowns and custom inputs into a constant challenge. The @tailwindcss/forms plugin solves this systematically.

Date pickers and comboboxes are among the most demanding interface patterns on the web because they constantly switch between a closed input field, an open suggestion list and an actively highlighted option. Implementing the WAI-ARIA combobox pattern precisely, testing keyboard and screen reader together, and offering an independent text-input fallback makes date selection and autocomplete reliably usable for every user group, even without a mouse.

A form error, a new toast message, or an updated cart count all stay invisible to screen reader users as long as React only updates the DOM visually. An ARIA Live Region closes this gap by actively announcing changes without moving keyboard focus or interrupting ongoing input.

Building accessible interfaces does not require expensive extra tooling. Chrome and Firefox already ship with an Accessibility panel, a computed name inspector and color vision deficiency simulation, everything needed to check roles, names and contrast right in the browser. This article shows how to use these built in tools effectively and where the Lighthouse Accessibility Audit reaches its limits.

The native browser arrow of a select element rarely matches a carefully considered design system, and appearance: none removes exactly that one visual detail, without impairing built in keyboard control, type ahead search, or screen reader announcement. Anyone who uses this technique correctly saves the entire rebuild of a dropdown in JavaScript.

Drag and drop looks simple, until you are debugging ghost images, touch events refuse to work on mobile devices and the state after the drop is inconsistent. Vue 3 provides all the building blocks for clean drag and drop, free of visual or logical chaos, through the Composition API and specialized libraries.

For decades, CSS could not select a parent element based on the state of one of its children. The :has() selector closes exactly this gap and makes form wrappers, fieldsets and entire form sections reactive to :invalid, :user-invalid and :checked, with not a single line of JavaScript.