nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Vind meer berichten getagd met

ArcGIS Online

Accepted answers

All comments

TonghuiMing

Hi @Tiff

Yes! That was one of the updates that we have too - what's new in the 2026 Feb release

And yes, we believe that it makes a bit more sense to mimic the HTML Tabs behavior for these views navigation purposes, which gives a quick navigation into the active section right now, instead of tabbing all the way through the nav before going into the actual section view.

Tiff

Hello @TonghuiMing thank you for your update! I got my case notification that it was resolved and I believe I was able to confirm that we were all good (hidden element 9 being the biggest issue).

I did notice too, if you can confirm, that the keyboard shortcuts work a bit differently now. When there's a section and headers, instead of tabbing from one to the next, I had to use the right and left arrow keys. I believe that makes sense to me!

TonghuiMing

Hi @Tiff

The text scroll issue should have been resolved with the latest AGOL 2026 Feb release:

Non-interactive elements can have keyboard focus when they are scrollable, such as a Legend or Text widget without links.

Let me know if you still encounter other issues. Thanks for bringing this up.

TonghuiMing

Hello @Tiff

Sorry for the delay - things have been hectic for the past weeks. I've checked your app, and here are my findings:

- When I tab through the elements, #5 is actually the focus of the outer section view:

- #8 is the inner section view

And yes, setting the padding will expose the focus ring (this was suggested inside the doc and blog). Glad it works out.

For the problematic #9, yes, we've noticed it in some cases too - somehow the rich text (text widget) grabs an extra focus, and it shouldn't - if there is no link configured inside. This is something we need to investigate further. I will create an issue, and feel free to create a support ticket if you need to track the progress. Make sure to pinpoint it as about the Text widget (there are some different cases regarding hidden focus, and most of them are not from the same reason - I will need to further check the reason):

Hope it helps, thank you.

Tonghui

Tiff

Hi @TonghuiMing, please let me know if you have any suggestions or advice based on the revised issue above. Does it seem like there is an out-of-the-box way to fix the hidden keyboard tab focus #9 (which is the column section)? If not, I can submit a technical case with Esri.

Tiff

Hello again @TonghuiMing and @NicoleJohnson - thank you both! I have some updates that help direct us to next steps.

First, the padding certainly helped for focus number 5 and 8. Our accessibility testers said as long as there is a focus element, it does not violate any accessibility issues. This resolves all of the widgets within the column section.

However, the column section itself, which is focus number 9, does not have a focus indicator by default and I cannot seem to set one. This is an accessibility issue because there is an invisible stop.

Here is the app - Untold Stories - though this is shared publicly, it is not yet shared widely with anyone, so please keep that in mind. If you try tabbing through with your keyboard starting with the "How-to" button, you will see that all of the elements have focus except for #9.

Please let me know if you have any other ideas or support to fix this out-of-the-box, or if this needs to be logged as a bug.

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.

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."

Screenshot 2025-08-05 103019.png

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:

Screenshot 2025-08-05 104529.png

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.

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?

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.