От автора: если в HTML есть ошибки, на экране вы этого не заметите. Поэтому они довольно легко закрадываются в код, могут проскакивать несемантические и недоступные элементы, и это нельзя заметить сразу. Линтить HTML и исправлять ошибки можно разными способами. Например, с помощью W3C Markup Validation Service. Другой способ – использовать продвинутые селекторы для подсвечивания потенциальных областей с ошибками. Такой способ гораздо легче интегрировать в процесс разработки. Ниже представлены несколько способов, как с помощью CSS-селекторов можно линтить разметку.
Инлайновые стили
|
1 2 3 |
*[style] { border: 5px solid red; /* Делаем элементы заметными */ } |
Этот селектор найдет все элементы на странице, к которым применены инлайновые стили. Старайтесь не употреблять инлайновые стили, их сложно переписывать из-за большой специфичности. Однако в некоторых случаях инлайновые стили нужны. Этот селектор выделит их, и вы сможете принять собственное решение (оставить их или убрать).
После нахождения проблемных элементов им можно присвоить стили, чтобы сделать их видимыми на странице. Например, можно добавить большую красную рамку.
Битые ссылки и ссылки без атрибута href
|
1 2 3 4 |
a:not([href]), a[href="#"], a[href=""], a[href*="javascript:void(0)"] { … } |
Эти селекторы подсвечивают все якоря, у которых либо вообще нет атрибута href, либо в нем указан неверный адрес.
Недоступные изображения
|
1 |
img:not([alt]) { ... } |
Запомните, у всех изображений всегда должен быть заполнен атрибут alt. Если атрибут отсутствует, большинство скрин ридеров вместо него прочитают вслух атрибут src, что не несет никакой смысловой нагрузки для пользователя. Более того, это может его запутать.
Селектор сверху не выбирает изображения с пустым атрибутом alt, например, изображения с alt=»». Атрибут alt может быть специально оставлен пустым, чтобы скрин ридер пропустил изображение. Полезно, когда изображение имеет чисто декоративную функцию. Тем не менее, лучше выделить такие изображения. Сделать это можно с помощью селектора:
|
1 |
img[alt=""] { ... } |
Неуказанный язык документа
|
1 2 |
html:not([lang]), html[lang=""] { ... } |
На всех html элементах должен быть атрибут lang, он очень важен. С помощью этого атрибута скрин ридер определяет язык страницы, что влияет на голос диктора.
Неправильная кодировка
|
1 |
meta[charset]:not([charset="UTF-8"]) { ... } |
Этот селектор находит все мета теги с кодировкой, отличной от UTF-8. Этот тег указывает браузеру, что необходимо использовать кодировку UTF-8. В настоящее время рекомендуется указывать именно эту кодировку для HTML-документов. Следовательно, этот тег необходим для прохождения проверки HTML.
В идеале этот тег должен идти сразу после открывающего тега head. Проверить это можно с помощью следующего селектора:
|
1 |
meta[charset="UTF-8"]:not(:first-child) { ... } |
Недоступные атрибуты вьюпорта
|
1 2 3 |
meta[name="viewport"][content*="user-scalable=no"], meta[name="viewport"][content*="maximum-scale"], meta[name="viewport"][content*="minimum-scale"] { ... } |
С помощью этого селектора можно подсвечивать недоступные мета атрибуты вьюпорта. Как правило, не рекомендуется препятствовать пользователю манипулировать размерами вьюпорта. Поэтому user-scalable=no, maximum-scale и minimum-scale использовать нельзя.
Элементы формы без маркеров
|
1 2 3 4 5 |
input:not([id]), select:not([id]), textarea:not([id]) { ... } label:not([for]) { ... } |
В вопросе маркеров элементы формы, возможно, важнее других тегов. Существует несколько способов добавления маркеров элементам формы, однако самый распространенный – через ID на элементе, который связан с тегом label. Селектор выше находит все элементы формы без атрибута ID, а также теги label, которые явно не связаны с элементами формы через атрибут for.
Другой тип маркировки элементов формы – с помощью атрибута name. Атрибут id маркирует элементы в контексте HTML-документа, а атрибут name используется для отсылки к элементу при отправке данных из формы.
|
1 2 3 |
input:not([name]), select:not([name]), textarea:not([name]) { ... } |
Помимо элементов формы полезно задать name и/или id самому тегу form.
|
1 |
form:not([name]):not([id]) { ... } |
Этот селектор подсветит все элементы form, у которых отсутствуют оба атрибута, name и id.
Пустые интерактивные элементы
|
1 2 |
button:empty, a:empty { ... } |
Интерактивные элементы типа ссылок и кнопок обычно обозначаются контентом. Эти элементы можно маркировать и другими способами, например, через атрибут aria-label, но если они пустые, значит, что-то пошло не так. Этот селектор найдет все ссылки и кнопки без HTML-контента внутри.
Необязательные и устаревшие атрибуты
|
1 2 |
script[type="text/javascript"], link[rel="stylesheet"][type="text/css"] { ... } |
И наконец, с помощью CSS-селекторов можно подсветить устаревшие и необязательные атрибуты в HTML.
Источник: //bitsofco.de/
Редакция: Команда webformyself.
