Making PowerApps accessible
One item I have seen overlooked in PowerApps is the functionality around the “App Checker” ….”But William I use the App checker”…. I do not mean the formula app checker I am referring the “Accessibility” checker shown in the image below:
It is prodigiously important when creating apps, well anything actually, that it is made available for ALL people – this includes those that may have issues with hearing, sight and other impairments. Jenny Lay-Furie provided us with an absolutely phenomenal presentation on accessibility and how Microsoft have helped, and continue to help, many people from all walks of life live well their life!
PowerApps has an accessibility checker (shown in the image above) which I implore you to monitor when creating apps as this will help you fine tune object for accessibility that you may not have thought of such things like ‘Tab Stops’ – those who have to interact with your app using a keyboard will need this functionality to be set up.
The following items are crucial for accessibility:
- Layout and Colour
- Keyboard Support
- Screen Reader Support
- Multimedia captions
Now due to time I do not have time to write out my guide to improving accessibility but fortunately I do not have too as Microsoft have provided us with a brilliant PowerApps focused guide which I have copied below or you can find the link here
Layout and color
Common sense and uncomplicated design helps apps be more accessible to all users. When doing heavy customization of apps take note of the below suggestions. PowerApps themes are by default accessible.
- Ensure all elements are clearly visible and text is of sufficient size. All content must be easily read and understood by the naked eye.
- Avoid using the visibility property of items to bring an element into view. If you need to show something conditionally, create the content in a new screen and navigate to it and back.
- Ensure input elements are labeled on the screen. AccessibilityLabel property defines what the screen reader will announce.
- If customizing colors, ensure the contrast of text:background is 4.5:1 or greater. Software tools that assist this process are readily available.
- Ensure layout follows a logical flow when read top-bottom, left to right.
When testing your app’s accessibility, ensure the app can be used with the keyboard only, the accessibility modes on iOS and Android, as well as navigated successfully with the screen reader enabled.
For keyboard navigation (with or without the screen reader) ensure that a logical order is followed when using the TAB key to navigate to input fields by setting each control’s TabIndex property:
- Label, Image, Icon, Shape contols – if they represent interactive elements (i.e.buttons) set TabIndex to 0; if they are decorative elements or text, set TabIndex to -1.
- Avoid setting tab index higher than zero.
Screen reader support
The following software combinations are the supported recommendations for consuming PowerApps with a screen reader:
- Windows: Edge / Narrator
- macOS: Safari / VoiceOver
- Android: PowerApps app / Talkback
- iOS: PowerApps app / VoiceOver
To ensure a satisfying experience with the screen reader it is recommended to:
- Ensure all input controls have the AccessibilityLabel property set.
- For images set AccessibilityLabel to an appropriate description.
- If a picture is not used as a button or a link (i.e. icon is there just for the decoration) and should not be read by the screen reader, make sure the AccessibilityLabel is empty or not set.
- If a picture or an icon is used as a button, then set TabIndex to 0 and AccessibilityLabel to the link description.
Ensure all videos are captioned and a transcript of all audio recordings is available to the user. Video control suppports closed captions in WebVTT format via the ClosedCaptionsUrl property.
Note that with the screen reader enabled, Timer does not announce button text, but how much time has passed. Announcements can’t be turned off, even if timer is hidden with low opacity.
Working with signatures
If you have a signature field that uses the PenInput control you need to enable an alternative method of signature input. The recommended way is to show a TextInput control where a user can type their name. Ensure the signing instructions are placed in the AccessibilityLabel property and the control is placed close to the Pen input – to the right or immediately below.