Правки в разделе изображений

[maniyax]

1. Поправил alt в примере про собак. Теперь он соответствует хорошему фрагменту кода. До этого был как раз один из плохих примеров, когда содержимое alt дублирует находящуюся ниже строку. Это может тоже как-нибудь прописать? И добавить, что содержимое alt не должно дублировать <title> страницы. Я не стал это прописывать, потому что либо для этого нужен отдельный подраздел, либо это итак прописные истины, и не стоит даже уделять этому внимание.
2. Переделал пункт про графические изображения. Удалил пустой alt, так как это устаревший метод. aria-hidden справляется на ура с этим. Более того, такой метод использовать сейчас предпочтительно, потому что с неявным скрытием (через пустой alt) Google Chrome пытается все равно отобразить изображение для скринридера.

Возможно стоит разбить это также на три подраздела с примерами? Потому что сейчас пример немного не соответствует. Перед влитием PR нужно обязательно проработать этот вопрос, и либо переделать пример на одну из рекомендаций, либо разделить рекомендации на две/три.

Добавляйте декоративные изображения с помощью свойства CSS background-image, чтобы скринридеры их игнорировали. Если изображение добавляется на ссылку, обязательно добавьте атрибут aria-label="Текст для скринридера", иначе на скринридер передастся относительный путь ссылки.

Распространенный пример - ссылки социальных сетей в подвале сайтов. Декоративные иконки каждой соцсети обычно выводятся в background-image, и скринридеру передается короткий URL компании в каждой из соцсетей.

Если декоративный элемент представлен в виде тега 74 вне ссылки, добавьте к изображению атрибут aria-hidden="true"

Это базис. В примере как раз прописан этот случай. Просто раньше он отдельно не был обозначен, раньше он шел только внутри ссылки. Я это разделил для детализации.

Если изображение находится внутри ссылки, дубль которой присутствует рядом с изображением, добавьте к самой ссылке атрибуты role="presentation" и aria-hidden="true":

Самый распространенный пример - это категории в интернет-магазине.
Есть картинка категории/товара, есть ссылка с ее названием.
Картинка размещается внутри еще одной ссылки, ведущей на ту же страницу, что и линк с названием.
Корректно в таком случае скрывать не картинку, как было написано раньше, а всю ссылку с картинкой внутри, так как это просто дубль для визуальности.

И еще одна правка, которую я не стал вносить сходу. Если будет одобрение, то я запушу коммит с удалением.
Изображение обозначает объект, который описывает текст
Например, иконка телефона рядом с телефонным номером:
Но ведь это не корректно. Изображение телефона является декоративным, и отображать лишний элемент перед номером, который займет у скринридера сразу два слова "Графика телефон" - это плохо.
О том, что это телефон, человек сможет понять по формату. Тогда было бы более правильным регламентировать формат записи телефонов, как это сделано в США, но это не для текущего документа, как мне кажется.