Canvas PowerApps Quick Fix 1: Tab Index Ordering Issue Impacting 508 Compliance

#TL;DR

If keyboard users cannot tab through icons or buttons in the correct order, place those controls inside a container. Horizontal containers are the best fit for navigation rows, but the important pattern is consistency: use containers for navigation inside components and on regular canvas app screens.

#Issue

Using the keyboard, a user cannot tab across controls in the desired order.

For example, if three icons or buttons sit side by side, the default keyboard order may skip items or move through them in a way that does not match the visual layout. That creates a Section 508 compliance issue because the focus order is not predictable.

#Impact

• Keyboard-only users may miss controls entirely.
• The visible layout and the tab order may not match.
• Navigation can feel broken inside components and on normal app screens.
• The app can fail accessibility expectations for Section 508.

#Solution

Use containers to control the grouping and order of interactive elements.

• Use a horizontal container for navigation rows.
• Use other container types where they better fit the layout.
• Put buttons, icons, and other navigation controls inside the container in the order you want them announced and tabbed.
• Apply the same approach inside components and on standard canvas app screens.

#Implementation Guidance

1. Group related navigation controls inside a container.
2. Place controls in the exact left-to-right order you want keyboard users to reach them.
3. Keep navigation patterns consistent across the app.
4. Test the tab sequence with only the keyboard.
5. Verify the focus order inside reusable components, not just on the parent screen.

#Example

The screenshot below shows navigation and a component built with a container that holds buttons.

[Screenshot to be added]

#Artifacts Tree View

The screenshot below shows how the container appears in the artifacts tree view.

[Screenshot to be added]

#Notes

• Containers are the preferred pattern for predictable tabbing across navigation, buttons, and icons.
• This is especially important when controls are arranged visually side by side.
• If keyboard focus feels inconsistent, check whether the controls are still outside a container or nested in a way that breaks the intended sequence.