Accessibility for Table of Contents Widget - Experience Builder

[IrelandHackman]

I'm working on an Experience Builder and have been trying to get the accessibility feature to work for the Table of Contents widget. I've turned on both accessibility options under the A11Y button and have fiddled with the various layouts of the Table of Contents I currently have. That being said, when I view this Experience in the draft view with the changes saved, I cannot see the drop-down options at all when using only the tab button to navigate.

Now, I know that the tab button is navigating properly because I can see that the tab button will land on the "close" or "expand/collapse" options by text appearing - the same way you can see text when you hover the mouse over a button. Aside from that, the list is not visible. There are rare occasions where the Table of Contents is visible, but out of the dozens of times I have tested this feature, there was only one single time I could get the Table of Contents to remain visible for more than a second.

I don't know why this is happening or what could be causing this widget to not be accessible, but any insight on what could be causing this (whether this widget is not yet compliant with accessible guidelines or this is just user error) or even things to try would be much appreciated. The Table of Contents widget, in my Experience Builder project, is currently located in a Widget Controller within in the header.

[NicoleJohnson]

If you're trying to meet WCAG 2.1 Level AA, there is no requirement to use ONLY the tab key. You will almost invariably need to use other keys to navigate, and that's completely expected. For example, if you had a long list, you wouldn't want to tab through every single item in the list if you didn't want to interact with the list at all.

With your focus set on the expand/collapse buttons, try pressing the enter key.

Some general keyboard navigation tips:

• Press Tab to move to the next link, form element or button.
• Press Shift+Tab to move to the previous link, form element, or button.
• Press Enter or space bar to activate the current link or button.
• Use arrow keys, Escape, or other keys if doing so would seem to make sense.

[IrelandHackman]

Dear Nicole,

Thank you for the clarification. I have been using the "Enter" button to try and access the "Table of Contents", but I've been so frustrated with the "Table of Contents" not working as intended with the general keyboard navigation tips that I forgot to mention that I have been using "Enter", "Tab", "Shift+Tab". I apologize for the lack of clarity. Using the arrow keys to scroll down works as intended as well.

All that being said, I can use the "Tab" and "Enter" buttons to jump from the beginning of the experience builder to the end/footer with no issue. It's trying to activate the drop-down for the "Table of Contents" that seems to be an issue. I can hit "Enter" after tabbing over to the widget, but after I hit "Enter", nothing visibly happens (usually. Sometimes, the heading of the "Table of Contents" will appear, but not longer than a second or two). The only indication that the "Table of Contents" is supposed to be visible is that if I hit "Enter" after tabbing over to the "Table of Contents", I can hit "tab" again and get the "hovering" text that says "Close".

Edit: It seems that the "Table of Contents" shows up if I switch to another tab in my web browser with my mouse, then switch back, and use the "tab", "shift+tab", and "enter" buttons to navigate. Any suggestions as to why this is or why that would be?

[NicoleJohnson]

If you post your widget configurations (widget controller widget and menu widget (I assume this is what you mean by table of contents widget)), I'll try recreating. Screenshots would also help. Alternatively, you could make the experience public (if you can) and I'd be happy to look.

[IrelandHackman]

I'll take screenshots of the widget configurations, but in the meantime, here's a link to the experience. 
History of the Franklin County Courthouse - Remake

[IrelandHackman]

Here's the settings for the widget controller: 

Widget Controller Settings_1

Widget Controller Settings_2

I have yet to add an accessible label; I want to make sure the experience works as intended first.

And settings for the "Table of Contents" widget are here.

Table_Contents Widget_Settings_1Table_Contents Widget_Settings_2

Just for clarity, the "Table of Contents" widget is located under the widget controller in the page drop-down on the left-hand side of the screen, to better understand the structure of this experience.

Widget Structure_1

I will also say that I was testing the tab navigation, I was in draft mode, but when I quickly tested this in the experience's published version before sending the link to you, it seemed to work as intended. Would there be a reason the keyboard navigation doesn't work in the draft version?

[NicoleJohnson]

The experience you linked doesn't seem to be public. 

I will also say that I was testing the tab navigation, I was in draft mode, but when I quickly tested this in the experience's published version before sending the link to you, it seemed to work as intended. Would there be a reason the keyboard navigation doesn't work in the draft version?

I would have to think something changed about the configuration between the draft and published versions for this to happen. In any case, there's no reason keyboard accessibility should be hampered in the draft version.

I'm realizing that your "table of contents" widget is a sidebar widget with what looks like a menu widget inside it? Is that correct? (In the top right of any widget configuration, there should be a question mark icon. Click that and you'll see what the widget actually is (vs what it may be named in a template)). Maybe I just can't see how you're using it, but I can't imagine what the sidebar widget is bringing to the table in this context. Have you considered just putting the menu widget straight into the widget controller? That said, I did try setting it up as you've outlined (as far as I can see), and am not experiencing any issues opening the widget controller item, tabbing through the pages, and closing it again. 

[IrelandHackman]

Apologies; this link should work instead. The tab functionality is broken here, even in the published version. https://experience.arcgis.com/experience/7c9b7d9fce2a4a5dacfd4e7eef6c5e43/

As far as the widget, it is a sidebar widget that has been placed within a widget controller (in a header) with buttons below it. I'll include another picture of the drop-down, in case I'm mistaken about what this is. I inherited this project from someone else and as far as I know, it was moved to Experience Builder because it was originally a storymap.

Expanded Widget Info.

[NicoleJohnson · Accepted solution]

Ok, this is really useful context (the menu widget isn't involved here, it's all buttons).

I think it's having trouble loading and/or maybe there's something going on with the fixed panel? If I open the page and immediately tab over to the ToC (or even if I click on it), nothing happens, then after a minute if I try again I'll get a flicker like maybe it's going to open but then doesn't, then after some amount of time I can open it and it seems to work.

If you want to try something different:

• Option 1 (what I think has the best chance of working): Use a fixed window to house your ToC. Since it seems to have trouble loading, I think having it in a separate window will mean it's unaffected (hopefully) by the page trying to load everything else.
• Option 2 (reorganize your existing header a bit): Move the widget controller out of the fixed panel. I don't see any benefit from having it in there. I don't see a row in your header; I would definitely use at least one. Some people put their logo image, title, and everything else into one row; this can lead to the logo looking wonky at different screen widths. I give the logo its own row and left-offset the title row by whatever size the logo row is. The widget controller can go in the same row as the title. Don't forget to deal with other device views if those are customized.
• Option 3: Maybe try taking the animation off the widget controller? Wild guess

This is more than you're asking for, but I would consider swapping out the button links for text links contained in a column with 10 px of padding. The button text is getting cut off at smaller screen sizes (my normal resolution laptop screen) and the focus indicator isn't fully visible around the buttons due to insufficient padding.

Edit: Added some more options

[IrelandHackman]

Thanks so much for the feedback, Nicole! I'll give those options a try and see what works best. I really appreciate you taking time to help me troubleshoot this issue.