Edit

Create accessible canvas apps

  • Article

An accessible canvas app will allow users with vision, hearing, and other impairments to successfully use the app. In addition to being a requirement for many governments and organizations, following the below guidelines increases usability for all users, regardless of their abilities.

Use the Accessibility Checker to help review potential accessibility issues in your app.

Layout and color

Common sense and uncomplicated design helps apps be more accessible to all users. When doing heavy customization of apps take note of the below suggestions. Power Apps themes are designed to meet accessibility standards.

  • Ensure all elements are clearly visible and text is of sufficient size. All content must be easily read and understood by the naked eye.
  • Ensure input elements are labeled on the screen. AccessibleLabel property defines what the screen reader will announce.
  • If customizing colors, ensure the contrast ratio of text to background is 4.5:1 or greater. Software tools that assist this process are readily available.
  • Ensure layout follows a logical flow when read from top to bottom, left to right.
  • Create a responsive app so that low-vision users can zoom in and use it without scrolling back and forth.

Keyboard

When testing your app's accessibility, ensure the app can be used by keyboard only, with or without a screen reader.

The Tab key should navigate to interactive elements in a logical order. You can create this with a logical app structure and by setting each control's TabIndex property accordingly.

  • Label, Image, Icon, Shape controls: Set TabIndex to 0 if they are meant to be interactive. Otherwise, set TabIndex to -1.
  • Do not set TabIndex greater than zero.
  • Ensure that the Simplified tab index app setting is enabled.

Screen readers

The following screen readers have been verified to work with Power Apps:

  • JAWS: Microsoft Edge
  • Narrator: Microsoft Edge
  • NVDA: Google Chrome, Firefox
  • TalkBack: Google Chrome, Power Apps mobile
  • VoiceOver: Power Apps mobile, Safari (macOS, iOS, iPadOS)

To ensure a satisfying experience with the screen reader it is recommended to:

  • Ensure all input controls have the AccessibleLabel property set.
  • For images, set AccessibleLabel to an appropriate description.
    • If a picture is not used as a button or a link (i.e. icon is there just for the decoration) and should not be read by the screen reader, make sure the AccessibleLabel is empty or not set.
    • If a picture or an icon is used as a button, then set TabIndex to 0 and AccessibleLabel to the link description.

Control type and structure

Using the right controls and grouping them will help screen reader users understand the structure of the app.

Multimedia

Ensure all videos are captioned and a transcript of all audio recordings is available to the user. Video control supports closed captions in WebVTT format via the ClosedCaptionsUrl property.

With the screen reader enabled, Timer does not announce button text, but how much time has passed. Announcements can't be turned off, even if timer is hidden with low opacity.

Working with signatures

If you have a signature field that uses the PenInput control, you need to enable an alternative method of signature input. The recommended way is to show a TextInput control where a user can type their name. Ensure the signing instructions are placed in the AccessibleLabel property and the control is placed close to the Pen input - to the right or immediately below.

Next steps

Accessible app structure

See also