So much good stuff… what to do?
Howdy reader and welcome to the first O in the A to Z Accessibility: Power Platform Edition. In this article we are Overflowing with content, or rather talking about what to do when we are.
When I’m using an app or website, it is really frustrating when content gets clipped and you can’t see it all. It’s even more annoying when it is important information such as error messages. Even worse is when it pushes other content off screen and you can’t access it.
In this post I am covering Power Apps, Power Pages, Power BI. The principles also apply in things like Word, Excel, PowerPoint and more.
Some of the concepts here will also overlap with R, where I look at Responsive design. Technique G179 of the WCAG 2.0 specification also covers this requirement. You can find this technique at the WCAG site here.
Don’t go chasing waterfalls…
… or rather, do please chase waterfalls!
We all love design that looks good, works well, and is just well thought out and is pleasing to the eye. For some people though, they might need to use different scaling. Some people might be zooming in to 150% or more to be able to view.
If that happens, what happens to the design. More importantly, what happens to the content.
I’ve seen designs and apps where you can scale up, but when you do the content gets clipped because the designer has gone for pixel-perfect design. Even worse is that the clipped content is in a place you can’t get to at all, so you can’t read or see it.
In all of our designs we need to ensure that if people zoom in, or have different default scaling/DPI settings, that the content remains visible.
It’s all relative
If you are a web designer who uses CSS then the EM measure is probably something you are well familiar with. It has an even better cousin called REM though – not to be confused with the Michael Stipe led band.
REM works on a Relative basis to other elements and scales up nicely when DPI settings and scaling are different. EM can do some of this, but it’s not the best measure as it can miss things and not quite work properly.
When we are building Apps we need to be thinking relative. Hardcoding numbers allows for pixel-perfect design, but it doesn’t always work well with scaling. Test by changing the scaling on your monitors and devices, and using different device font sizes etc. This allows you to see how your app will behave and work. It also means that you can ensure everything remains visible no matter the scale.
Splashdown… or the end of this post anyway
Thank you for taking the time out to read this latest part of the A to Z Accessibility: Power Platform Edition. This was the letter O and was Overflowing with Content. Yeah, a bit of irony considering it’s quite a to the point post I know!
Please check out the rest of the series either by going to the table of contents on the launch post here or by heading to the category page in the top menu or by clicking here.
Content in this series is © Mike Hartley. I am happy for folks to quote or reuse snippets (with attribution) but please let’s not go all Clone Wars on this. This has taken a lot of work to compile so please do not copy whole sections or I may have to set Jar-Jar Binks on you. 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 and check back every so often.