Laying it all out [A to Z a11y]

Big Box, Little Box, Cardboard Box

What’s in the Box? I just had to get that reference in there somehow! It is quite relevant here though. In this A to Z a11y post we look at Layout Containers. How they can be an aid, or a hinderance, to accessibility. We also look at how laying it all out makes apps more responsive.

This topic applies especially to Power Apps with a bit of an aside of PowerPoint.

Laying it all out and sticking together

When reading a novel, I read left-to-right, and top-to-bottom. When reading a non-manga graphic novel, I will read in the same order but with one very distinct difference. In those the content is consumed within frames or containers before moving across the page. This can mean that I may consume to whole of the left side of a page before moving on to read 2 or 3 frames on the right-hand side.

The same principle exists within Power Apps in the form of Layout Containers. It also applies to an extent to groups but the push is to move away from those. These Layout Containers allow you to put a set of controls in one “frame” (if we continue the graphic novel analogy). This then controls the way that the User Interface is both rendered and operates.

Using Layout Containers, particularly when used as the main structure across the app, you can present the user interface in a consistent way to users. Without even thinking about accessibility this is a massive part of a good UI. It contribute to a great user experience and more. For those with motor control disabilities, cognitive disabilities, or visual impairments, this is a massive accessibility point.

Consistency in presentation, and knowing where to find objects, makes a massive difference. As a bonus, because of this the adoption rate for the app is more likely to be higher.

Bringing Order to Chaos

I know I mention screen readers a LOT in these posts, but that’s because there are a lot of considerations we need to bear in mind when it comes to them.

In the same way that setting the Reading Order in PowerPoint dictates how a screen reader will interpret a slide, Layout Containers can dictate the reading order of elements and controls in your app. Not only that but, again like the Reading Order, they can help control how keyboard navigation through the page will go.

If you have an app with a header element at the top of each page, a set of navigation buttons down the left-hand side, and then the content in the remaining space, then you will want that menu block to be read together. Using a layout container to contain those buttons ensures they are read out and navigated together.

Let’s all be Responsive about this

Finally, the other element to Layout Containers is how they can assist with designing responsive apps. “But Mike, Responsive Apps isn’t an accessibility topic”… well, it is really.

Responsive design helps with good UX, and good UX will ALWAYS include accessibility. If controls and pages flow in an ordered manner when being displayed on different screen sizes, then the app becomes more accessible. Some users with accessibility needs will need to zoom in. Some will need to have text displayed in a larger font size. Both of these will affect your pixel-perfect layout. By using layout containers wisely, and ensuring controls are ordered logically, you have control over how zooming etc presents the users with a design that you want them to see.

If you check out the “Create Accessible Canvas Apps” page you can see how containers play a part. The details of the Container control can be found at Microsoft Learn here.

Thanks for reading the A to Z a11y – Laying it all out

Thank you for reading L – Laying it all out. This post is part of my [A to Z a11y] series the “A to Z Accessibility: Power Platform Edition”. Click here to go to the introduction article where there is a Table of Contents. You can also check out the Accessibility section from the top menu or by going directly to the category page.

Content in this series is ©Mike Hartley. I am happy for folks to quote or reuse snippets (with attribution), but 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.