WordPress gems for devs: Accessibility with Interactivity API

Repository for code examples and resources used in the "WordPress gems for devs: Accessibility with Interactivity API" talk.

Event	Date	Branch	Links
WordCamp Portugal	16 May 2026	conf/WordCampPortugal2026	Event | Slides

Interactivity API

Interactivity API wouldn't be possible without HTML API.

What problems does it solve?

• Compatibility with PHP hooks.
• Inter-block communication.
• Site-wide features such as client-side navigation.

Reference

• Interactivity API Reference
  • The Reactive and Declarative mindset
    • List of Directives
  • Understanding global state, local context and derived state
    • The store
  • Server-side rendering: Processing directives on the server
    • Server functions
• WP_Interactivity_API_Directives_Processor
• @wordpress/create-block-interactive-template
• <RichText/> reference

Examples

• The movie demo, GitHub repo
• Countdown
• Instant Search
• Todo list
• Interactivity API showcase

Examples in production:

• mainostoimistot.fi - Query Loop Filters by Sami Keijonen, forked from humanmade/query-filter
• Podcaster Plus plugin by Dan Maby and Nathan Wrigley

History

The idea of using the declarative method to bridge the connection between frontend and backend came from the Cloudfest 2022 Hackathon project, Bento + WordPress, which was led by Alain Schlesser and Pascal Birchler.

Equivalents in other PHP frameworks

• Laravel - Livewire using AlpineJS
• Symfony UX - Live components, primarily built on top of Turbo and Stimulus, which are part of the Hotwire framework.
• Phoenix LiveView

Resources

• ARIA Authoring Practices Guide - Patterns
• Accessibility development best practices
• Interactivity API best practices in 6.8
• Interactivity API: Roadmap
• Proposal: The Interactivity API – A better developer experience in building interactive blocks
• Interactivity API discussions
• Changelog - Tracking Breaking Changes in the Interactivity API
• Getting Started - and other learning resources
• European Accessibility Act (Directive (EU) 2019/882)

Accessibility Tools

• online check websiteaccessibilitychecker.com
• Chrome extension axe DevTools
• Chrome extension Funkify – Disability Simulator
• Chrome extension HeadingsMap
• Chrome extension WAVE Evaluation Tool