We have a widget in our website where people can open a menu and add comments or feedback to a piece of content. Other users can then interact with these comments (like/reply/moderate etc.) That means there is a section inside the webpage that can contain an arbitrary amount of interactive elements, each usually a button or a link.
It is unclear to me how a user with a screen reader would keep up with this. Having tried out NVDA on simply the youtube comment section there seems to be no way to quickly navigate between comments too and TAB simply moves from one “like / dislike / more settings / link to userprofile / add comment” button which means you need to use several inputs to navigate from one comment to the other, which seems assinine to me.
If I would use a controller to navigate such a comment section I would expect that my selection first highlights each individual comment, reading the comment without any context out loud and if I would want to interact with the comment I would “activate / enter” the comment to reveal the user interface regarding that comment alone.
I do not know if this kind of approach would result in an actual accessible comment section or if would break several accessibility guidelines as I would represent simple text sections as interactive elements with there having to be a written guide to what usual actions would result in within this specific context (“Press Enter to interact with this comment. Press ESC to return to the list.”)
Are there best practices to uphold when you are trying to present a section of a webpage with an arbitrary amount of interactive but hierarchically managed elements?
Here is a mockup of the raw structure of this interface.
<div class="menu">
<div>Feedback</div>
<div class="comments">
<ul class="comment-list">
<li class="comment-item">
<div class="comment">
Hello
</div>
<button>Like</button>
<button>Reply</button>
<button>Remove</button>
</li>
<li class="comment-item">
<div class="comment">
What
</div>
<button>Like</button>
<button>Reply</button>
<button>Remove</button>
</li>
<li class="comment-item">
<div class="comment">
Why
</div>
<button>Like</button>
<button>Reply</button>
<button>Remove</button>
</li>
<li class="comment-item">
<div class="comment">
How
</div>
<button>Like</button>
<button>Reply</button>
<button>Remove</button>
</li>
</ul>
</div>
<div class="write-area">
<textarea placeholder="Write your comment ...">
</textarea>
<button type="button" onclick="send"> Send </button>
</div>
</div>