- Getting Started
- Demo apps
- How To
- Notifications
- Using VB Expressions
- Designing your App
- Designing your App with Autopilot
- Events and Rules
- Rule: If-Then-Else
- Rule: Open a Page
- Rule: Open URL
- Rule: Close Pop-Over/Bottom Sheet
- Rule: Show Message
- Rule: Show/Hide Spinner
- Rule: Set Value
- Rule: Start Process
- Rule: Reset Values
- Rule: Upload File to Storage Bucket
- Rule: Download File From Storage Bucket
- Rule: Create Entity Record
- Rule: Update Entity Record
- Rule: Delete Entity Record
- Rule: Add to Queue
- Rule: Trigger workflow
- Rule: Submit Action
- Leveraging RPA in your App
- Leveraging Entities in Your App
- Leveraging Queues in Your App
- Leveraging Media in your app
- Leveraging Actions in your app
- Leveraging Connections in your apps
- Web apps in Studio Web
- Application Lifecycle Management (ALM)
- UiPath® First-Party Apps
- Basic Troubleshooting Guide
Using certain control types for building accessible apps
-
Add titles to the pages in your app. In addition, give your whole app a name, so that the app can be reliably interpreted by user agents such as assistive technologies. For example, screen readers leverage the page title as a descriptor, and the browser uses the app title in the browser tab. You can add accessible titles using the Page Name and App Name properties in the Designer panel.
-
Use the Accessible label, which is a VB property of the Button and Custom HTML controls in Apps. You can find this label in the Accessibility area, in the General tab of the Properties panel. The screen reader uses the Accessible label as a descriptor.
-
The Accessible label is an expressionable property which you can bind to other properties in your app. To do this, reference
AccessibleLabelin the expression editor of a control.
-
Do not use a separate Label control to name an existing input control. Instead, use the Label and Hint text properties available to the input control. These act as accessible names in your app.
-
If the input control has no text properties attached to it, use the Tooltip field, which the control uses as the accessible name.
-
To enable accessible click events for a control, and make it accessible via keyboard navigation, use the Button control instead of Label or Header.
-
Use the dedicated List control for lists of items instead of the Container or Label controls.
-
Use the dedicated Header control for headings instead of the Label control. The Header control markup contains accessible attributes.
-
The default pre-defined mapping of preset styles and aria-levels is as follows:
headline1 : Level 1
headline2 : Level 2
headline3 : Level 3
LargeText : Level 4
NormalText : Level 5
SmallText : Level 6headline1 : Level 1
headline2 : Level 2
headline3 : Level 3
LargeText : Level 4
NormalText : Level 5
SmallText : Level 6-
If you manually update or customize any of the styles from the Properties panel, the aria-level is set based on the font size as follows:
>= 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-
For Icon and Image controls, the Tooltip property acts as the accessible name.
When the Container Layout control is used, the focus order for any containers inside of it depends on the container position in the Project Explorer panel. The default pre-defined order is always considered the correct one.
If you add any new containers, or change the position of a container within the container hierarchy, the focus order changes. In this scenario, you should rearrange the position of the containers according to the order of focus intended for your app.
You can also use the Custom HTML control to achieve custom functionalities in your app. The Custom HTML control supports the Accessible label. Using this label ensures accessibility support in your custom control.
Use Custom HTML for the following functionalities:
-
Hyperlinks.
-
Event handlers.
-
Progress bars.
-
Tables with custom data.
-
A five-star rating system.
