weblind.ru
weblind.ru copied to clipboard
web-standards-ru
Правки в остальных разделах
Приветствую!
Продолжаю добавлять правки.
- Поправил alt в примере про собак. Теперь он соответствует хорошему фрагменту кода. До этого был как раз один из плохих примеров, когда содержимое alt дублирует находящуюся ниже строку. Это может тоже как-нибудь прописать? И добавить, что содержимое alt не должно дублировать
- Переделал пункт про графические изображения. Удалил пустой alt, так как это устаревший метод. aria-hidden справляется на ура с этим. Более того, такой метод использовать сейчас предпочтительно, потому что с неявным скрытием (через пустой alt) Google Chrome пытается все равно отобразить изображение для скринридера.
Возможно стоит разбить это также на три подраздела с примерами? Потому что сейчас пример немного не соответствует. Перед влитием PR нужно обязательно проработать этот вопрос, и либо переделать пример на одну из рекомендаций, либо разделить рекомендации на две/три.
Добавляйте декоративные изображения с помощью свойства CSS background-image, чтобы скринридеры их игнорировали. Если изображение добавляется на ссылку, обязательно добавьте атрибут aria-label="Текст для скринридера", иначе на скринридер передастся относительный путь ссылки.
Распространенный пример - ссылки социальных сетей в подвале сайтов. Декоративные иконки каждой соцсети обычно выводятся в background-image, и скринридеру передается короткий URL компании в каждой из соцсетей.
Если декоративный элемент представлен в виде тега
вне ссылки, добавьте к изображению атрибут aria-hidden="true"
Это базис. В примере как раз прописан этот случай. Просто раньше он отдельно не был обозначен, раньше он шел только внутри ссылки. Я это разделил для детализации.
Если изображение находится внутри ссылки, дубль которой присутствует рядом с изображением, добавьте к самой ссылке атрибуты role="presentation" и aria-hidden="true":
Самый распространенный пример - это категории в интернет-магазине. Есть картинка категории/товара, есть ссылка с ее названием.
Картинка размещается внутри еще одной ссылки, ведущей на ту же страницу, что и линк с названием.
Корректно в таком случае скрывать не картинку, как было написано раньше, а всю ссылку с картинкой внутри, так как это просто дубль для визуальности.
И еще одна правка, которую я не стал вносить сходу. Если будет одобрение, то я запушу коммит с удалением.
Изображение обозначает объект, который описывает текст Например, иконка телефона рядом с телефонным номером:
Но ведь это не корректно. Изображение телефона является декоративным, и отображать лишний элемент перед номером, который займет у скринридера сразу два слова "Графика телефон" - это плохо.
О том, что это телефон, человек сможет понять по формату. Тогда было бы более правильным регламентировать формат записи телефонов, как это сделано в США, но это не для текущего документа, как мне кажется.
Добавил правки в формы.
- Переместил абзац про указание типа полей выше, так как получается политика двойных стандартов. Сначала рекомендуем писать type="text" в примерах с email, потом исправляемся. Тем более так пример с плохо/хорошо выглядет нагляднее.
- В поиске по странам исправил ссылку на кнопку. Возможно стоит класс кнопки убрать? Я не вижу, что он делает визуально, поэтому не стал трогать. Пока это ссылка без href, на ней нельзя сфокусироваться. Да и для отправки формы применяются все-таки кнопки.
- Внес небольшие косметические правки.
На этом, кажется, я закончил с правками того, что есть.
Добавил абзацы в меню со ссылками на примеры из WAI-ARIA.
Возможно стоит переформулировать? Прошу высказать свои предложения.
Абзацы про меню сейчас в формате черновика предложены. /Внести нужно точно для большей ясности, но сформулировать, возможно, как-то иначе.
- Попытался реализовать пример с плохо/хорошо, но не уверен, те ли классы использовал.
- Прошелся в целом по документу, убрал aria-labelledby на примерах с label for.