6 Practices to adopt to build accessible Power Apps solutions

One of my favourite topics, of many, to talk about is User Experience. This is an interesting topic because of how much falls under it, but it can be commonly confused with UI, or in fact worse, commonly just confused with GUI. This is… READ MORE [https://lewisdoes.dev/blog/6-practices-to-adopt-
6 Practices to adopt to build accessible Power Apps solutions
exc-6373b6f5b64c86780b4a69e1
In: Low Code Lewis Content 🚀

One of my favourite topics, of many, to talk about is User Experience. This is an interesting topic because of how much falls under it, but it can be commonly confused with UI, or in fact worse, commonly just confused with GUI. This is an issue for a number of reasons, but mainly because a GUI is something that yes a majority usually interact with, but not everyone interacts with to use computer systems and apps. However, UX describes the experience a user gets, regardless of how they best interact with a digital solution.

Seen as UX describes the experience a user gets however they interact with a device or digital solution, it’s important that we remember that ‘improving user experience’ doesn’t mean just to make something look nicer, but it also means, to ensure the solution is accessible, as well as things like improving performance and other factors.

UX isn’t the same as GUI

UX is applicable to EVERYONE


Accessibility

So, one of the key focuses to improving UX for everyone is to maintain an inclusive approach to application design, development and testing where we need to ensure we build accessibility tools and supports into our solutions. In this blog post, I’m going to outline a number of practices you can adopt when developing Canvas Apps, to ensure that your apps are more accessible to be inclusive to a wider group of users.

#1 – Colour

My first tip is to ensure that the colours in your app are of a high enough contrast against each other to pass colour contrasting guidelines as part of WCAG (Web Content Accessibility Guidelines).

The ratio of text to background should always be 4.5:1 or greater.

You can use the following checker to ensure your apps colours contrast well enough against each other.

WCAG Color Contrast Checker – Accessible WEB

#2 – Layout and Responsive Apps

This point covers two smaller tips which are important when it comes to building accessible apps. The first tip is to ensure that the layout in your app follows a logical flow so users can read from top to bottom, and left to right. For screen reader users or users that rely on a keyboard only to interact with your app, when they tab through the controls they will follow a logical control order dependent on the X and Y properties of each control. Therefore its important to ensure you follow a logical order in positioning controls on a screen. The size of your controls doesn’t matter with regards to navigation, only the X and Y properties make a difference here. You should use containers here to group controls together.

The second tip is to build responsive apps. This allows users with low-vision to more easily zoom in and out when using your app to adapt the solution to their needs allowing them to more easily interact with the app.

#3 – TabIndex

The TabIndex property allows you to control whether users should be able to reach the control when using tab functionality in your app. If the tab index is set to -1, users won’t access the control, however if it is set to 0 they will. So you’d want to set things like buttons to have a tab index of 0. You shouldn’t set custom TabIndex values above 0 to hard code the order that people get to items by using a tab key.

ALERT PREVIEW FEATURE …

You can switch on simplified tab index in your apps for Power Apps to ignore values greater than 0 in the tab index property and treat these as if they’re 0. When screen reader users navigate an app using its logical structure, they won’t have a good user experience if the custom tab indexes ignore that structure.

#4 – Configure for Screen Readers & Test using them

To maintain a good UX for users that rely on a screen reader you can follow some of these tips:

Add an accessibility label to all input controls

Add alt text to image controls using the accessible label.

Make sure you set TabIndex to 0 so it becomes a control users can interact with for pictures or icons that should be used as a clickable button. You should also add a description in the accessible label to tell users what clicking the button will do.

You should also test your app from the perspective of someone that relies on accessibility tools. You could do this by using a screen reader and tab to navigate through your app for example. These screen readers could be of some help with testing 🙂

Microsoft Edge Narrator

NVDA for Google Chrome and Firefox

VoiceOver for Mac OS, iOS and iPadOS devices

#5 – Videos

If you surface any videos in your apps, ensure that you caption them. Video controls support adding closed captions by using the ClosedCaptionsUrl property so you can add these in here. You should also make a transcript of audio that may be played to users who might rely on this.

#6 – Use Live Regions

You can only configure label controls as live regions but you’ll want to do this whenever something changes on a screen without a user directly causing this. For example if a timer refreshes some data being displayed on screen which causes a GUI change that would then need to be announced.

The live property controls the type of live region you’re configuring with the following values:

Off = not a live region, no announced changes

Polite = screen readers will voice any changes once they finish what they’re currently announcing

Assertive = when set to this value, screen readers will interrupt themselves to announce any changes as they happen which should be used in more critical scenarios for example if a form has a validation error.

I hope these tips helped you to get started with building accessible canvas apps! If you have any questions or comments, drop them down below 🙂

Written by
Lewis Baybutt
Microsoft Business Applications MVP • Power Platform Consultant • Blogger • Community Contributor • #CommunityRocks • #SharingIsCaring
Comments
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to LewisDoesDev.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.