How do I structure my HTML semantically correct for screen readers when the visual order of elements is different?

Question

I’m trying to make a search result list more accessible.

Lets say I have a list of search results that are structured in the following way:

<article>
    <h2>Name of the author</h2>
    <h1><a>Name of the book</a></h1>
    <div class="seperator">
        <div class="availability-status status1" title="available"></div>
        <div class="icon icon-book" title="Book"></div>
        <div class="result-button-group">
            <a href="…" role="button" class="sharing">Sharing</a>
            …
        </div>
    </div>
    <p class="imprint">Publishing house (Year)</p>
    <p class="series">Part of: name of the series</p>
</article>

The name of the book is a link to another page, while the other elements around it are additional information for the corresponding item.

Visually it looks like this:

How do I structure the markup semantically correct so that users with screen readers can make sense of the result item?

When they navigate on a link to link basis they land on the name of the book, but might miss the author field that is above the title, right? Can I achieve this with aria-attributes? Or is this structured enough to make sense of regardless?

I played around with VoiceOver myself to try to make sense of it but I’m far from an expert. So any input is appreciated.

Answer 1

Outline

You should not use a h2 for the author name. This heading would become the heading for the article element (as it’s the first one), and the heading for the book title would create another section on the same level.

Instead, use only one heading (the book title would make the most sense) and group it with the author name (for which you could use a cite element) in a header element.

<article>
  <header>
    <cite>Name of the author</cite>
    <h1><a href=""><cite>Name of the book</cite></a></h1>
  </header>
  <!-- … -->
</article>

Link

When they navigate on a link to link basis they land on the name of the book, but might miss the author field that is above the title, right?

Yes. But that’s not a problem, it’s exactly what the screen reader user expects/wants to do (finding links, not anything else).

You could, however, consider adding the author name to the link/heading, too:

<h1><a href=""><cite>Name of the author</cite>: <cite>Name of the book</cite></a></h1>

Font icons

Note that this is likely inaccessible (details), because the element has no content (the generated image is useless for user agents without CSS, blind users, etc., and the meaning that it conveys is not represented in an alternative way in addition):

<div class="availability-status status1" title="available"></div>

The title attribute is not sufficient. Either use an img (with alt), or add alternative text (and visually hide it).

And this seems to be pure decoration, so there’s no need for a title attribute (and it would be inaccessible to many users anyway, because the element has no content):

<div class="icon icon-book" title="Book"></div>

(But if the information that it’s a book is important, e.g. because there are magazine etc. too, then you should provide an alternative, just like in the case above.)