---
title: "Accessibility and Real-time Apps: Clearing Fog and Picking Fruit"
description: "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."
---

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

[Fly.io](https://yomu.fyi/company/fly-io) · Apr 25, 2022

**Type:** Tutorial

## 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.

## Context

LiveBeats is a Phoenix LiveView reference app with real-time social features. The accessibility work begins before real-time updates are introduced, so foundational issues do not interfere with later changes arriving over the wire.

## Approach / What changed

The post applies accessible labels, hides decorative imagery, prefers semantic HTML, adds named regions, and explains the keyboard-behavior promises attached to ARIA roles. It uses LiveBeats commits to demonstrate these changes and cautions against misusing role="menu" and role="application".

## Takeaways

- Use visible text for controls when possible; otherwise choose alt, SVG , or aria-label according to the element and its content.
- 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.
- role="application" forces focus mode and prevents caret-browsing conveniences unless the application consistently supplies focusability, keyboard behavior, and handling for changing text.

**Tags:** [Accessibility](https://yomu.fyi/topic/accessibility), [Phoenix LiveView](https://yomu.fyi/topic/phoenix-liveview)

- Source: [Fly.io](https://fly.io/blog/accessibility-clearing-the-fog)
- Source URL: https://fly.io/blog/accessibility-clearing-the-fog
- Ingested by Yomu: 2026-09-03T01:23:57.825Z

[Read original post](https://fly.io/blog/accessibility-clearing-the-fog)