Using certain control types for building accessible apps

Page titles and labels

• 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 AccessibleLabel in the expression editor of a control.

Input controls

• 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.

Display and Icon controls

• 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 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

• For Icon and Image controls, the Tooltip property acts as the accessible name.

Container controls

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.

Custom controls

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.