Focus

Assistive Technologies: Screen Reader, Keyboard and Switch

It's crucial to ensure screen readers and other assistive technologies can navigate your app in a logical order, making sure that content is separate with meaningful titles.

Screen navigation

Severity: Serious

When navigating to a new screen, make sure that the focus always starts from the "same" position; it could be the first element of the screen or the first header¹; whatever you choose, make sure that it is consistent across all the screens/modals of your app.

tip

The built-in <Text /> offers the autofocus property that automatically sets the focus when it gets rendered for the first time.

Modals, Bottom Sheet and Drawers

Severity: Critical

When displaying content in Modals, BottomSheet or Drawer, it's essential to ensure that the user's focus is directed to and remains within these components.

Forms

Severity: Serious

When on TextInput, the user should be able to access the next field or submit the form using the specific keyboard button; please don't force them to swipe to do that.

Related AMA components

• AutofocusContainer
• BottomSheet
• Text

---

1. According to this study: https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/ the solution that worked better for the mast majority was: Shift focus to a heading↩