Accessibility and Real-time Apps: Clearing Fog and Picking Fruit

Summary

This post describes an initial accessibility pass on LiveBeats, a Phoenix LiveView reference app with real-time social features, focused on screen reader users before real-time updates are introduced. It recommends labeling meaningful controls and images with visible text, alt, SVG desc, or aria-label, while hiding decorative imagery with aria-hidden="true" or blank alt attributes. It then explains that semantic HTML such as button, main, nav, and article is preferable to ARIA roles where available, while named regions can improve navigation and orientation. Roles also create behavioral obligations: a role="button" control must support focus and Enter or Space activation, and role="application" can force focus mode, blocking caret-browsing conveniences unless the app supplies comprehensive interaction behavior. The initial work clears foundational accessibility issues, with later work reserved for presenting live changes accessibly.

Takeaways

1. 1

   Use visible text for controls when possible; otherwise choose alt, SVG , or aria-label according to the element and its content.

2. 2

   A role attribute changes semantics but not behavior: a custom role="button" control needs keyboard focus and Enter or Space handlers, while a native provides that behavior.

3. 3

   role="application" forces focus mode and prevents caret-browsing conveniences unless the application consistently supplies focusability, keyboard behavior, and handling for changing text.