# More Accessible Graphs with Jetpack Compose Part 4: On-Screen Control Buttons

DevFeed: [More Accessible Graphs with Jetpack Compose Part 4: On-Screen Control Buttons](<https://devfeed.tech/articles/more-accessible-graphs-with-jetpack-compose-part-4-on-screen-control-buttons-38467.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2023-12-09/more-accessible-graphs-with-jetpack-compose-part-4-on-screen-control-buttons/>)

Author: Eevis Panula

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

Content type: tutorial

Language: en

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

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Graphs](<https://devfeed.tech/topics/graphs.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Users](<https://devfeed.tech/topics/users.md>), [screen](<https://devfeed.tech/topics/screen.md>)

Tags: [accessible](<https://devfeed.tech/tags/accessible.md>), [component](<https://devfeed.tech/tags/component.md>), [gestures](<https://devfeed.tech/tags/gestures.md>), [graphs](<https://devfeed.tech/tags/graphs.md>), [interaction](<https://devfeed.tech/tags/interaction.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

This tutorial is the fourth article in a series about making graphs built with Jetpack Compose more accessible. It explains why continuous pointer gestures and keyboard interaction may not work for all users, then adds visible on-screen buttons for moving forward and backward through the graph.

## Source excerpt

This blog post is the fourth one in my series on more accessible graphs with Jetpack Compose. You can find the previous three from the following links: More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction More Accessible Graphs with Jetpack Compose Part 3: Differentiating without Color Continuous (or path-based) pointer input, like drag-gesture, might be problematic for some users. For example, if a user has tremors in their hands, the gesture is not always continuous, and if the app relies on this kind of gesture to work, it may be unusable for these users. Now, if you have followed this blog post series, you might wonder - hey, we added keyboard interaction; isn't that enough? No, it's not - it would require a physical keyboard. Many users don't use a physical keyboard, even if they could benefit from it. So, in this blog post, we'll add on-screen controls to the graph. The best part is that this solution also solves the issues with a switch device I mentioned at the end of the blog post about keyboard interaction! Head to the paragraph about Switch Access for more in-depth explanations. Adding Buttons So, one way to solve this problem with path-based gestures is to add visible buttons as an alternative way of navigating inside the graph. In the case of this graph, we want to add two buttons: One for going forward and another for going backward. This is what the UI will look like once we add the controls: We add a new component, called ControlButtons that wraps these buttons: @Composable fun ControlButtons( highlightedX: Float?, lastIndex: Int, setFocus: (Int) -> Unit ) { ... } It takes three parameters: highlightedX, which is the currently highlighted year on the x-axis, lastIndex, which is the last year's index, and a function called setFocus, which takes in an integer - the index where the focus should go next - and returns Unit. This is what it looks like