Accessible software is designed to work for people who experience disabilities such as visual, hearing, or cognitive impairments, and who may interact with software using assistive technologies such as a screen reader

Power Apps Studio has the functionality to create accessible canvas apps.  Using the guidelines below, apps can be created that can be used by everyone.  The Accessibility Checker in Power Apps Studio is a great way to review potential accessibility issues in your app and to get recommendations on how to address this

Create Accessible Canvas Apps

Whilst there are a number factors involved in ensuring a Power App is accessible, they all generally fall into one of the following categories

  • Presentation & Color
  • Screen Readers
  • Screen Structure
  • Multimedia

Let’s look at each in turn

Presentation & Color

  • It’s important to ensure that all controls in a Canvas App are clearly visible and the text is of sufficient size so that all content can be easily read by the naked eye. Typically, for an app viewed on a laptop, this would be a minimum font size of 16px
 
  • Canvas apps uses the Open Sans font by default. Open Sans is an accessible font used in all browsers. If you change the font, it’s best to ensure it is one of the other widely used and web-safe fonts such as Ariel or Verdana. This will ensure the text will display as intended
 
  • The colors used in a canvas app should be accessible to color-blind and low-vision users and all Power Apps color themes are accessible by default. If customizing colors, ensure the contrast ratio of text to background is 4.5:1 or greater. Websites such as the AccessibleWeb are great for checking color contrast ratios quickly and easily.  Interactive controls should have adequate color contrast between:
    • Color & Fill
    • Pressed Color & Pressed Fill
    • HoverColor & HoverFill
  • Ensure the app doesn’t convey information just using color alone. For example, users with red-green color blindness will not be able to distinguish a red error message from a green success message

Screen Readers

  • The following screen readers  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)
  • Each screen should be concisely and clearly named and suffixed with ‘screen’. This will ensure a screen reader user hears an accurate description of the screen’s purpose
  • Consider also creating a header at the top of each screen to describe its purpose in more detail. Headings can be created by setting the Role property of a Label to ‘Heading’ and the text in the label can then be read by the Screen Reader. If SetFocus is set to the screen header Label using the OnVisible property of the screen and the TabIndex of the screen header is set to 0, then the screen header will be automatically announced by the screen reader when the screen is loaded 
  • The AccessibleLabel property of an interactive control should be set to specify what the screen reader will announce to describe the purpose of the control
  • If an Image, Icon or Shape is not interactive, typically it should not be read by the screen reader. If this is the case, make sure it’s AccessibleLabel property is blank
  • If an Image, Icon or Button is used to provide a link or to navigate to another screen, its AccessibleLabel property should be set to the link’s description. Don’t use a label to provide a link as labels do not have an AccessibleLabel property
  • Grouping related controls together in containers helps screen reader users and keyboard only users to better navigate the structure of the app. Controls in Forms and Galleries are automatically grouped so don’t need to be added to a container
  • Dynamic changes within a screen pose challenges to the visually impaired. Users who access an app through a screen reader are focused on one part of a screen.  If a dynamic change happens elsewhere on the screen, they won’t be aware of it.  This can be resolved by adding Live Regions.  If content changes in a Live Region, a screen reader will recognize this and announce that change
  • You may want to convey to or hide content from screen-reader users. This can be done using the techniques below
    • Hide content from all users: Set a control’s visible property to false
    • Hide content from sighted users: Use any of the techniques below
      • Set the X & Y properties so the control is located outside the screen
      • Set all the colors of the control to transparent
      • Position a rectangle Shape above the content and set its Fill property to be the same color as the color of the screen
    • Hide content from screen-reader users: Set the AccessibleLabel property to an empty string
  • Using Timers can be problematic from an accessibility perspective. With the screen reader enabled, the Timer control does not announce the button text, but how much time has passed. Announcements can’t be turned off even if the timer is hidden from Screen Reader use

Screen Structure

  • Formatting a screen correctly and creating a TabIndex property for interactive controls ensures the app can be used by purely using a keyboard. The layout of the app should follow a logical flow when read from top to bottom, left to right.  The Tab key should navigate to interactive elements in a logical order. You can create this using a logical app structure and setting each control’s TabIndex property accordingly. Note: When editing an app in Power Apps Studio preview mode, the TabIndex order is not applied.  The order will be correct when the app is published and run.  Also, bear in mind that TabIndex only affects Tab Key navigation.  It does not change how a screen reader user navigates the app
  • Labels, Images, Icons, and Shape controls should have their TabIndex property set to 0 if they are interactive. Otherwise, their TabIndex property should be set to -1
  • Do not set TabIndex values greater than zero. Enabling the Simplified Tab Index setting will automatically prevent TabIndex values greater than zero being applied
  • If the app has a signature field that uses the Pen Input control, an alternative method of signature input will be required for keyboard only users. The recommended alternative is to show a Text Input control where a user can type their name. Ensure the signing instructions are placed in the AccessibleLabel property of the Text Input box and ensure it is placed close to the Pen Input control. Using the techniques discussed earlier, the Text Input control can be hidden from non-Screen Reader users and the Pen Input Control hidden from Screen Reader users

Multimedia

  • If an Image, Icon or Shape is not interactive, it should not be read by the screen reader. If this is the case, make sure it’s AccessibleLabel property is blank.  For Images, Icons and Shapes that are interactive then set AccessibleLabel to an appropriate description
  • Videos should be captioned and a transcript of all audio recordings can be made available

Accessibility Checker

  • The Accessibility Checker in Power Apps Studio can be run to find any potential accessibility issues and explain why each might be a potential problem for users who have a specific disability. It also offers suggestions on how to resolve each issue. The Accessibility Checker also checks for screen-reader and keyboard issues, as well as color contrast issues
  • The Accessibility Checker classifies each issue as an error, a warning or a tip, based on its severity:
    • Errors identify issues that make the app difficult or impossible to use or understand for users who have a disability
    • Warnings identify issues that make the app difficult to use or understand for most but not all users who have a disability
    • Tips help you improve the experience of users who have a disability
  • Any error identified by the Accessibility Checker should be addressed. For warning and tips, the suggestions should be considered in the context of what the app is looking to achieve.  Try to fix accessibility warnings and tips if you can, but it may not be possible to resolve every single recommendation

Microsoft Accessibility Insights

  • Microsoft Accessibility Insights is a browser extension that can be used to check web pages against the Web Content Accessibility Guidelines and highlight issues.  Because a Canvas app is run in a browser as a single web page, a Power App can be checked using a browser extension, just like any other web site

Microsoft Disability Answer Desk

  • The Microsoft Disability Answer Desk which is contactable at [email protected] is a support resource for organisations that have questions about the accessibility of Microsoft product conformance with accessibility standards. The support team can help resolve any issues relating to assistive technology and functionality of products as well as help with conformance documents

Summary

Designing and building an app with accessibility in mind, is much easier than going back and adding it in retrospectively

Canvas App controls have the necessary properties to create accessible canvas apps.  The Accessibility Checker in Power Apps Studio can also be a great help in identifying where further work may be required to make an app fully accessibility

However, don’t just rely on the output of the Accessibility Checker to ensure compliance.  When testing an app, it’s important to do so with all users in mind.  Check the color contrast and the text size. Use a screen reader to thouroughly test an app. Validate the usability for a keyboard only user who won’t be using a mouse

It might be the case that not every app needs to be fully accessible. For example, if you are creating an app for a small team, you may know that no one uses a screen reader.  However, you can never be sure who might use the app in the future. It doesn’t take a lot of extra time to make an app accessible especially when done from the very start

Hiredgun.tech: UI/UX Resouces for Power Apps

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top