Accessibility is not important! Unless you have a real need for it. This is exactly the problem with developing apps in PowerApps. How many developers have a need for accessibility to be considered? How many developers understand accessibility? Within this post I’m looking at some of the accessibility features available within PowerApps.
First I’m going to have a look at some of the basic accessibility features within PowerApps. After that I will look at how you can make your apps more accessible.
Accessibility features
Table of Contents
Enable screen readers to see the content.
To make elements on your page available to screen readers PowerApps has some settings available. On the Label control there is a setting Live.
The Live setting has a few options available
- Off
- Assertive
- Polite
If Live is set to Off then the screen reader will ignore any changes to the label.
When it is set to Assertive, the screen reader will be interrupted when the label changes while the text was read out.
When you use the Polite setting the full text of the label is read out before the changes are read out.
Accessibility Checker
Now that you have developed an app and you think that you did all the right things to make your app as accessible as possible, you should use the App checker to check for any accessibility issues within your app.
In my example app I only very quickly added some controls on a screen and this already resulted in 3 issues.
Some basic issues are:
Missing accessible label – The accessible-label needs to have a value set
Focus isn’t showing – The focused border thickness should be set to a value higher than 0
Missing captions – The ClosedCaptionsUrl for a video or audio should be set. 
Missing helpful control settings – This warning is reported when for example markers in graphs have been switched off. Without markers graphs show as shown below, where values for each bar are shown then is is enabled.
HTML won’t be accessible / If this HTML contains interactive elements consider using another method, or remove the HTML from this element – When you use a control any other than the HTML control that is displaying HTML you will see this message. In short use the HTML control to display HTML.
Turn off autostart – You will see this warning when videos autostart. Even without considering accessibility, I can’t really see the need for autostart anyway, as the viewer most of the times either doesn’t want to be bothered with the video or isn’t ready to watch the video when a screen is opened.
Revise screen name –by default Screens are given a name Screen1, Screen2 etc. Screenreader will read this name out. Should you call it ScreenThatIsVeryImportantButDifficultToUnderstand or should you go for something like Home Screen? I’ve seen people prefixing every control please think about your names! scnDashboard may not be that friendly.
Add State indication text – You will see this Tip (this should probably be more than just a tip!), when you set the ShowValue of a toggle control to false.
Missing tab stop – When the TabIndex of a clickable control is set to -1 you will get this warning. Set the TabIndex to 0 or greater and your control can be accessed by tabbing through your screen.
Check the order of the screen items – When the TabIndex of your controls doesn’t match the order of the controls on your screen you will get the tip to review the TaqIndex order. It only makes sense to make sure that the TabIndex guides a user through the controls in a logical order.
Add another input method – When a Pen control is added to a screen an alternative should be offered for people who can’t use a pen control. e.g. a text control.
Make your app more accessible
Colour
There are a few things that might really help your app become more accessible. Most companies will brand their app according to their company’s branding standard dictating a certain colour,
font and logos. These standards might not always work the well for everybody within your organisation. This could result for example in red text on grey background. This might be okay for some people, but not for everybody.
To make your app work however, you should consider offering users an alternative colour scheme for your apps. These settings should of course be remembered the next time the app is opened.
Fonts
The same should be considered for fonts. When you are looking for a free font you could look at https://www.websiteplanet.com/blog/best-free-fonts/ or maybe you could even consider a special fonts for people suffering from dyslexia? Ok, Power Apps doesn’t have these fonts available to you but offering at least the different options could help some of your users.
Size
Then finally the size of fonts should be controllable. Assume this to be complicating the development of your app. Imagine that each control with text may be displayed with different sizes. When the location of each control depends the size of the text in other controls, you should consider developing the screens with this in mind.
Final thoughts
There is still plenty of improvement possible within Power Apps to make it easier to make apps fully accessible, however hopefully with the options in this post it will help you develop your apps in a more accessible way.
Hi Peter
Very good article, especially for those who are involved in UK government sites which require their sites to be accessible (“AA” or “AAA”).
Regards
Nigel