# More Accessible Focus Indicators with Compose

DevFeed: [More Accessible Focus Indicators with Compose](<https://devfeed.tech/articles/more-accessible-focus-indicators-with-compose-38521.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2026-04-30/more-accessible-focus-indicators-with-compose/>)

Author: Eevis Panula

Published: 2026-04-30T07:11:56.799000Z

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>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Android](<https://devfeed.tech/topics/android.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [keyboard](<https://devfeed.tech/topics/keyboard.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [android](<https://devfeed.tech/tags/android.md>), [compose](<https://devfeed.tech/tags/compose.md>), [focus](<https://devfeed.tech/tags/focus.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>)

## AI overview

A tutorial on creating more visible keyboard focus indicators in Jetpack Compose. It explains relevant WCAG Focus Appearance requirements, notes that Android's default ripple may be insufficiently visible, and introduces the Indication API for drawing custom indicators such as an underline on focused interactive components.

## Source excerpt

Last summer, I wrote a blog post about focus management with Compose. Ever since, I've had drafts of this post, but I didn't get to finalize it until now. The blog post is available in: It's All About (Accessibility) Focus And Compose. So, in this blog post, we're talking about focus indicators and how to make them more accessible with Compose. But let's first talk about focus indicators in general. Focus Indicators Focus indicators are, as the name suggests, indicators that show where keyboard focus currently is in the UI. They need to be visible so that keyboard and keyboard-emulating device users can navigate around the app effortlessly. An important thing to note is that the focus indicator I'm talking about here is not for the screen reader (e.g., TalkBack) focus. That is handled on the system level. Web Content Accessibility Guidelines (the standard behind accessibility legislation and used with apps as well, despite the name) has some requirements for accessible focus indicators. Per SC 2.4.13 Focus Appearance, the focus indicator needs to be either User agent's (Android system) default styles At least 2 pixels thick and has a contrast ratio of at least 3:1 between the same pixels of focused and unfocused states. Android's default focus indicator is the ripple, which isn't very visible. Technically, it would pass, but if you want to make the application accessible, you'll need to improve the visibility of the focus indicator. Let's next discuss one way to build more visible (and thus, more accessible) focus indicators with Compose. Building More Accessible Focus Indicators with Compose There are several ways of creating the focus indicators. You can, for example, add a border based on the focused state, as Appt.org suggests in their code snippets: Accessibility focus indicator in Jetpack Compose, but if you want anything more complex, you'll want to turn to Indication API. Indication API with a DrawModifierNode can be used to draw complex focus indicators. In