Best of Accessibility — October 2025

1. 1
   Article

   Frontend Masters·25w

   The Two Button Problem – Frontend Masters Blog

   Explores a common interface design flaw where two buttons with different visual styles make it unclear which one is currently active or will be activated next. The problem is especially pronounced on devices without cursors (TVs, game consoles) where keyboard or remote navigation is required. Solutions include using consistent button styles with additive indicators for the active state, directional arrows, CSS media queries to detect input methods, and pressed/unpressed visual states for toggle buttons. The key principle is making the active state obviously distinct rather than relying on arbitrary style differences.

   123

   6
2. 2
   Article

   Lobsters·27w

   The Web Is About to Get Better for Everyone, Everywhere

   The European Accessibility Act, effective summer 2025, will require digital products in the EU to meet enforceable accessibility standards. This legislation will likely trigger a global upgrade in web accessibility, as companies typically build one version of their products rather than maintaining regional forks. Similar to GDPR's impact on privacy, the EAA will affect how teams design, build, and ship products, requiring semantic HTML, keyboard navigation, screen reader support, and inclusive design patterns. The improvements will spread through shared design systems, component libraries, and frameworks, benefiting developers worldwide and potentially influencing accessibility legislation in other regions.

   113

   40
3. 3
   Article

   Hacker News·24w

   Just use a button

   Using `<div>` elements with click handlers instead of `<button>` elements creates accessibility problems for screen reader and keyboard users. While you can add `role="button"`, `tabindex`, and keyboard event listeners to make a `<div>` behave like a button, this recreates functionality that `<button>` provides natively. The `<button>` element automatically includes proper semantics, focusability, and keyboard interaction without additional code.

   105

   13
4. 4
   Article

   Hacker News·28w

   Autism Simulator - Workplace Experience Simulation

   An interactive educational simulation that puts players in the role of a high-masking autistic software engineer navigating workplace challenges. The experience explores sensory overload, social navigation, and burnout in corporate environments through a stat-based gameplay system tracking energy, masking effort, competence, and relationships. Players must balance maintaining professional appearances while managing the mental and emotional toll of masking autistic traits in neurotypical work settings.

   93

   14
5. 5
   Article

   CSS-Tricks·24w

   Pure CSS Tabs With Details, Grid, and Subgrid

   A modern approach to building tabbed interfaces using only HTML and CSS, leveraging the <details> element combined with CSS Grid and Subgrid. The tutorial walks through creating a three-column tab layout where each tab is a <details> element positioned using subgrid, with tab panels displayed in a second grid row. The solution uses the ::details-content pseudo-element for styling panel content and CSS custom properties for positioning tabs dynamically. The <details> element provides built-in accessibility features including keyboard navigation and screen reader support.

   24
6. 6
   Article

   Hacker News·25w

   Typst: Typst 0.14: Now accessible – Typst Blog

   Typst 0.14 introduces accessibility by default with automatic PDF tagging and optional PDF/UA-1 compliance for regulatory requirements. The release adds native PDF image support with cross-format conversion, character-level justification for improved typography, and expanded HTML export with semantic element mapping. Additional improvements include support for multiple PDF standards (1.4-2.0, PDF/A variants) and a typed HTML interface for programmatic document generation.

   19

   1
7. 7
   Article

   Hacker News·27w

   HTML’s Best Kept Secret: The <output> Tag

   The <output> HTML tag provides built-in accessibility for displaying dynamic calculation results and user action outcomes. Mapped to role="status" in the accessibility tree, it announces value changes to screen readers without requiring ARIA attributes. Despite being in the HTML5 spec since 2008 with excellent browser support, it remains largely unknown and unused. The tag works with or without forms, accepts a 'for' attribute to link related inputs, and suits use cases like calculators, password strength indicators, real-time validation, and server-calculated values. It offers a semantic, zero-configuration alternative to manually implementing ARIA live regions for dynamic content.

   16
8. 8
   Article

   CSS-Tricks·27w

   The thing about contrast-color

   The CSS contrast-color() function currently only returns pure black or white for maximum contrast, which can create uncomfortably high contrast ratios. Developers like Andy Clarke find this limiting when designing accessible interfaces that need softer contrast levels. The light-dark() function offers more control by allowing custom opacity values, though the spec indicates future versions of contrast-color() may support more nuanced contrast algorithms and color options beyond the black/white binary.

   10