# More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction

DevFeed: [More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction](<https://devfeed.tech/articles/more-accessible-graphs-with-jetpack-compose-part-2-adding-keyboard-interaction-38460.md>)

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

Author: Eevis Panula

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

Content type: tutorial

Language: en

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

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Graphs](<https://devfeed.tech/topics/graphs.md>), [keyboard](<https://devfeed.tech/topics/keyboard.md>)

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

## AI overview

This tutorial explains how to improve keyboard access for graphs built with Jetpack Compose. It describes the limitation that content descriptions are unavailable to keyboard-only users and introduces changing the highlighted x-axis position so users can inspect graph values. The author also notes that switch access is not covered because it did not work and required further research.

## Source excerpt

Welcome to the second episode of "More Accessible Graphs with Jetpack Compose" - in this blog post, we'll continue from where we left off in the first one. We will look at improving the (physical) keyboard access for graphs in Jetpack Compose. Link to the first part: More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description At the end of the blog post, I mentioned that the second part would be about keyboard and switch access. After testing my code for the blog post, I realized that the switch access part didn't work. After some deep-diving into documentation, I admitted I wouldn't add it to this post as it would require a lot of research. So there likely will be at least four parts in this "More Accessible Graphs with Jetpack Compose"-blog post series. In the first blog post, we added a Higlighter-component, an overlay on top of the line graph I had built. Then we made it focusable and added a content description for accessibility services. After these changes, a keyboard user can already focus on the different parts of the graph, but there's one problem: The graph legend is not visible. And you may now wonder if it is really a problem - we added the content description, right? The content description is unavailable if you only use a keyboard. If a person, who can see and uses a hardware device for navigation, navigates with the graph in the current state, they probably get frustrated because this is what they would get: They can see that the focus changes but can't see the individual values. If I encountered something like this, I would think there is a bug in the app. Adding Keyboard Interaction Users can already focus on each section, so we no longer need to worry about that. But we'll need a way to change the currently focused position on the x-axis - like if a user was moving their finger on the graph. The highlightedX-parameter is the one that controls the currently highlighted position on the x-axis. We'll need to add a way to change it