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

Nolan Darilek

Hey, everyone. Last time we talked a bit about what accessibility is, why it’s important, and how you can incorporate it into your process. Today, using the time-travel superpowers of Git, I’ll take you along as I start making LiveBeats more accessib

Fly.io

•

Nolan Darilek

•9 min read•intermediate•

--

•View Original

ElixirGitHTML

Overview

The article discusses the importance of accessibility in real-time applications, specifically focusing on the LiveBeats app. It outlines practical strategies for improving accessibility, such as using appropriate labels and roles, and emphasizes the need for developers to ensure their applications are usable by all users, including those with disabilities.

What You'll Learn

1

How to use the alt attribute effectively for images in web applications

2

Why using aria-label is crucial for non-text elements in accessibility

3

When to apply role attributes to enhance semantic meaning in HTML

Key Questions Answered

How can I make my web app more accessible for screen reader users?

To enhance accessibility for screen reader users, ensure that all meaningful images have appropriate alt attributes, use aria-labels for non-text elements, and apply role attributes to convey the correct semantic meaning. These practices help users navigate and understand the app better.

What are the common pitfalls in using ARIA roles?

Common pitfalls include misusing roles like role='menu' for any list of links, which can confuse users. It's essential to use roles appropriately to ensure they reflect the actual functionality of the elements, maintaining clarity and usability.

What happens if I use role='application' incorrectly?

Using role='application' incorrectly can disable caret browsing for screen reader users, forcing them into focus mode. This can lead to a frustrating experience as users lose the ability to navigate the content as they would in a typical web document.

Technologies & Tools

Frontend

Phoenix Liveview

Used to build the LiveBeats app with real-time social features.

Key Actionable Insights

1
Implementing the alt attribute for images is essential for accessibility.
By providing descriptive alt text, you ensure that users relying on screen readers can understand the content and purpose of images, enhancing their overall experience.

2
Using aria-label for buttons without visible text is critical.
This practice allows users with visual impairments to understand the function of buttons, which is particularly important for icons that may not be self-explanatory.

3
Applying semantic roles correctly can significantly improve navigation.
Using roles like role='navigation' or role='main' helps screen readers identify the structure of the page, making it easier for users to navigate through different sections.

Common Pitfalls

1

Misusing role attributes can lead to confusion for users.

For example, applying role='menu' to any list of links can mislead users about the functionality of those links, making navigation difficult.

2

Using role='application' without proper implementation can hinder accessibility.

This role disables caret browsing, which is essential for users who rely on screen readers to navigate content effectively.

As part of writing the Slack Desktop application, we created a new library / set of tools that will save other developers writing Electron applications a lot of time and effort. We call it electron-compile, and this post will describe how to use it and explain how it works. Just what is Electron? Electron is a…

TypeScriptReactJavaScript

9 min read

Includes Code

Has Summary

--

These articles from LinkedIn and other leading engineering teams share similar topics with "Accessibility and Real-time Apps: Clearing Fog and Picking Fruit". Explore more engineering insights on JavaScript, Java, TypeScript.