Skip to main content

Headers

Headers are defined by setting the property: accessibilityRole = "header" and are equivalent to the HTML H* tags.

note

Each page/screen should contain at least one header.

Why do we need headers?

Because people who depend on assistive technology often navigate by heading first to quickly get a sense of the content offered in the page.

On iOS, the user will use the VoiceOver rotor to move through the different elements on the screen, i.e. headers. On Android is possible but varies by device.

tip

You can have "invisible" header on your screen, for example:

<Text accessibilityLabel="This is the header" accessibilityRole="header" />