Best of Accessibility — July 2025

  1. 1
    Article
    Avatar of frontendmastersFrontend Masters·37w

    Liquid Glass on the Web – Frontend Masters Blog

    Apple's new Liquid Glass design aesthetic for version 26 operating systems creates complex visual effects with light refraction, distortion, and frosted glass appearances. Web developers are recreating this look using CSS backdrop-filter, SVG filters like feDisplacementMap and feGaussianBlur, and React components. The technique involves multiple parameters including displacement scale, blur amount, saturation, and aberration intensity. However, implementing liquid glass effects raises significant text contrast accessibility concerns that developers must carefully address when placing text over unknown backgrounds.

  2. 2
    Video
    Avatar of codingwithsphereCoding with Sphere·39w

    How to setup Terminal Cursor Animations (3 Methods)

    Three methods for adding cursor animations to terminals: using Kitty terminal's built-in cursor trail feature with simple configuration, installing the smearcursor.nvim plugin for Neovim that works across any terminal, and building Ghostty terminal from source to use custom cursor trail shaders. Each approach has different compatibility requirements and visual effects.

  3. 3
    Video
    Avatar of codinginpublicCoding in Public·41w

    Modern JavaScript TODO app

    A comprehensive tutorial for building a todo application using vanilla HTML, CSS, and JavaScript. Covers CRUD operations, local storage for data persistence, modern CSS features like custom properties and nesting, accessibility best practices including ARIA labels and screen reader support, custom events for UI rendering, and creating styled custom checkboxes. The tutorial emphasizes separation of concerns between data management and UI rendering while maintaining semantic HTML structure.

  4. 4
    Article
    Avatar of tailwindcsstailwindcss·38w

    Vanilla JavaScript support for Tailwind Plus

    Tailwind Plus now includes vanilla JavaScript support through @tailwindplus/elements, a library of headless custom elements that make interactive UI components like dropdowns, dialogs, and command palettes work without requiring React or Vue. The library leverages modern web platform features like custom elements, the popover attribute, and native dialog elements to provide accessible, framework-agnostic components that can be styled with utility classes and work across different web frameworks.

  5. 5
    Article
    Avatar of devblogsDevBlogs·41w

    Local AI + .NET = AltText Magic in One C# Script

    A practical guide showing how to generate image alt text using .NET 10's new script execution feature and local AI models via Ollama. The tutorial demonstrates creating a complete solution in a single C# file that can analyze images and produce accessibility-friendly descriptions without cloud dependencies or rate limits.

  6. 6
    Article
    Avatar of rubylaRUBYLAND·38w

    OTP Input field with StimulusJS

    A comprehensive guide to building OTP (One-Time Password) input fields using StimulusJS, covering two approaches: a single accessible input with CSS styling and multiple inputs with JavaScript navigation. The tutorial includes keyboard navigation, paste functionality, form validation, and accessibility features like ARIA labels and screen reader support.

  7. 7
    Article
    Avatar of storybookStorybook·37w

    Component Test with Storybook and Vitest

    Storybook 9 introduces comprehensive component testing powered by Vitest, offering three types of tests: interaction tests for user behavior simulation, accessibility tests using axe-core for WCAG compliance, and visual tests through Chromatic for UI regression detection. The new Test widget enables running all tests with one click, includes coverage reports, and provides debugging panels. This approach fills the gap between unit tests and E2E tests, allowing developers to test thousands of UI states with minimal maintenance while leveraging existing stories as test cases.

  8. 8
    Article
    Avatar of css_tricksCSS-Tricks·40w

    Scroll-Driven Sticky Heading

    Learn how to create animated sticky headings that change text based on scroll position using CSS scroll-driven animations. The tutorial covers building a typewriter-like effect with pseudo-elements, implementing proper accessibility fallbacks for screen readers and browsers without SDA support, and handling user preferences like reduced motion. The technique uses keyframes with magic numbers to control text transitions at specific scroll percentages, creating dynamic headings that update as users navigate through page sections.

See all Accessibility archives