Secrets of Accessible Routing with the RedwoodJS Core Team | Some Antics
Published:
RedwoodJS core team members Anthony and Dom discuss accessibility improvements to Redwood's router for announcing page navigation to screen readers.
Episode Summary
In this episode, RedwoodJS core team members Anthony and Dom discuss recent accessibility improvements to Redwood’s router, focusing on announcing page navigation to screen readers. They demonstrate the problem with single-page applications not announcing route changes, show a manual implementation of a route announcer, and then reveal how Redwood has integrated this functionality directly into the framework. The discussion covers the importance of accessibility in web development, the challenges of implementing it in single-page apps, and how frameworks like Redwood can make accessibility easier for developers. They also touch on the open-source collaboration that led to these improvements and future plans for enhancing accessibility in Redwood.
Chapters
00:00 - Introduction and Overview
Ben Myers introduces the episode and guests Anthony and Dom from the RedwoodJS core team. They explain what RedwoodJS is - a full-stack React framework - and briefly discuss their roles on the team. The conversation sets up the main topic: accessibility improvements in Redwood’s router, particularly for announcing page navigation to screen readers. This chapter provides context for the technical discussion to follow and highlights the importance of accessibility in modern web development frameworks.
02:56 - Demonstrating the Problem with Single-Page Apps
The hosts demonstrate the accessibility issue with single-page applications (SPAs) not announcing route changes to screen readers. They use VoiceOver to show how clicking links in a basic Redwood app doesn’t provide audio feedback about page changes. This chapter clearly illustrates the problem that many SPAs face, where visual changes occur without corresponding announcements for users relying on screen readers, potentially causing confusion and poor user experience for these users.
08:35 - Manual Implementation of a Route Announcer
Dom walks through a manual implementation of a route announcer component to solve the accessibility issue. He explains the code step-by-step, covering how to detect route changes, find page titles, and use ARIA live regions to make announcements. This detailed walkthrough provides insight into the complexities involved in implementing accessibility features and sets the stage for understanding why framework-level solutions are beneficial.
23:26 - Redwood’s Integrated Solution
The team demonstrates how Redwood has integrated route announcing functionality directly into the framework. They show how upgrading to the latest version of Redwood automatically adds this accessibility feature without any additional code from developers. This chapter highlights the power of framework-level solutions in making accessibility easier to implement and more widespread.
29:42 - Customizing Announcements and Precedence
Dom explains how developers can customize route announcements using Redwood’s new RouteAnnouncement component. They discuss the precedence of different announcement sources (custom announcements, H1 tags, document titles, URLs) and how this flexibility allows for more nuanced control over accessibility features. This section demonstrates how Redwood balances automatic accessibility improvements with developer control for edge cases.
40:39 - Development Journey and Open Source Collaboration
The conversation shifts to discuss the development process behind these accessibility improvements. Dom credits various individuals and projects, including Gatsby and Next.js, that influenced Redwood’s implementation. This chapter emphasizes the collaborative nature of open-source development and how sharing knowledge across projects can lead to widespread improvements in web accessibility.
48:49 - Future Plans and Challenges
The team discusses future accessibility improvements for Redwood, including focus management and skip links. They touch on the challenges of implementing these features in a framework-agnostic way and the importance of continued work in this area. This forward-looking section shows Redwood’s commitment to ongoing accessibility improvements and highlights areas where further development is needed in the broader React ecosystem.
52:43 - Closing Thoughts and Community Engagement
The episode concludes with information about Redwood’s documentation efforts, how to contribute to the project, and where to find Redwood merchandise. The hosts emphasize the open-source nature of Redwood and invite listeners to get involved in accessibility efforts. This final chapter wraps up the discussion and provides clear next steps for listeners interested in Redwood or web accessibility in general.