Building Apps Everyone Can Use, Including With Screen Readers and Keyboards
View All Tags
Some actions deserve a second thought, such as removing something many people use. Instead of acting at once, the button asks a question on the same screen, with Yes and Cancel below it. Nothing happens until Yes, and screen readers announce the question.
A screen reader reads where the user is. When an action makes a message appear somewhere else, its users don't hear about it. A live region fixes that: screen readers announce whenever its text changes. In Power Apps, a classic Label becomes a live region with its Live property.
On the narrowest phones, 360 pixels wide, my Power Apps app had three layout problems: a title cut in half, a button running off the screen, and list rows where a button left almost no room for the text. Each fix uses the screen's size, so phones get a tighter layout and larger screens stay as they were.
On a phone, a header with two text buttons leaves little room for the title. The modern Button has a Layout property, and ButtonLayout.IconOnly shows just the icon. Switch to it only when the screen is phone-sized, ScreenSize.Small, and keep the button's accessible label.
For more than a line of text, such as a comment or a description, use the modern Text input control with Type set to Multiline. Give it room, a placeholder and an accessible label, and read what's typed from its Text.
A list is more useful when each row opens its details. In Power Apps, that takes three settings: make the gallery Selectable, navigate from its OnSelect with the selected row, and give each row a button so keyboard users can open it too.
While a screen loads its data, show that something is happening. The modern Spinner control is a spinning ring with an optional label; make it visible only while a loading variable is true.
A badge is a small colored label for a short piece of information: a status, a count, a category. The modern Badge control follows the app's theme and has a property, Intent, that picks a color for what the badge means.
Focus isn't showing in the App checker means a control's focus border has a thickness of 0. Someone moving through the app with the keyboard can't see when they've landed on it. For anything they can tab to, give it a border; for a control they can't tab to, the border never appears anyway.
The App checker lists Missing tab stop under Accessibility errors: a control it considers interactive has no place in the keyboard's Tab order. For a gallery, the fix is TabIndex 0. For a plain heading, Microsoft's guidance points the other way, so think before you change it.
