Using controls for app accessibility

Page titles and labels

Add titles to the pages in your app. In addition, give your app a title. Screen reader technologies leverage the page title as a descriptor. The browser also 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.
Make use of the Accessible label which is a VB property of certain controls in Apps. This is used as a description by the screen reader and is an expressionable property you can bind to other properties in your apps. You can find this in the Accessibility area under the General tab of the Designer panel. To use it in VB expressions, reference AccessibleLabel.

输入控件

You should not use a separate Label control to label 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, you should use the Tooltip field, which the app surfaces as the accessible name for the respective input control.
To enable click actions 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 List control for lists of items instead of the Container or Label controls.
Use the 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 Designer panel, 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 controls, as well as 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 Hierarchy view. The default pre-defined order is always considered the correct one.

However, if you add any new containers in the middle, or change the position of container, the focus order changes. In this scenario, you should rearrange the position of the containers according to the order of focus you require for your app.