Hi all,
I'm wanting to build a Power App that has really strong accessible support as standard, so that Screen Reader users, Keyboard-Only users and as many other types of accessibility are covered. We have a richly diverse set of colleagues in our organisation and I want everyone to have an equitable experience when using our internal apps, regardless of their disabilities, that tailors the experience to their specific needs wherever possible.
I find the accessible elements of Power Apps building to be very limited (and limiting) and I'm hoping there might be some more hidden tips or tricks that can help to get around the issues.
Not sure why they can't create some form of 'Reading Order Pane' like they have in PowerPoint, or some way of linking or programming specific journey mapping for assistive tech users that are more seamless and intuitive: I'm really interested in building accessibility into everything I make and even I'm struggling to do it justice, so I dread to think what other people are doing without that drive. It's no wonder that disabled people aren't properly supported if their basic needs are not being met!
Anyway, I'm hoping there will be more updates or improvements after the annual Ability conference in a few weeks' time.
Overview of the app:
For now, I'm looking to find a way of programming in some Screen Reader journeys to make navigation and content delivery present in a way that flows better for users.
This is a screenshot of the basic setup for the app (I've removed logos/names/language for certain things):
It's essentially 3 containers:
- One Header bar (top)
- One 'Tab List' navigation bar (lower left)
- One content display box (lower right)
There is a menu on the page before this, but that one is very simplistic with just 7 horizontal buttons that fill the screen, so not difficult to program for Accessibility.
So, for this screen above, I want the Screen Reader to read:
- the screen name
- the title (in this case 'Home')
- the 'Main Menu' button
- the 'Close App' button (not pictured)
and then start to read down the tab list on the left:
(There will be more than 3 Tab List items, but just using this basic template to show the general look of the screen and not create too much confusion with multiple options)
Questions:
- For each item on the Tab List, I want it to be able to be selected and the Screen Reader then goes to read the container content on the right hand side.
- Is there a way of connecting the two containers without using the '1 pixel lower' technique for reading order?
- Possibly using some programming in the 'OnSelect' box or similar, combined with the 'Live' labels (Assertive/Polite) to change the journey/Reader pathway?
- Is there also a way of announcing the Tab List items when hovering over them (before selecting)?
- Maybe it could announce them in order just from moving down the Tab List so that it reads the menu as it should, then when the user selects a specific item in the Tab List by clicking it: That's when it connects over to the right hand side container and follows the content in a readable format/flow?
Hoping someone is able to help, as this is a major part of the App I'm trying to build and will have a big impact on the scope of the project. So I need to find a solution as soon as possible.
Thanks.
Sam