Borders Without Boundaries [A to Z a11y]

Introduction

Welcome to the letter B, the next stop in our A to Z of Accessibility: Power Apps Edition. In this post B is for Borders without Boundaries. Specifically, those that are around controls but with a footnote about Table Borders. When designing Power Pages portals with CSS these borders fit into the classes Hover State and Focus State.

Applies to: Power Apps, Power Pages, as well as anywhere tables are used (Word, PowerPoint, Excel etc)

Control Borders 🛂

This topic is predominantly relevant to Power Apps, and specifically Canvas Apps or apps in Microsoft Teams. The wider topic itself also applies to styling that gets applied in Power Pages and even Power BI.

If you are navigating with your mouse getting a visual indicator that you can press something, or that there is an action available, is critical for good UX. It becomes even more essential when you are navigating using the keyboard though. Without any visual indicator you don’t know what control you’ve tabbed onto for starters!

In Power Apps most controls have three main kinds of borders – Border, Hover Border and Focus Border. However, you’d be forgiven for thinking there was only two. That’s because the Border and Hover Border are in the main UI for the control, whilst Focus Border is only available in the properties drop down.

To read more about border properties click here for the Microsoft Learn page on Colour and Border properties (Power Apps).

So let me break down the Borders.

The Border properties

This is the general border around any control when it’s not selected or has any focus. It can often be used as a decorative element to make controls or components stand out on a form, but that is only really a side-benefit and shouldn’t be used in a way that negates or interferes with the accessibility purposes.

 If the user is someone who has visual difficulties, or is using contrast modes etc, then the border can be massively important in showing what parts of the screen have interactions or actions. Having a text box on a form that is simply distinguished by having a light grey background on a white canvas is really not helpful. Putting a coloured border around this (using a colour that you are using across your whole app) helps the user to see that there is a control here.

Setting this in Power Apps is simple. It’s there on the main properties panel, with a nice colour picker as shown below. It is also a property you can set in the Formula Bar.

Hover Border (no, not Back to the Future 2!)

Over the years we’ve got used to seeing website where links might change colour, or the text might get bold and underlined when we hover over them. The same applies to controls on a form or in an app. Letting people know that they are hovering over something they can interact with is a major part of good user experience (UX)

Like the main border, setting this in Power Apps is a piece of cake. It’s on the main properties panel with the border colour and is also a property you can set in the Formula Bar.

Focus Border 👀

If you use alternative input methods such as a keyboard, or even a specialised controller, moving between elements on an app page can be a challenge. I’ll get into the navigation challenges of tab order etc later (see K – Keyboard) but when you have tabbed along a page, how do you know what control you are on.

This is one that massively frustrates me as there is a property called “Focus Border” for this exact purpose. The reason it gets me fuming is that for a lot of controls it is ONLY available from the Formula bar (see the image below) or the Advance tab. To make it worse the default is for it to be the value of the Border property. That means that you tab to it and get ZERO visible feedback by default. If it’s going to be defaulted to another property’s value, then it should at least be the Hover Border colour.

Personally, I recommend using different colours for the Focus Border property and the Hover Border, but some people prefer for them to be the same. Just as long as you don’t have Focus and Hover the same as the main Border colour!

A snack at the Table

I can’t talk about Borders without mentioning Tables. Tables can be the absolute bane of screen reader users and can also be really disorienting for people with dyslexia or vision problems.

There’s quite the trend for doing tables and NOT putting any borders in. You might get some light shading between rows, but nothing that stands out to any great degree and certainly not in any way that provides great contrast! Microsoft I am looking at you here as the docs and release note pages can be really bad for this.

So, here’s my ask. PLEASE put borders in on tables. They don’t have to look ugly, or like they’ve just been pulled from a spreadsheet, but you can get inventive and clever about how you split your data.

One final thought on tables. If you’re not presenting data don’t use a table, and definitely 100% do NOT put tables inside tables. If you do so, then I may have to send the squad around to “educate” you and help you appreciate the pain and grief they cause. Just say NO to Nested Tables!

One last note

I hope you have found my A to Z Accessibility: Borders without Boundaries post helpful. This is part of my series “A to Z of Accessibility – Power Platform edition”. Click here to go to the introduction article where I will be posting a Table of Contents, or simply check out the Accessibility section of the website from the top menu or by going directly to the category page here.

Content in this series is © Mike Hartley. I am happy for folks to quote or reuse snippets (with attribution) but this has taken a lot of work to compile so please do not copy whole sections. If there are any corrections or suggestions then please use my social links to contact me. I am always happy to add additional content and remarks with full credit given. Likewise these pages will evolve as my learning and understanding grows, so make sure to keep this bookmarked