Tagged “accessibility”
-
Declarative Focus Trapping and Background Locking with the HTML inert Attribute
Removing background DOM trees from tab order pointer events and the accessibility tree simultaneously when a modal drawer opens using inert. -
Accessible Inline Form Error Messaging with aria-invalid and aria-errormessage
Connecting form validation feedback to assistive technologies using Constraint Validation API events aria-invalid and live error summaries. -
Publishing Machine-Readable Dates and Durations with the HTML time Element
Using the semantic HTML time element and ISO 8601 datetime attributes to improve search engine indexing and assistive technology clarity. -
Implementing the WAI-ARIA Tabs Pattern with Roving Tabindex
Building a keyboard-accessible tablist tab and tabpanel component with Left and Right arrow navigation and semantic fallback markup. -
Building Accessible Tooltips with aria-describedby and Keyboard Triggers
Designing supplementary tooltip popovers that work seamlessly across hover focus and Escape key dismissal with role tooltip. -
Structuring Key-Value Metadata with HTML Description Lists
Using semantic dl dt and dd elements paired with CSS Grid to present product specifications glossaries and summary cards. -
Designing Skip Navigation Links and Page Landmarks for Keyboard Users
Combining visually hidden focus-triggered skip links with semantic header main and nav landmarks for rapid keyboard navigation. -
Writing Accessible Inline SVG Icons with Semantic ARIA Attributes
Distinguishing decorative and interactive inline SVG graphics using aria-hidden focusable title elements and accessible button labels. -
Accessible Modal Dialogs with the Native HTML Dialog Element
Building accessible modal overlays focus management and backdrop styling with semantic HTML dialog markup and minimal JavaScript. -
Grouping Media and Code Snippets Semantically with Figure and Figcaption
Many developers only reach for the HTML figure element when embedding photographs, yet the specification defines it for any self-contained unit of content referenced from the main prose including code listings, SVG diagrams, and attributed quotations. -
Separating Mouse and Keyboard Focus Rings with focus-visible
Setting outline none on buttons and links is one of the most damaging accessibility anti-patterns on the web. The CSS focus-visible pseudo-class lets you display crisp high-contrast focus rings for keyboard Tab users while suppressing persistent rings after mouse or touch clicks. -
Designing Inclusive Web Animations with prefers-reduced-motion
Parallax scrolling, zooming cards, and smooth-scroll jumps can trigger dizziness, nausea, and migraines for users with vestibular motion disorders. By using the prefers-reduced-motion CSS media query, you can preserve subtle opacity feedback while stripping out disorienting spatial movement. -
Accessible Breadcrumb Navigation with Semantic HTML and aria-current
Breadcrumb trails orient users within deep site hierarchies, but generic div containers and hard-coded slash characters create noisy output for screen readers. Wrapping an ordered list in a labeled nav landmark with aria-current delivers clean, accessible navigation. -
Announcing Dynamic UI Changes with ARIA Live Regions
In single-page applications and AJAX forms, updating DOM text without a full page reload is invisible to screen-reader users unless the container is marked as an ARIA live region. Using aria-live and role status bridges the gap cleanly. -
Structuring Accessible Data Tables with Caption Scope and Thead
While HTML tables should never be used for page layout, they remain the only semantically correct way to present tabular data. Adding caption, thead, tbody, and explicit th scope attributes transforms a visual grid into an accessible data table. -
Supporting System Dark Mode with prefers-color-scheme
With operating systems introducing system-wide dark appearance settings across desktop and mobile, browsers now expose user theme preferences directly to CSS via the prefers-color-scheme media query. -
Zero JavaScript Accordions with HTML5 Details and Summary
Expandable FAQ sections and disclosure widgets are among the most over-engineered components on the web. Native HTML5 details and summary elements provide keyboard support, aria-expanded states, and toggle behavior without a single line of JavaScript. -
Building Accessible HTML Forms with Native Validation
Forms are the primary interaction boundary on the web, yet they are frequently broken by missing labels and fragile validation scripts. Using explicit label associations, aria-describedby hints, and HTML5 constraint attributes gives you resilient forms out of the box. -
Writing Semantic HTML5 for Accessible Document Structure
Clean markup starts with choosing HTML elements for their meaning rather than their default visual appearance. Replacing generic div containers with semantic HTML5 landmarks makes your pages immediately more accessible to screen readers and search engines.
See all tags.