Building An Accessible Application with Power Platform

This post has been republished via RSS; it originally appeared at: Microsoft Tech Community - Latest Blogs - .

This blog was curated by a group of Microsoft Learn Student Ambassadors.

  • Mireille Tan is from Singapore and an incoming freshman for Computer Science. She is an advocate for digital accessibility and part of Team Elly (@EllyOrg on Twitter). She believes that technology should be inclusive so that all can take advantage of it without being left behind.
  • Chino Ikwuegbu is from Nigeria. She is an Electronic and Computer Engineering Undergraduate interested in Embedded System, Android Development and Securing the Computer. She believes that technology should be accessible to everyone on the planet.

 

Introduction

Accessible Technology refers to technology that can be utilized by everyone regardless of their capabilities, situation, environment and circumstances. People living with disabilities can also use it effectively. It aims to make content more inclusive, providing equal access for all users, improving user experience and creating an environment that works for a wide range of circumstances. Building accessibility into technology will facilitate life, remove restrictions on people with disabilities and open us to the world in a new way. It is why technology that works for all people is good for all people. 

 

Here is a little exercise that you can try out. Open a screen reader (such as Microsoft’s Narrator) and try selecting any image from this article. What do you hear? Actually, what is being read out is known as alt text, and it is one of the many ways you can make your applications, websites and more accessible by allowing screen reader users or those with poor Internet connectivity to “see” images. 

 

However, such basic necessities for digital accessibility are not being applied everywhere. In fact, a study by WebAIM detected 60,909,278 distinct accessibility errors across the world’s top million home pages on the Internet. That is a lot, considering how around 15% of the global population has some sort of disability – mental or physical. Not to mention, people with disabilities (PwDs) form one of the few communities that any one of us may join at any stage of our lives – through age, accidents or even temporary situations – so designing for accessibility benefits all, maybe even yourself! 

 

Luckily, you do not have to look far to start creating inclusive designs. As a low code platform, Microsoft’s Power Platform offers a variety of simple ways for you to design apps and make them accessible. Using a simple quiz app (made using Power Apps) connected to Microsoft Excel, let us go through some digital accessibility UI tips! 

 

Setting up your database

Step 1: Before we begin making our app, let us prepare our repository of quiz questions, options and answers on an Excel spreadsheet in OneDrive.

 

MireilleTan_0-1656132144112.png

 

Step 2: Power Apps accepts Excel tables as a source of data, so with all your data selected, go to the Insert tab and click on “Table”. Check “My table has headers” and select “OK”. 

 

MireilleTan_1-1656132144118.png

 

You can rename the table if you want, but otherwise we are ready to start creating our Canvas app! 

 

Building Our Canvas Application - Part 1

Step 3: Head over to make.powerapps.com on your browser. 

 

Step 4: From the home page, select “Blank app”, then choose to start from a Blank Canvas App. We will be using the phone format and naming our app “Accessible Apps Quiz”, but feel free to use the tablet format or name it whatever you want!

 

MireilleTan_2-1656132144123.png

 

Step 5: By adding various elements (in this case, a label and a button) and styling them, you can create a home screen (refer to the left side bar for the internal components in our example). If you are just starting with Canvas Apps or simply want more guidance on the interface, check out this helpful learning path on Microsoft Learn! 

 

MireilleTan_3-1656132144127.png

 

Note: A11y is a common abbreviation for “Accessibility”, since there are 11 letters between A and y! 

 

Accessibility Checkpoint #1 

Even though this home screen is very simple, there are already a couple of digital accessibility tips that can be applied here! 

 

Accessibility Tip #1: Make your screen names are legible. 

As seen in the left sidebar, the above screen has been named “HomeScreen”. When navigating through an app using a screen reader, this screen name will be read out. That is why screen names should be readable; while using abbreviations like “Home_Scrn” may be more convenient for some, process this using a screen reader and it may sound broken! Using “HomeScreen” and similar names, however, can be read out as “Home Screen” due to the use of camel case – where the first letter of each new word is capitalized. 

 

Accessibility Tip #2: Ensure you are using an accessible color palette. 

Color contrast on your app is essential, because it plays a role in data viewing. It allows people to easily navigate through your site. Always make sure that there is a sharp contrast between the background and the text color on the screen to improve readability. 

The contrast should follow WCAG (Web Content Accessibility Guidelines) Level AAA (i.e. a contrast ratio of 7:1) but also should not be too high – such as pure black against pure white – as that may be over-stimulating. To check if two colors conform to WCAG, you can check out contrast checkers such as WebAIM's Contrast Checker. Additionally, if you are designing your own color scheme, you can make use of palette builders like this accessible color palette builder. 

 

Accessibility Tip #3: Check your font size and type. 

Accessible fonts are fonts that are easy to see, read and understand. The font size and type should not make the content difficult to read and slow the reader down. Even if you cannot change the font properties, by increasing the text size, you can make the letters appear more distinct from one another. 

It is recommended not to go below 12px for normal text in terms of font size. Also, try to use dyslexia-safe and sans serif fonts, such as Arial and Comic Sans, as letters can appear less crowded. 

 

Accessibility Tip #4: Ensure every screen has a text with a Heading role (in this case it is the title “Digital A11y Quiz”. 

Include at least one heading on every screen so that screen readers can better understand the structure of the screen. This helps with ensuring that elements are read out in the correct order. 

 

Building Our Canvas Application - Part 2

We will now create our quiz screen, which will be used to display the questions and options. Let’s start with the layout of the elements. 

 

Step 6: Set up the quiz screen using 2 labels, a container and an icon (further details below). 

 

MireilleTan_4-1656132144133.png

 

For now, while we are focusing on the UI, you can key in some sample text instead of retrieving it from Excel. Remember the tips from above on font and color! 

 

Inside the container, we have a horizontal container consisting of two vertical containers. This is what we are using to create the grid for our option buttons! The container also has a timer that will start counting down after the user selects an option. 

 

MireilleTan_5-1656132144135.png

 

Accessibility Checkpoint #2

Here are some more accessibility tips that we can observe from the quiz screen! 

 

Accessibility Tip #5: Group similar elements together using Containers. 

By default, screen readers will read out elements on a screen based on the position of their top left corner, from top to bottom, right to left. However, sometimes that is not the most intuitive order for certain layouts. Using Containers may not only help with your layout (for example, vertical or horizontal), but they can also help group related elements together, thus refining the reading order! 

 

Accessibility Tip #6: Take advantage of Power Apps’ AccessibleLabel and Tooltips 

Earlier in this blog we mentioned alt text. The equivalent of that on Power Apps is the AccessibleLabel, which will instruct screen readers what to read out! That is why for elements relying on visuals, such as icon buttons, inputs and images, you should set an appropriate description. 

Meanwhile, tooltips are texts that appear when you hover over an element for some time. They are often used to provide more guidance and clarity on what an element does, or what it expects. This can be useful to people who may find it a little more difficult to interpret certain icons or elements. 

In this screen, we can use it here for the “back button” so that its purpose is a lot clearer to all.

 

MireilleTan_6-1656132144137.png

 

Accessibility Tip #7: Remember to assign TabIndex = 0 to interactive elements and –1 to non-interactive elements. 

If you are familiar with video games, you probably know that there are many tools for player controls – controllers, keyboards and even the XBox Adaptive Controller! Likewise, on your web browser, instead of using a mouse or a trackpad, did you know that you can also select various elements using the tab key on your keyboard? This way of browsing is more convenient for some, so we should also ensure that our app is inclusive to this group. In Power Apps, you are recommended to assign TabIndex 0 to interactive elements (for example, buttons, input fields, etc.) so that they can be selected using keyboard controls.

 

MireilleTan_7-1656132144139.png

 

Accessibility Tip #8: Introduce forgiveness in your UI 

Forgiveness is a common concept in UI. For example, having popups to confirm an irreversible choice (for example, deleting an account) ensures that users have a second chance in case they have made a mistake earlier when pressing a button. For our app, we include a timer after the user selects an option to account for any errors that may have been made in terms of input, especially with the buttons in close proximity to one another. 

 

Building Our Canvas Application Part 3

The rest of the steps will be adding on to our Canvas App as well as connecting the dots between what we have done so far.

 

Step 7: Using the accessibility tips from earlier, create two new screens – a CorrectScreen and a WrongScreen to later indicate whether the user’s selection for a quiz question is correct. Each one uses a back icon, a label (“Correct” or “Wrong”), a check icon and a “Next Question” button.

 

MireilleTan_8-1656132144143.png

 

Step 8: Handle the OnSelect function of the Start button from the home page. 

 

MireilleTan_9-1656132144148.png

 

 

Navigate(QuizScreen, Cover, {questionNum:1, timerStart:false, selectedOption:0, totalScore:0})

 

 

Here, the variables have the following purposes: 

  • questionNum: To track the question number
  • timerStart: To track when the timer should start (i.e. when an option has been selected) 
  • selectedOption: To track which of the buttons has been selected and entered as the current selected option 
  • totalScore: To track the total current score 

Step 9: Connect your Excel table to the Power App by selecting Excel Online (Business) as a data source, giving the required permissions then navigating to your table. Once your data source has been set up, you can click on the three dots next to it to refresh if you make any changes afterwards. 

 

MireilleTan_10-1656132144155.png

 

Step 10: Use the LookUp function to retrieve the question and options text from the Excel table.

 

MireilleTan_11-1656132144158.png

 

 

LookUp(QuizTable, QuestionNo=Text(questionNum), Question) 

 

 

Step 11: Using the buttons’ OnSelect functions, start and reset the timer and assign selectedOption to the correct number.

 

MireilleTan_12-1656132144161.png

 

 

UpdateContext({timerStart:false}); Reset(Timer); UpdateContext({timerStart:true, selectedOption:1}); 

 

 

Step 12: To prevent multiple clicks on the same button, you can also set the button’s DisplayMode property to View instead of Edit if selectedOption is the corresponding number. Optional: Similarly, you are encouraged to change the color of the selected button for clarity to the user. 

 

MireilleTan_13-1656132144167.png

 

 

If (selectedOption = 1, View, Edit)

 

 

Step 13: When the timer ends, navigate to either the correct or wrong screen depending on the value of selectedOption compared to the answer from the Excel table.

 

MireilleTan_14-1656132144171.png

 

 

If(Text(selectedOption)=LookUp(QuizTable,QuestionNo=Text(questionNum),Answer),Navigate(CorrectScreen,Cover,{questionNum:questionNum+1,totalScore:totalScore+1}),Navigate(WrongScreen,Cover,{questionNum:questionNum+1,totalScore:totalScore})) 

 

 

Step 14: Create a results screen that will display the final score. For the score label, we will use the formula below to automatically show the correct score (it will once the quiz has been completed!). 

 

MireilleTan_15-1656132144174.png

 

 

Concatenate(Text(totalScore), "/", Text(CountA(QuizTable.QuestionNo))) 

 

 

Step 15: Set the OnSelect functions of the correct and wrong screens’ “Next Question” buttons to navigate to either the quiz or results screen depending on the question number. 

 

MireilleTan_16-1656132144178.png

 

 

If(questionNum>CountA(QuizTable.QuestionNo),Navigate(ResultsScreen,Cover,{totalScore:totalScore}),Navigate(QuizScreen,Cover,{questionNum:questionNum,timerStart: false ,selectedOption:0,totalScore:totalScore})) 

 

 

With that, you should be done and ready to publish your app! 

 

Accessibility Checkpoint #3 

Here are a few more useful accessibility tips!

 

Accessibility Tip #9: Test your app! 

This may seem like an obvious point; always test your app to ensure that the user experience is as intended. Ideally, for accessible technology, you should try testing it out with different groups of people, including people with disabilities! After all, as the phrase “nothing for us, without us” shows, we should always involve the people whom we are trying to help in our development process. 

However, if you want to do some preliminary testing on your own, Windows offers several ways to try out your app. Under the Accessibility component of Settings, you can activate Narrator, Windows’ built-in screen reader. We recommend using it to run through a published version of your app before you share it with others to ensure that your app works as intended for someone using a screen reader.

 

MireilleTan_17-1656132144183.png

 

Accessibility Tip #10: Provide preference options for your user. 

Something to note is that despite all of the accessibility tips we have given thus far, ultimately everyone has different needs and preferences. That is why a great way to ensure that your app is inclusive to all is to allow the user to choose their preferences. This can range from themes (dark, light, high contrast and more), font sizes and even languages!

We are not able to cover all of these in this blog post, but we would really encourage you to check out Kristine Kolodziejski’s Microsoft Reactor session “Building Accessible Applications with Microsoft Power Platform”! There, she demonstrates how to easily save users’ preferred themes, translate your text without even using a premium connector, and even how to add a text-to-speech system! 

 

Conclusion

Hopefully through this, you will see how easy it is to design for accessibility and understand how it can help all of us in various situations. All the best with creating your own digital accessibility solutions! 

 

References and Useful Resources

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.