Open maniyax opened 3 years ago
Приветствую!
Продолжаю добавлять правки.
</code> страницы. Я не стал это прописывать, потому что либо для этого нужен отдельный подраздел, либо это итак прописные истины, и не стоит даже уделять этому внимание.</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>Если декоративный элемент представлен в виде тега <img> вне ссылки, добавьте к изображению атрибут aria-hidden="true"</p> </blockquote> <p>Это базис. В примере как раз прописан этот случай. Просто раньше он отдельно не был обозначен, раньше он шел только внутри ссылки. Я это разделил для детализации.</p> <blockquote> <p>Если изображение находится внутри ссылки, дубль которой присутствует рядом с изображением, добавьте к самой ссылке атрибуты role="presentation" и aria-hidden="true": </p> </blockquote> <p>Самый распространенный пример - это категории в интернет-магазине. Есть картинка категории/товара, есть ссылка с ее названием.</p> <p>Картинка размещается внутри еще одной ссылки, ведущей на ту же страницу, что и линк с названием.</p> <p>Корректно в таком случае скрывать не картинку, как было написано раньше, а всю ссылку с картинкой внутри, так как это просто дубль для визуальности.</p> <p>И еще одна правка, которую я не стал вносить сходу. Если будет одобрение, то я запушу коммит с удалением.</p> <blockquote> <p>Изображение обозначает объект, который описывает текст Например, иконка телефона рядом с телефонным номером:</p> </blockquote> <p>Но ведь это не корректно. Изображение телефона является декоративным, и отображать лишний элемент перед номером, который займет у скринридера сразу два слова "Графика телефон" - это плохо.</p> <p>О том, что это телефон, человек сможет понять по формату. Тогда было бы более правильным регламентировать формат записи телефонов, как это сделано в США, но это не для текущего документа, как мне кажется.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/maniyax"><img src="https://avatars.githubusercontent.com/u/24973431?v=4" />maniyax</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Добавил правки в формы.</p> <ol> <li>Переместил абзац про указание типа полей выше, так как получается политика двойных стандартов. Сначала рекомендуем писать type="text" в примерах с email, потом исправляемся. Тем более так пример с плохо/хорошо выглядет нагляднее.</li> <li>В поиске по странам исправил ссылку на кнопку. Возможно стоит класс кнопки убрать? Я не вижу, что он делает визуально, поэтому не стал трогать. Пока это ссылка без href, на ней нельзя сфокусироваться. Да и для отправки формы применяются все-таки кнопки.</li> <li>Внес небольшие косметические правки.</li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/maniyax"><img src="https://avatars.githubusercontent.com/u/24973431?v=4" />maniyax</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>На этом, кажется, я закончил с правками того, что есть.</p> <p>Добавил абзацы в меню со ссылками на примеры из WAI-ARIA.</p> <p>Возможно стоит переформулировать? Прошу высказать свои предложения.</p> <p>Абзацы про меню сейчас в формате черновика предложены. /Внести нужно точно для большей ясности, но сформулировать, возможно, как-то иначе.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/maniyax"><img src="https://avatars.githubusercontent.com/u/24973431?v=4" />maniyax</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <ol> <li>Попытался реализовать пример с плохо/хорошо, но не уверен, те ли классы использовал.</li> <li>Прошелся в целом по документу, убрал aria-labelledby на примерах с label for.</li> </ol> </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>
Приветствую!
Продолжаю добавлять правки.