Accessibility Issue - Hidden keyboard/tab focus for widgets within column section

[Tiff]

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!

[JeffreyThompson2]

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]

Hi @JeffreyThompson2 Thanks for your note! I thought I had it turned on but for some reason it was toggled off. it did not seem to fix the issue though, still two or three hidden stops as a result of the column. 

[NicoleJohnson]

@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:

[Tiff]

Hi @NicoleJohnson that is very nice of you to take the time to build a mockup of this layout! I was able to confirm the padding aspect by changing one from 10 px to 20 px and then seeing the black outlined around it.

However, the accessibility issue that was flagged by our testers are as follows: "Recommended to test the site by navigating with only TAB key and identify all the non-actionable and/or invisible tab stops.
All actionable elements need to receive focus and should be visible. All non-actionable elements should not receive keyboard focus."

My interpretation of this is that the columns itself should not be provided a keyboard focus since it technically does not serve a purpose. In my original picture, 5 and 8 do nothing while the 9 column focus does scroll down the column a bit likely due to the style height and how I've fit the elements. But ideally, a keyboard focus on the column technically should not do anything (moving keyboard keys does not have any actionable outcome) and so I think the issue is that the columns should not be recognized as a keyboard stop. @TonghuiMing what do you think? Thank you for your review and support!

[TonghuiMing]

@Tiff, if Nicole's detailed comment above still does not solve your case, it might be helpful if there were a sample app that could be shared.