Язык документа и его частей
В посте, посвящённому всемирному дню осведомлённости о доступности, упоминалось, что на 13.5% сайтов не задан язык документа. Радует, что это не много по сравнению с другими проблемами. Не радует, что это всё ещё 13.5%.
Исправление крайне простое: нужно задать у корневого элемента страницы атрибут lang со значением, которое соответствует основному языку контента на странице в формате BCP 47.
На этом можно было бы и закончить пост. Просто добавьте атрибут и это исправит одну из топ 6 ошибок доступности, которую обнаруживает WAVE. Но я расскажу ещё некоторые особенности и фишки вокруг языка страницы.
От языка страницы зависит отображение некоторых элементов, в частности . Он предназначен для встроенных цитат и обрамляет текст в кавычки. Вид кавычек меняется в зависимости от языка (ёлочки или лапки).
Если сайт мультиязычный и хочется что-то менять в CSS в зависимости от языка, есть селектор :lang(). Он более мощный, чем селектор по атрибуту html[lang="..."] из-за масок и работы с вычисленным языком, а не значением в атрибуте.
ol:lang(en-US) > li::marker {
/*
Маркеры списка 1) 2) 3) для американскго английского
*/
content: counter(list-item) ') ';
}
ol:lang(ru, by, uk) > li::marker {
/*
Маркеры списка 1. 2. 3. для восточнославянских языков
*/
content: counter(list-item) '. ';
}
На странице могут быть элементы, контент которых не соответствует основному языку страницы: цитаты, термины, названия или переключатель языка. Такие элементы также нужно пометить соответствующим атрибутом lang.
Вообще lang — глобальный атрибут и его можно указывать у любых элементов. Язык наследуется вглубь по дереву от ближайшего родителя с lang. Сам атрибут переопределяет унаследованный язык.
...
...
Язык
aria-current="true"
>
Русский
lang="en"
hreflang="en"
>
English
lang="es"
hreflang="es"
>
Español
...
Атрибут hreflang помогает роботам понять, что страница по ссылке на другом языке. Это важно при SEO-продвижении мультиязычного сайта. К этому ещё стоит добавить ссылки на альтернативные версии текущей страницы на других языках.
...
...
Среди контента могут быть общепринятые термины, названия брендов или фразы, которые написаны на другом языке, но не должны переводиться автоматическими переводчиками. На этот случай существует атрибут translate со значением no.
Vite позволяет быстро собирать frontend-проекты различной сложности.
#html #css #a11y
В посте, посвящённому всемирному дню осведомлённости о доступности, упоминалось, что на 13.5% сайтов не задан язык документа. Радует, что это не много по сравнению с другими проблемами. Не радует, что это всё ещё 13.5%.
Исправление крайне простое: нужно задать у корневого элемента страницы атрибут lang со значением, которое соответствует основному языку контента на странице в формате BCP 47.
На этом можно было бы и закончить пост. Просто добавьте атрибут и это исправит одну из топ 6 ошибок доступности, которую обнаруживает WAVE. Но я расскажу ещё некоторые особенности и фишки вокруг языка страницы.
От языка страницы зависит отображение некоторых элементов, в частности . Он предназначен для встроенных цитат и обрамляет текст в кавычки. Вид кавычек меняется в зависимости от языка (ёлочки или лапки).
Если сайт мультиязычный и хочется что-то менять в CSS в зависимости от языка, есть селектор :lang(). Он более мощный, чем селектор по атрибуту html[lang="..."] из-за масок и работы с вычисленным языком, а не значением в атрибуте.
ol:lang(en-US) > li::marker {
/*
Маркеры списка 1) 2) 3) для американскго английского
*/
content: counter(list-item) ') ';
}
ol:lang(ru, by, uk) > li::marker {
/*
Маркеры списка 1. 2. 3. для восточнославянских языков
*/
content: counter(list-item) '. ';
}
На странице могут быть элементы, контент которых не соответствует основному языку страницы: цитаты, термины, названия или переключатель языка. Такие элементы также нужно пометить соответствующим атрибутом lang.
Вообще lang — глобальный атрибут и его можно указывать у любых элементов. Язык наследуется вглубь по дереву от ближайшего родителя с lang. Сам атрибут переопределяет унаследованный язык.
...
...
Язык
aria-current="true"
>
Русский
lang="en"
hreflang="en"
>
English
lang="es"
hreflang="es"
>
Español
...
Атрибут hreflang помогает роботам понять, что страница по ссылке на другом языке. Это важно при SEO-продвижении мультиязычного сайта. К этому ещё стоит добавить ссылки на альтернативные версии текущей страницы на других языках.
...
...
Среди контента могут быть общепринятые термины, названия брендов или фразы, которые написаны на другом языке, но не должны переводиться автоматическими переводчиками. На этот случай существует атрибут translate со значением no.
Vite позволяет быстро собирать frontend-проекты различной сложности.
#html #css #a11y