maniyax
commented
3 years ago - Поправил alt в примере про собак. Теперь он соответствует хорошему фрагменту кода. До этого был как раз один из плохих примеров, когда содержимое alt дублирует находящуюся ниже строку. Это может тоже как-нибудь прописать? И добавить, что содержимое alt не должно дублировать
страницы. Я не стал это прописывать, потому что либо для этого нужен отдельный подраздел, либо это итак прописные истины, и не стоит даже уделять этому внимание.</li> <li>Переделал пункт про графические изображения. Удалил пустой alt, так как это устаревший метод. aria-hidden справляется на ура с этим. Более того, такой метод использовать сейчас предпочтительно, потому что с неявным скрытием (через пустой alt) Google Chrome пытается все равно отобразить изображение для скринридера.</li> </ol> <p>Возможно стоит разбить это также на три подраздела с примерами? Потому что сейчас пример немного не соответствует. Перед влитием PR нужно обязательно проработать этот вопрос, и либо переделать пример на одну из рекомендаций, либо разделить рекомендации на две/три.</p> <blockquote> <p>Добавляйте декоративные изображения с помощью свойства CSS background-image, чтобы скринридеры их игнорировали. Если изображение добавляется на ссылку, обязательно добавьте атрибут aria-label="Текст для скринридера", иначе на скринридер передастся относительный путь ссылки.</p> </blockquote> <p>Распространенный пример - ссылки социальных сетей в подвале сайтов. Декоративные иконки каждой соцсети обычно выводятся в background-image, и скринридеру передается короткий URL компании в каждой из соцсетей.</p> <blockquote> <p>Если декоративный элемент представлен в виде тега 74 вне ссылки, добавьте к изображению атрибут aria-hidden="true"</p> </blockquote> <p>Это базис. В примере как раз прописан этот случай. Просто раньше он отдельно не был обозначен, раньше он шел только внутри ссылки. Я это разделил для детализации.</p> <blockquote> <p>Если изображение находится внутри ссылки, дубль которой присутствует рядом с изображением, добавьте к самой ссылке атрибуты role="presentation" и aria-hidden="true":</p> </blockquote> <p>Самый распространенный пример - это категории в интернет-магазине. Есть картинка категории/товара, есть ссылка с ее названием. Картинка размещается внутри еще одной ссылки, ведущей на ту же страницу, что и линк с названием. Корректно в таком случае скрывать не картинку, как было написано раньше, а всю ссылку с картинкой внутри, так как это просто дубль для визуальности.</p> <p>И еще одна правка, которую я не стал вносить сходу. Если будет одобрение, то я запушу коммит с удалением. Изображение обозначает объект, который описывает текст Например, иконка телефона рядом с телефонным номером: Но ведь это не корректно. Изображение телефона является декоративным, и отображать лишний элемент перед номером, который займет у скринридера сразу два слова "Графика телефон" - это плохо. О том, что это телефон, человек сможет понять по формату. Тогда было бы более правильным регламентировать формат записи телефонов, как это сделано в США, но это не для текущего документа, как мне кажется.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>