How accessible is it to nest multiple tags inside an anchor tag?

Question

Is the following HTML accessible?

    <a id="myClickbaitArticlePreview" href="someUrl">
      <h3>Amazing lifehack! Doctors hate him!</h3>
      <img alt="doctor is staring down a patient" src="procativeThumbnail">
      <p>Compelling copy</p>
    </a>

I know it's valid based on this answer. But is it accessible? Cause I am auditing a website with a similar article structure using a screen reader (JAWS). The reader reads everything in a single breath which is confusing (but I am not blind so I don't know if you get used to it). It also reads the alt right after the title, which in many cases may repeat the content.

Canova

Answer 1

Short Answer

It is both valid and "accessible" in the loosest sense of the term, a good experience for screen reader users - probably not.

It would pass all WCAG guidance, let's put it that way.

Longer Answer

Without seeing it in the context of the page though it is hard to tell you whether this is the best practice. A few things to consider:-

• Is there sufficient white space around these large "link cards" for people with mobility / accuracy / dexterity issues to safely place their finger to scroll the page on a mobile device.
• If the link card is focused is the focus indicator easy to see and sufficient contrast etc. (standard thing to check for but often forgotten on card type links)
• If a screen reader user cycles the page via headings is it logical to have a <h3> in the card, both in terms of heading hierarchy and in terms of page hierarchy.
• Are the alt descriptions correct in their context, if the image is not directly related they may be better being hidden from screen reader users with aria-hidden or an empty (not null) alt attribute (alt="" NOT alt). I would almost certainly say this will be the case but yet again that is your judgement.
• alt being the same as the <h3> title - this is almost certainly a big no no. alt attributes should describe the image in context. If the alt text is the same as the title then make the image presentational / hidden from screen readers as discussed in the previous point.
• Should these be <article> elements to be semantically correct?
• Are they contained in an <ul> so that a screen reader user knows how many items there are?
• would an aria-label on the hyperlink with a condensed version of the text be appropriate (to override the text inside the hyperlink)? It depends on the content so use best judgement.
• Would a hyperlink styled to look like a button at the end of each article be better? If so make sure it doesn't just say "read more" (although at a push you could have "read more" as the button text and have some visually hidden text that says "Amazing lifehack! Doctors hate him!" before it).

As you can tell, without seeing them in context there is lot's of things we cannot tell you but hopefully the above should give you a few things to think about.

As for the screen reader reading everything in a single breath, that is expected behaviour, you just need to get used to it! You could always slow the speech rate in the settings or increase the announcer verbosity (so it has more detail about what element you are in relative to other elements) while you get used to it.

Swayne

Answer 2

According to HTML standards, the a element has a transparent content model with the sole exception that it can't contain interactive elements.

An heading is not an interactive element. So that's good according to the standards.

Regarding accessibility the text link is not optimized.

WCAG in 2.4.4: Link Purpose (In Context) expect a "meaningful link". Having too much information is not a good practice. A better alternative would be to provide a javascript click handler on a <div> while only having the HTML link element on the h3 here.

In your example "doctor is staring down a patient" does not describe the link destination and should not be part of the link text alternative.

Petropavlovsk

Answer 3

Simply adding an aria-label to the anchor tag that is fully descriptive of the link purpose/destination should be all you need to do. This will override the nested H3 text as well as the nested image alt attribute when focus is tabbed onto the link, yet still give screen reader users the freedom to navigate by heading and only hear the heading text, as well as navigate by graphic and only hear the image alt text.

Bobbitt