studio-web
latest
false
- Release notes
- Getting started
- For administrators
- Designing automations
- Creating an automation from an idea
- Creating a project
- How to start an automation
- Managing project files and folders
- Connecting automations to your accounts
- Configuring activities
- Managing the activities in a project
- Passing values between activities
- Iterating through items
- Managing the data in a project
- Configuring a project to use your data
- Using file and folder resources
- Running and testing your projects
- Managing automations
- App projects
- Apps in Studio Web
- App templates
- Debugging app projects
- Publishing, deploying, and upgrading app projects
- Importing and exporting app projects
- Working with entities in an app project
- Building accessible apps
- Adding accessible descriptors
- The Accessible label
- Using the Tab control for accessibility
- Designing accessible lists and headings
- Responsive app design
- Color contrast ratio
- Preset styles and aria-level mappings for the Header control
- Known limitations
- App activities
Preset styles and aria-level mappings for the Header control

Studio Web User Guide
Last updated Feb 21, 2025
Preset styles and aria-level mappings for the Header control
Aria-level roles allow screen readers to reliably interpret the structure of text in your app.
-
Level 1 represents a top-level heading, typically the main title in a page.
-
Level 2 represents a second-level heading, typically a sub-heading in a page.
-
Level 3 represents a third-level heading.
-
Level 4 represents large text.
-
Level 5 represents normal-size text.
-
Level 6 represents small text.
The following are the default preset styles and aria-levels for the Header controls:
headline1 : Level 1
headline2 : Level 2
headline3 : Level 3
LargeText : Level 4
NormalText : Level 5
SmallText : Level 6
headline1 : Level 1
headline2 : Level 2
headline3 : Level 3
LargeText : Level 4
NormalText : Level 5
SmallText : Level 6
If you manually customize styling using the Style area in the Properties panel, the aria-level is set based on the font size:
>= 32px = Level 1
>= 24px = Level 2
>= 18px = Level 3
>= 16px = Level 4
>= 14px = Level 5
< 14px = Level 6
>= 32px = Level 1
>= 24px = Level 2
>= 18px = Level 3
>= 16px = Level 4
>= 14px = Level 5
< 14px = Level 6