Page 2 - Barrierefreiheit

A green jest-axe report does not mean a React application is actually usable with NVDA or VoiceOver. Automated tools find structural ARIA errors, but not confusing announcement order or illogical focus jumps. This guide shows how to build screen reader testing for React apps systematically across both layers.

Automated accessibility testing with axe-core covers only about 30 to 40 percent of all WCAG criteria, but those categories, things like color contrast, missing alt text, and ARIA errors, can be reliably integrated into any Cypress or Playwright pipeline. This article shows how to configure thresholds, block CI builds only on new violations, and catch typical Magento- and Hyvä-specific barriers early.

Few terms cause as much anxiety around accessibility as the cease and desist letter. Understanding the actual risk for a Magento store requires cleanly separating unfair competition law from the BFSG's own, quite different enforcement mechanism.

A placeholder is a fleeting hint, not a persistent label. It disappears as soon as someone starts typing, is not reliably announced as a field label by many screen readers, and is often hard to read because of its usually faint contrast. This article shows how labels and placeholders correctly work together and where exactly the line falls.

Once a shop offers a store view with Arabic or Hebrew, the layout has to adapt automatically to the writing direction, right to left instead of left to right. The :dir() pseudo-class reacts directly to an element's actually computed text direction, unicode-bidi controls behavior for mixed text, and logical properties handle the rest, with no JavaScript snippet ever needing to detect the direction.

Mixing up aria-labelledby and aria-describedby causes screen readers to announce buttons without a name or swallow error messages entirely. This article explains the difference between the accessible name and the accessible description, walks through the WAI-ARIA name computation, shows how to reference multiple ids, and covers the most common mix-ups using real form and dialog examples.

hyphens: auto enables automatic hyphenation, but without fine-tuning the browser will happily hyphenate where only one or two characters remain before or after the break. hyphenate-limit-chars and its related limit properties define the minimum word length and how many characters must remain before and after the hyphenation point.

A lightbox gallery without jQuery and without external libraries: Alpine.js manages the state, arrow keys navigate, escape closes it, touch swipe works on mobile, and lazy loading keeps the initial load lean.

Good focus management separates web development from accessible web development. :focus-visible shows the focus ring only during keyboard use, :focus-within enables container-level reactions, and together with correct outline styles that follow WCAG they form the foundation for keyboard navigation without compromising visual design.

With the aria-* modifiers in Tailwind CSS, ARIA attributes become the single source of truth for accessibility states, visually and semantically at once. No separate class management, no JavaScript for visual states, no drifting apart of ARIA state and CSS class.