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 🙂