Skip to main content

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 header1; 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.


    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