This is split out from the master accessibility thread: Accessibility audit and shepherd for making improvements.
This issue applies to when you’re looking at a topic with a bunch of replies. A page like this:
The easiest thing to do would be to use a structure similar to the following, and using proper aria landmarks and labels.
Each topic starter is followed by a sequence of replies, each of which may have replies. Tree structures like this are always messy to display. Here I’ll just concern myself with the starter and sequence of first-level responses.
The biggest issue with current implementation is that there is no way, using a screen reader, to quickly browse from message to message efficiently.
One approach would use just div with proper landmarks and labels. Another possibility would be to insert separators (<hr tags for instance) at the start of each message, just before the username. The idea is that there needs to be some sort of target which screen readers can search for via a simple single-key command. For instance, screen readers can search among headings, landmarks, list items, separators (hr tags), buttons, links with a single keystroke. It is also helpful to allow the addition of labels which can help the user keep track of where she is in a chain of replies. The following example structure attempts to do just that.
<div class="topic" role="region">
<h1 class="title">Looking for an ideal job that fits to lifes purpose</h1>
<div class="topic-starter message" role="region" aria-label="topic starter">
<p>... sequence of paragraphs ...</p>
<nav class="message-controls" aria-label="message controls"> ... </nav>
</div>
<div class="replies" role="region" aria-label="replies">
<header> <!-- this contains all the stats like creator, number of replies, last reply, etc --> </header>
<div class="message" role="region" aria-label="reply 1">
<h2>[user name], 8h, Post is unread</h2>
<p>... sequence of paragraphs ...</p>
<nav class="message-controls" aria-label="message controls"> ... </nav>
</div>
<div class="message" role="region" aria-label="reply 2">
<h2>[user name], 12h, Post is unread</h2>
<p>... sequence of paragraphs ...</p>
<nav class="message-controls" aria-label="message controls"> ... </nav>
</div> ... etc ... </div>
<!-- .replies -->
</div><!-- .topic -->
As I understand this, without some markup to help the screen reader, it essentially drowns the user in all the incidental details along the way (eg, those stats bars, the text in reply features and things like that). All the things that are less salient visually.
The best first suggestion I have here for a solution is to look at markup that would make some of those statistics not read aloud by the screen reader, or nested at a lower level to allow browsing. We might also need more input from users about what good browsing would look like here (since there aren’t titles to each reply, maybe browsing is just the list of author and date, and then users can drill in more with the screen reader to read the body of the reply).
)