# More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description

DevFeed: [More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description](<https://devfeed.tech/articles/more-accessible-graphs-with-jetpack-compose-part-1-adding-content-description-38459.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2023-07-24/more-accessible-graphs-with-jetpack-compose-part-1-adding-content/>)

Author: Eevis Panula

Published: 2025-06-11T04:27:54.252000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [Graphs](<https://devfeed.tech/topics/graphs.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [compose](<https://devfeed.tech/tags/compose.md>), [graphs](<https://devfeed.tech/tags/graphs.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [mobile](<https://devfeed.tech/tags/mobile.md>)

## AI overview

This first article in a four-part series explores making data visualizations more accessible in mobile apps built with Jetpack Compose. It focuses on adding content descriptions and information for screen reader users, while the series also covers keyboard interaction and non-color-based differentiation.

## Source excerpt

Data visualizations rely on the visual representation of data. And that data is usually portrayed by some combination of colors. On mobile apps, they also often include different interactions that rely on touch. But what if your user can't see? Or if they're colorblind, and the combination of colors is not visible to them? Or if they use a switch device or hardware keyboard for navigation? From my experience, data visualizations of apps are often inaccessible for these groups of users, for instance. I wanted to experiment with how much changes and code would be needed to make a line chart more accessible. To my surprise, the amount of code wasn't that much. Of course, experimenting took some time, but after solving these problems, I now have an example project I can utilize in other projects. And because I love to share what I've learned, I'm writing this series of blog posts to help you to build more accessible graphs with Jetpack Compose. We'll look at three different aspects: Adding information for non-visual access users (so, e.g., a TalkBack user) Adding keyboard interaction in addition to touch-based interaction Differentiating data by other means than just color This first blog post in the series is about adding information for non-visual access users, e.g., screen reader users. The following two blog posts will cover adding keyboard interaction and differentiating data with other means than just color. There might be additional posts about voice access and increasing touch target size in the future. My goal is not to provide a final solution but ideas you can take and improve to use in your codebase. Of course, graphs can be more complex, and these relatively simple solutions might not work for everything, but I hope they'll give you pointers on improving your graph's accessibility. Let's first talk about the example project I prepared for this experiment. The Initial Project Code So, before starting any explorations on making things more accessible, I neede