Putting RedwoodJS Docs to the Test | Some Antics

Ben Myers and Anthony Campolo audit the RedwoodJS tutorial for accessibility issues including skip links, semantic HTML, alt text, and router persistence.

Episode Summary

In this episode of Some Antics, Ben Myers and Anthony Campolo review the RedwoodJS tutorial from an accessibility perspective. They examine the generated code and discuss potential improvements like adding skip links, using semantic HTML, and managing document titles. They explore challenges with single-page application routers and focus management. The conversation covers the importance of alt text for images and making content management systems accessibility-friendly. Anthony shares insights on RedwoodJS development and they discuss future accessibility work needed. The episode highlights the complexities of building accessible full-stack applications and the ongoing efforts to improve framework-level accessibility in RedwoodJS.

Chapters

00:00 - Introduction and Overview

Ben Myers introduces the inaugural stream of Some Antics, focused on web accessibility and semantic markup. He welcomes Anthony Campolo, a RedwoodJS core team member. They discuss the importance of teaching accessibility in web development education and Anthony shares his background in music education and transition to coding. The hosts outline the plan to review the RedwoodJS tutorial from an accessibility perspective.

02:56 - Deep Dive into RedwoodJS Basics

Anthony provides an overview of RedwoodJS, describing it as a full-stack serverless framework. He explains how RedwoodJS combines frontend and backend development, making it crucial for developers to consider accessibility throughout the entire application. They begin examining the RedwoodJS tutorial, discussing the initial project setup and the generation of the homepage and about page. The conversation touches on the layout component and how it’s used to structure the application.

15:17 - Accessibility Considerations in Layout and Navigation

Ben and Anthony start analyzing the generated code for accessibility issues. They discuss the semantic structure of the HTML, including the use of header, nav, and main elements. Ben suggests improvements like changing the H1 tag usage and adding a skip link for keyboard navigation. They explore the challenges of implementing skip links in a single-page application context and discuss the complexities of router behavior in RedwoodJS.

28:52 - Examining Page Transitions and Document Titles

The hosts discuss the challenges of managing page transitions in single-page applications from an accessibility standpoint. They discuss the importance of updating document titles and how screen readers announce page changes. Ben demonstrates using VoiceOver to navigate the example blog, highlighting issues with repetitive link text and the lack of context for “continue reading” links. They also touch on the need for proper alt text for images and how to manage this in a content management system context.

45:26 - Wrapping Up and Future Accessibility Work

As they approach the end of the stream, Ben and Anthony summarize the key accessibility issues identified in the RedwoodJS tutorial. They discuss the need for skip links, better documentation on head tag management, and incorporating alt text for images. Anthony shares a link to a GitHub discussion on making RedwoodJS more accessible, encouraging community involvement. The hosts express interest in continuing the accessibility audit in a future session and preview the next episode of Some Antics, which will focus on Web Content Accessibility Guidelines (WCAG) with guest Todd Libby.