Tema: accessibility
-
Locale-aware interfaces: Intl plural rules, dates and right-to-left layout
Format numbers, dates and relative times with the browser's Intl objects instead of string arithmetic, pick plural forms by Intl.PluralRules categories rather than n == 1, lay out with CSS logical properties so a dir=rtl document mirrors itself, and leave room for text that expands when translated.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenabstand und Kontrast
Drei Eigenschaften entscheiden, ob langer Text bequem lesbar ist: die Zeilenlänge (das AAA-Kriterium der WCAG deckelt sie bei 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne dass das Layout bricht) und der Kontrast (4,5:1 für normalen Text, 3:1 für grossen). In relativen Einheiten setzen, damit Nutzende Text vergrössern und neu spationieren können.
-
SVG icons: inline markup, a sprite with use, or an img element
Inline SVG can be styled with currentColor and CSS but repeats bytes on every occurrence; a same-origin sprite referenced with use is cached once and still follows the text colour; an img is cacheable but opaque to CSS. Pick per icon role, keep decorative icons hidden from assistive technology, and size every icon so nothing shifts while the sprite loads.
-
Readable body text: measure, line height and contrast
Three properties decide whether long text can be read comfortably: line length (WCAG's AAA criterion caps it at 80 characters), line spacing (at least 1.5 times the font size must be possible without breaking the layout) and contrast (4.5:1 for normal text, 3:1 for large text). Set them in relative units so users can resize and re-space the text.
-
Dark mode with prefers-color-scheme, color-scheme and light-dark()
Dark mode has three parts: the prefers-color-scheme media query to detect the user's choice, the color-scheme property (and meta tag) to tell the browser which schemes the page supports so form controls, scrollbars and the canvas follow, and light-dark() or custom properties to swap palette values without duplicating rules.
-
Stable selectors and auto-waiting in browser end-to-end tests
Two causes dominate flaky browser tests: selectors that break or match the wrong element, and sleeps that assume timing. Locate elements by role, label or test id, make every locator match exactly one element, and synchronise on retrying assertions and actionability checks rather than on time.
-
Accessible forms: labels, error messages and autocomplete
Give every control a label associated by for and id, mark required fields in text and with the attribute, use autocomplete tokens so browsers and assistive technology know a field's purpose, and report errors in a summary plus per-field messages linked with aria-describedby.
-
dialog versus popover: modal behaviour, the top layer and light dismiss
dialog with showModal() is modal: top layer, inert page, ::backdrop, Escape, closedby and form method=dialog; the popover attribute makes any element a non-modal top-layer overlay that a button toggles without script, light-dismissed in auto state. Use dialog for blocking prompts and forms, popover for menus, tooltips and toasts.
-
What do people who enable reduced motion expect to be removed: all animation, large movement or only autoplay?
Open question: the reduced-motion setting says reduce, not none, and guidance suggests keeping small meaningful transitions while removing parallax, zooms and autoplay; is there evidence about what users who enable the setting actually want, and whether their expectations differ by reason (vestibular disorder, distraction, battery, preference)?
-
ARIA roles: why a native HTML element beats a div with a role
The W3C's first rule of ARIA use is to prefer a native HTML element or attribute that already has the semantics and behaviour required; ARIA only changes what assistive technology is told, never what the element does. A div with role=button still needs focusability, key handling and states added by hand, and every mistake is invisible in visual testing.
-
Keyboard navigation in composite widgets: roving tabindex, arrow keys and Escape
Tab and Shift+Tab move between components; arrow keys move inside a component such as a tab list, toolbar, menu or radio group. Implement this with a roving tabindex (one item at tabindex=0, the rest at -1) or aria-activedescendant, close transient surfaces with Escape, and never trap focus without an advertised way out.
-
Focus management in single-page interactions: dialogs, route changes and removed elements
When a page changes without a full load, keyboard focus must be moved on purpose: into a dialog when it opens and back to its trigger when it closes, to the new view's heading after a client-side route change, and to a sensible neighbour when the focused element is deleted. Otherwise focus falls to the document body and screen-reader users are sent back to the top.
-
prefers-reduced-motion: which animation to reduce and how
The prefers-reduced-motion media feature reports whether the user has asked the operating system for less motion; its values are no-preference and reduce. Honour it by replacing large movement (parallax, zooms, slides, autoplaying motion) with fades or instant changes, while keeping small state transitions that carry meaning, and apply the same rule to script-driven animation.
-
What share of accessibility defects found in manual audits or by users had passed the automated checks in CI, and which kinds escaped?
Open question: the W3C WAI guidance on evaluation tools states that some accessibility checks cannot be automated and require manual intervention; for sites that run an automated checker on every build, what share of the defects later found in a manual audit or reported by users had passed that checker, and which defect types account for the gap?
-
Touch targets and pointer types: sizing controls for fingers and mice
WCAG 2.2 requires pointer targets of at least 24 by 24 CSS pixels at level AA, with exceptions for spacing, inline links and equivalent controls, and 44 by 44 at level AAA. The pointer and hover media features report whether the primary input is coarse or fine and whether it can hover, so a design can enlarge controls and drop hover-only interactions where a finger is the pointer.
-
Accessibility fundamentals: perceivable, operable, understandable, robust
WCAG organises requirements under four principles; the most common failures on content sites are missing text alternatives, colour-only signalling, keyboard traps, low contrast and unlabeled controls.
-
details and summary: native disclosure widgets, exclusive accordions and hidden until-found
details/summary is a disclosure widget with no script: the open attribute shows the content, a shared name attribute makes a group exclusive so opening one closes the others, the toggle event reports changes, and summary is styled as display: list-item. For collapsed content that must stay searchable, hidden=until-found reveals it on find-in-page or fragment navigation.
-
Semantic HTML and landmarks
Use header, nav, main, article, section, aside and footer with one h1 per page and a logical heading order; assistive technology, search engines and agents all navigate by these structures.
Legible por máquina: JSON