belinus belinus - 27 days ago 12
HTML Question

Should A WordPress Post Thumbnail Have role="presentation" in it?

I am currently writing a theme for a new site and want to be as friendly as I can for assistive technologies. As such, I was wondering about including

role="presentation"
in the display of the call of post thumbnail.

The HTML generated by PHP looks as follows:

<figure class="featured-image">
<a href="{permalink}">
<img src="{featured image}" alt="{description}">
</a>
</figure>


Should I include a
role="presentation"
and, if so, should it go in the
<figure>
element?

Answer

If we look at the w3 specification for roles:

  1. [role="presentation"] negates the implicit 'heading' role semantics but does not affect the contents. <h1 role="presentation"> Sample Content </h1>

  2. There is no implicit role for span, so only the contents are <span> Sample Content </span>

  3. This role declaration is redundant. <span role="presentation"> Sample Content </span>

  4. In all cases, the element contents are exposed to accessibility APIs without any implied role semantics. Sample Content

Saying that the role="presentation" has to be given to a heading, I would state that either the <figure> or a <figcaption> could use the role here.

However:

If an element with a role of presentation is focusable, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics, in order to ensure that the element is both understandable and operable. Authors SHOULD NOT provide meaningful alternative text (for example, use alt="" in HTML4) when the presentation role is applied to an image.

Since we're already having an alt tag on the image, I would say that it's redundant to use a role="presentation" as well, and would leave that for the <figure>. That is, if you even wish to use it, because it seems a little over the top, quoting the W3 again on role="presenation":

An element whose implicit native role semantics will not be mapped to the accessibility API.

Since the image gets mapped, and the figure could be using a figcaption to explain it's content further, I'd say you do not have to use a role="presenation" here.

Source: W3C on Roles

Comments