Accessibility Canvas Apps

How to make a Power Apps button accessible?

A push button to start/stop a car
A push button to start/stop a car

Introduction to the button control

Buttons are a very popular interactive control in Power Apps. An app will always have at least one of them. That being said, more often than not, there will usually be more than 1 in an app. Like if you have multiple screens, you will usually use buttons to allow users to navigate between the screens. To learn about its properties, click here.

Screen reader

  1. A screen reader announces the text of a button. So set the text to something that clearly indicates it's purpose.
  2. Set the tooltip to show, as an example, its state "Selected".
  3. Set the DisplayMode to Disabled for all disabled buttons. The screen reader will announce that the button is disabled.

Keyboard tabbing

  1. Set the Tabindex property to 0
  2. Set the FocusBorderThickness to a number greater than 0

Color/contrast

  1. Set the FocusBorderColor with a contrast ratio of 3:1 with the background color.
  2. Set the Color property with a minimum luminosity contrast ratio of 4.5:1 with the background color. There are several tools available to analyze contrast ratios. Click here for one such tool.

Recent articles

  1. How to make a Power Apps label accessible?
  2. How to make a Power Apps screen accessible?
  3. Optimize performance in Power Apps

Leave a Reply