Должна ли в миниатюре поста WordPress присутствовать role="presentation"?

Question

В настоящее время я пишу тему для нового сайта и хочу быть настолько дружелюбной, насколько это возможно, для вспомогательных технологий. Поэтому мне было интересно role="presentation" в отображении вызова сообщения миниатюра.

HTML-код, сгенерированный PHP, выглядит следующим образом:

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

Должен ли я включить role="presentation" и, если это так, он должен идти в <figure> элемент?

Answer 1

Если мы посмотрим на спецификацию w3 для ролей:

1. [role = "presentation"] отменяет неявную семантику ролей "заголовок", но не влияет на содержимое.<h1 role="presentation"> Sample Content </h1>

2. Не существует неявной роли для span, поэтому только содержимое <span> Sample Content </span>

3. Эта декларация роли избыточна.<span role="presentation"> Sample Content </span>

4. Во всех случаях содержимое элемента предоставляется API доступа без какой-либо подразумеваемой семантики роли.Sample Content

Сказать, что role="presentation" в заголовок, я бы сказал, что либо <figure> или <figcaption> мог бы использовать роль здесь.

Тем не мение:

Если элемент с ролью представления является фокусируемым, пользовательские агенты ДОЛЖНЫ игнорировать нормальный эффект роли и предоставлять элемент с неявной собственной семантикой, чтобы гарантировать, что элемент является и понятным, и работоспособным. Авторы НЕ ДОЛЖНЫ предоставлять значимый альтернативный текст (например, использовать alt="" в HTML4), когда роль представления применяется к изображению.

Поскольку у нас уже есть alt-тег на изображении, я бы сказал, что использовать role="presentation" а также оставил бы это для <figure>, То есть, если вы даже хотите использовать его, потому что он кажется немного чрезмерным, снова цитируя W3 role="presenation":

Элемент, чья неявная семантика собственной роли не будет отображаться в API доступности.

Поскольку изображение отображается, и рисунок может использовать figcaption для дальнейшего объяснения его содержания, я бы сказал, что вам не нужно использовать role="presenation" Вот.

Источник: W3C по ролям

Answer 2

Из предоставленного вами фрагмента кода альтернативный текст на изображении действует как текст ссылки, поскольку изображение является единственным содержанием ссылки. Так что это должно быть не описание изображения, а краткое описание цели ссылки. Прочитайте совет в спецификации HTML5 по этому вопросу.

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

Если img имеет не пустой alt атрибут, который вы не должны ставить role=presentation на нем, как это будет маскировать alt текст атрибута. Если img декоративное использование пустое alt (alt=""). Если у вас есть alt=""тебе не нужно role=presentation