This article is contributed. See the original author and article here.

This article was written by Business Applications MVP Éric Sauvé as part of the Humans of IT Guest Bloggers series. Eric shares key tips to create canvas Power Apps that are accessible to users who may have a visual impairment or are color blind, require screen reader or do not use a mouse or a touch screen.

 

What a nice way for me to return to active community contribution through writing this article and sharing my own learnings and perspectives!

 

I am a Power Platform Practice Lead and acting Solution Architect many Dynamics and Power Platform projects. In the past few years, I have been pretty active in conferences, user groups, and community training, but recently the whole lockdown and moving into virtual mode has greatly impacted me.

 

It has been hard to stay motivated when my fuel is mostly based on human contact and being able to bond and connect with people. Enabling others, having an impact on their lives, and allowing them to also create positive impact in other people’s lives are reasons why I continue to share and contribute so much of my time to events. When COVID-19 happened and everything got converted to virtual events, I felt deeply saddened and alone. To me, it felt worse than being single on Valentine’s Day. 

 

It was about this time when I was at my lowest point of this downward spiral that the Humans of IT Community suggested the idea of participating in this blog. I want to thank my CPM Rochelle Sonnenberg for helping making this connection happen and unknowingly giving me the motivation I needed to jump back on the saddle.

 

So, that is for my “Human” side, let us now consider the “of IT” side of the equation. For this article, I have created a series of tips that can help you create canvas Power Apps that are accessible to users who may have a visual impairment, are color blind, require screen reader or even those who do not or cannot use a mouse or a touch screen for example.

 

1. App Checker is Your Friend

 

Within the Power Apps canvas studio, there is an integrated tool that continuously validates if the app is healthy and flags any errors that should be investigated. One of the sections that this App Checker tool validates is the accessibility issues that could improve the application. It is good practice to thoroughly review this section and address those issues before publishing your app to your user base, based on their severity level:

 

  • Errors: Means that the app has issues causing it to be difficult or impossible to use or understand for all users with a disability
  • Warnings: Means that the app has issues that make it potentially difficult to use or understand for most but not all users with a disability
  • Tips: Suggestions to improve the experience of users who have a disability

 

ZePowerDiver_0-1594202276912.png

Figure 1 – App checker with Accessibility section

 

2. Layout and Color Matters!

 

The Web Content Accessibility Guidelines (WCAG) offer an exhaustive list of recommendations that any organization that is serious about providing accessible Power Apps should be familiar with and include in the revision (Q&A) cycle.

 

If there is one goal that an app maker should try to achieve in building an app that will be accessible to people who may have a color-based impairment, it is about the color contrasts. Any large text or other interactive UI components (such as buttons) should have a minimum contrast ratio of 3:1. As for regular text, a contrast ratio of 4.5:1 is considered the minimum value.

 

In the canvas apps, color settings for the components/controls, usually work in pairs:

 

  • Color: the front-most color, can be for the text, line, border, etc.
  • Fill: the background color, depending on the action/status, such as pressed, hover, focused, etc.

 

ZePowerDiver_1-1594202276927.png

Figure 2 – Different examples of related color and fill properties for a button in a Canvas app

 

If you want to understand and validate your colors to ensure they are accessibility-compliant, you can use online tools such as the MSF&W color contrast ratio calculator.

 

3. Provide Keyboard Support

 

Remember that some app users may not be able to use a touch screen or a mouse, so they should be able to navigate through them via the use of keyboard only. The guidelines to ensure broader support is as follows:

 

  • Interactive components (buttons, inputs, etc) – set TabIndex property to 0
  • Decorative components (labels, images, etc) – set TabIndex property to -1
  • Avoid setting tab index higher than 0 (see W3C warning)

 

ZePowerDiver_2-1594202276936.png

Figure 3 – Demonstration of a Tab index set to 1

 

4. Screen Reader Support

 

Power Apps offer screen support over multiple operating systems. To provide support for these, app makers should ensure that all AccessibleLabel properties are set (on input controls and images).

 

ZePowerDiver_3-1594202276948.png

Figure 4 – Examples of image and input field with AccessibleLabel property

 

5. Accessibility Benefits Everyone

 

Keep in mind that the best Quality Assurance team you can have should include people with various accessibility needs. When designing an app, make sure you get input and feedback from fellow coworkers or community users that have various accessibility requirements so you can test that your app is truly accessible.

 

If you are not sure who to reach out to in your organization, try reaching out to your community or specialized centers instead. They will surely embrace the fact that you consider their needs and take them into account in your app design, and can guide you to resources that can help you test your apps.

 

Conclusion: It’s A Journey – Keep Trying Till It Becomes Second Nature!

 

This is a very high-level review of accessibility considerations and concepts that you can apply in your canvas Power Apps. Start implementing these in your upcoming projects – you’ll be amazed by what you will learn and achieve. These tips are easy to implement, and you can readily get feedback to improve until designing for accessibility becomes second nature for you. Feel free reach out to me as well if you need help!

 

About Eric

 

Éric Sauvé is a MCT & MVP (aka ZePowerDiver), Power Platform Practice Lead, Solution Architect, and Consulting Service Director at XRM Vision. He is a community leader for TDGi‘s global hackathons in Canada. A Power Platform enthusiast, he often delivers App in a Day sessions and leads local community events such as the Montreal Power Platform Happy Hour. Eric also actively participates in his local Montreal Business Application User Group, and has spoken at numerous Power Platform and Dynamics CE related conferences.

 

Connect with Eric:

 

LinkedIn: https://www.linkedin.com/in/zepowerdiver

 

References for this article:

Power Apps Accessibility Standards and Guidelines

Create accessible canvas apps in Power Apps

How do Power Apps support accessibility and Inclusiveness?

Accessibility properties for canvas apps

Review a canvas app for accessibility in Power Apps

Accessible colors for canvas apps in Power Apps

Screen Reader Photo by Sigmund on Unsplash

 

#HumansofIT

#Accessibility

#TechforGood

Brought to you by Dr. Ware, Microsoft Office 365 Silver Partner, Charleston SC.