Transcription

PowerApps AccessibilityStandards and GuidelinesWhite paperSummary: This is a technical white paper aimed at Microsoft PowerApps makers in the enterprise. Thisdocument contains standards and patterns to ensure that your apps comply with Web ContentAccessibility Guidelines and work properly with assistive technologies.Writers: Aniket J Gaud, Krishna Chaitanya (Kc), Snigdh Manasvi.Technical Contributors: Emma Cooper, Pat Dunn, Venu Gopal Gaddamedi, Rema Gopinathan, Tah WeiHoon, Ruth Jacob, Filip Karadzic, Vikas Khanna, Anirudh Kishan, Aza Mathew, Santhosh Sudhakaran.1

Contents1Introduction . 41.1Purpose of this white paper . 41.2Scope of this white paper . 41.2.123Getting started . 52.1Accessibility overview . 52.2Accessibility in PowerApps. 52.3Further reading . 6Building accessible PowerApps canvas apps . 63.1General guidelines . 63.1.142This is a living document . 4Keyboard accessibility . 73.2Screen. 73.3Label . 93.3.1Live label . 103.3.2Interactive label . 133.4Button . 133.5Text Input . 153.6HTML Text . 173.7Gallery . 183.8Image. 193.9Icons . 193.10Add picture. 203.11Data card . 203.12Check box . 213.13Sliders . 223.14Toggle . 233.15Timer . 233.16Known accessibility issues in PowerApps . 24Testing PowerApps for accessibility . 244.1The Accessibility checker . 244.2Accessibility Insights . 254.3Color Contrast Analyzer . 26

4.4Configuring your device . 274.4.1Android TalkBack . 274.4.2iOS VoiceOver . 284.4.3Narrator. 294.4.4Windows high-contrast mode. 305High-contrast mode . 316PowerApps accessibility scenario . 337References . 363

1IntroductionPowerApps is a high-productivity application development platform from Microsoft. The platform is usedby Microsoft to build first-party applications on Dynamics 365 for Sales, Service, Field Service, Marketing,and Talent. Enterprise customers can build their own custom line-of-business applications using the sametechnology. Individual users and teams within your organization can also build personal or teamproductivity applications with no code or low code.1.1 Purpose of this white paperThis white paper is for the enterprise application developer (maker) responsible for designing, building,testing, deploying, and maintaining PowerApps in a corporate or government environment. This whitepaper is a collaborative effort of the Microsoft PowerApps team, Microsoft IT, and industry professionals.Adherence to the guidelines and standards in this document will assist developers in making theirPowerApps canvas apps accessible to all app users. From here on, this document refers to enterpriseapplication makers and developers as makers.1.2 Scope of this white paperUnless specifically noted, all features mentioned in this white paper are available as of May 2019. Thefollowing topics are out of scope for this white paper: PowerApps fundamentals for building applications. This paper assumes that the reader has aworking, but not necessarily expert, knowledge of how to build a PowerApps canvas app and abasic understanding of accessibility. For blogs, tutorials, training resources, and communitysupport, visit “Learn PowerApps” at powerapps.com: https://docs.microsoft.com/enus/powerapps/index .Power BI and other parts of the broader Microsoft Power Platform.General coding standards for PowerApps canvas apps. For that, we recommend that makers readour companion white paper at https://aka.ms/powerappscanvasguidelines.1.2.1 This is a living documentThis white paper is intended to be a living document. As the Microsoft Power Platform capabilities andindustry standards change, so will this document.Microsoft is listening to customer feedback and constantly evolving the Microsoft Power Platform sothat makers can build better apps for users. As a result, today’s best practice might be deprecated asnew features change the most efficient approaches. Check back periodically to see the latest standardsand guidelines.Thank you to all the professionals who contributed to this document for sharing your collectiveguidance and experience. Now, on to the guidance.4

2 Getting startedIn this section, we cover the fundamentals: What is accessibility, and how is it implemented inMicrosoft PowerApps Studio? Where can you find online documentation about canvas apps? If you havea good foundation in these topics, you can skip ahead to the next section, where we coverimplementation.2.1 Accessibility overviewThe most humbling experience for our engineering team came when we asked a user with visualimpairments to test our new internal Careers site. We watched his frustration mount as the focusjumped unpredictably around the screen and cryptic control names were read off, out of order, in arobotic voice. To our horror, he tabbed right past the polished “Search Jobs” image button our UX grouphad worked so hard to create. To him, it was invisible. His verdict? “I can’t use this site.”Let that sink in for a moment—he could not apply for a job using our site.PowerApps embodies the idea of “democratization of development”—anyone in your organization canquickly and easily create a powerful app and share it broadly. But the app maker has an ethical, andsometimes legal, obligation to support “democratization of usage” as well—any user of your app mustbe able to use it as it was intended.Democratization of usage can unintentionally be compromised. For example, a user with profoundvision loss might not be able to differentiate light gray text from a white background. Other users mightnot have the motor capabilities to tap on a mobile device screen or will be unable to use your app if theTabIndex property of a control is undefined.As an app maker, you must understand that users might have vision, hearing, mobility, or cognitiveimpairments that make it necessary for them to use assistive technologies to use your apps. Thesetechnologies vary across mobile and desktop platforms.The World Wide Web Consortium (W3C) is the main international standards organization for the WorldWide Web. W3C has developed the Web Accessibility Initiative (WAI), which is a great place to learnabout accessibility fundamentals and standards, like the Web Content Accessibility Guidelines (WCAG)and mobile-specific content.2.2 Accessibility in PowerAppsThe Microsoft Power Platform has been designed with accessibility in mind. This begins with the makerexperience itself, where the app builder is free to create accessible apps with PowerApps while usingassistive technologies. For example, Image 2-1 shows a blank app in high-contrast mode.5

Image 2-1Dedicated teams of engineers around the world have strived to ensure that PowerApps supportaccessibility, yet it is possible to build an app out of accessible components that are implemented in aninaccessible way. For example, a maker might choose to make a button out of an Image control with noalt text, and a user with visual impairments would not be able to understand its purpose.2.3 Further readingFortunately, great resources are already available within the Microsoft Power Platform to get youstarted. To begin with, we highly recommend that you read Create accessible canvas apps in PowerAppsto understand how to build and test your apps for accessibility.3 Building accessible PowerApps canvas appsIn this section, we cover practical accessibility guidelines for the screens and controls in your apps.3.1 General guidelinesAn accessible PowerApps canvas app begins by having an orderly, consistent way of defining thecontrols on each screen. Some controls are decorative, like a horizontal line between Form sections, orimportant but non-interactive, like text on a label.6

3.1.1 Keyboard accessibilitySome controls are interactive, where a user can select the control to interact with it (like entering text orselecting a drop-down list). Follow these general guidelines for interactive controls: Try to have a control flow that matches your language. For example, an English speaker wouldexpect that the Tab key would move the focus on the screen from top to bottom and left toright.The TabIndex property must be set to 0 or greater so that keyboard users can navigate throughinteractive controls.The visual focus indicator (focus border) should be visible. To do this: The FocusBorderColor property must be set to indicate that the control is focused, andthe border color must have a minimum 3:1 contrast ratio with the background color. Formore information, see WCAG standards. The FocusBorderThickness property must be set to a value greater than 0 for the borderto be visible. If the control doesn’t have a border when it is unfocused, we recommend setting theBorderStyle property to BorderStyle.Dotted.3.2 ScreenMany app makers assume that screen names are seen only in the PowerApps editor, but screen namesare also read by screen readers. For example, if your application launches to a main menu screen calledscrnMainMenu, the screen reader attempts to pronounce the screen name before reading the contenton the screen.To make the screen names understandable when announced by a screen reader, follow theseguidelines: 7End all the screen names with the word “screen” so it’s clear what is being announced by thereader as