Accessibility Canvas Apps

How to make a Power Apps label accessible?

A label/tag on a t-shirt
A label/tag on a t-shirt

Introduction to the label control

Labels are a very popular 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 a gallery of records, you will use labels to display the record/item name. To learn about its properties, click here.

Screen reader

Labels with static text

  1. A screen reader announces the text of a label if it is visible.
  2. Set a label's Role property appropriately if you are using it as a heading. Headings help users understand how a screen is structured. There are 5 options:
    • Header 1 (headers that display screen titles or headings)
    • Header 2 (subheadings and gallery names)
    • Header 3 (subheadings and gallery names)
    • Header 4 (inside a gallery for item names)
    • Default (for any other text)

Labels with variable text

  1. Set a label's Live property set  if they have text that changes on user interaction. An example is a label that shows the number of records in a gallery selected by the user. The changes in the text are announced depending on what the Live property is set to. Here are the 3 different options:
    1. Off - Does not announce dynamic changes
    2. Polite - Announces the changes that occur during an announcement after the ongoing announcement is finished
    3. Assertive - Announces the changes by interrupting ongoing announcements

Keyboard tabbing

  1. Set the Tabindex property of a label to -1 (which means the tabbing will not go through that control)
  2. Set the FocusBorderThickness to a number greater than 0
  3. It is best to not use labels as clickable/interactive controls. Use buttons instead

Color/contrast

  1. Set the FocusBorderColor with a contrast ratio of 3:1 with the background color.
  2. Set the Color property of a label 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 optimize performance in Power Apps
  2. Responsive pop-up using layout containers
  3. Responsive pop-up using traditional containers

Leave a Reply