Accessibility Issue - Hidden keyboard/tab focus for widgets within column section
We just had our accessibility testing done on our Experience Builder application. We found that there is an issue flagged for column section. Each column section/widget seems to be a "hidden interactive element" where there is keyboard focus applied to that column section. However, that causes an accessibility issue because it's unclear what is being focused on and there is nothing the user can do, making it an unnecessary "stop".
Can anyone from Esri or users advise or provide guidance - is this something that can be resolved for column sections? Are columns generally not advised to be used for accessibility reasons?
Shown in photo #1 is the error with the 9, 5, 8 as hidden interactive elements due to the column widget. Also some are nested within one another (in terms of how I built the app) - shown in photo #2 below.
I would love to learn more about best practices and any suggestions before I rearrange my app. Thank you!
I haven't gotten into as much Accessibility testing as I should/will need to. Have you tried clicking the A11Y button on the bottom bar? Does it help?
@Tiff, it looks like you might have to make a small adjustment (any adjustment) to your layout to trigger the tab order recalculation.
I'm also wondering if it's not a tab order issue per se and more just that you can't see parts of the focus indicator as you're navigating, so then it looks weird?
I just made a rough mock-up of what you have, and it looks like the whole sections get focus as you tab through, but if your column widgets are lacking padding, you're not going to see all the edges of the focus indicator, making it possibly look like some hidden interactive thing when really it's just saying, "this is all one thing."
For example, if I remove all the padding, I just get this weird divider-looking thing between the top section navigation and the in-section navigation, because I'm not able to see the sides of the focus indicator due to lack of padding:
