Помимо структуры, существует множество вспомогательных элементов HTML, которые следует учитывать при создании и проектировании для обеспечения цифровой доступности. На протяжении всего курса «Изучение доступности» мы рассматриваем множество элементов.
В этом модуле основное внимание уделяется очень конкретным элементам, которые не совсем вписываются ни в один из других модулей, но полезны для понимания.
Название страницы
HTML-элемент <title> определяет содержимое страницы или экрана, с которым пользователь собирается ознакомиться. Он находится в разделе <head> HTML-документа и эквивалентен <h1> или основной теме страницы. Содержимое заголовка отображается на вкладке браузера и помогает пользователям понять, какую страницу они посещают, но не отображается на самом веб-сайте или в приложении.
В одностраничном приложении (SPA) <title> обрабатывается немного по-другому, поскольку пользователи не перемещаются между страницами, как на многостраничных веб-сайтах. Для SPA значение свойства document.title можно добавить вручную или с помощью вспомогательного пакета, в зависимости от платформы JavaScript. Объявление об обновленных заголовках страниц пользователю программы чтения с экрана может потребовать некоторой дополнительной работы.
Описательные заголовки страниц хороши как для пользователей, так и для поисковой оптимизации (SEO) , но не переусердствуйте и не добавляйте много ключевых слов. Поскольку заголовок — это первое, что объявляется, когда пользователь AT посещает страницу, он должен быть точным, уникальным и описательным, но при этом кратким.
При написании заголовков страниц также рекомендуется сначала «загружать» внутреннюю страницу или важный контент, а затем добавлять все предыдущие страницы или информацию. Таким образом, пользователям AT не придется выслушивать информацию, которую они уже услышали.
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>
Язык
Язык страницы
Атрибут языка страницы ( lang ) устанавливает язык по умолчанию для всей страницы. Этот атрибут добавляется в тег <html> . Действительный атрибут языка должен быть добавлен на каждую страницу, поскольку он сигнализирует AT, какой язык ему следует использовать.
Для большего покрытия AT рекомендуется использовать двухсимвольные коды языков ISO , поскольку многие из них не поддерживают расширенные коды языков .
Когда атрибут языка полностью отсутствует, АТ по умолчанию будет использовать запрограммированный пользователем язык. Например, если для AT был установлен испанский язык, но пользователь посетил веб-сайт или приложение на английском языке, AT попытается прочитать английский текст с испанскими акцентами и ритмом. Результатом такой комбинации является непригодный для использования цифровой продукт и разочарование пользователя.
<html>...</html>
<html lang="en">...</html>
С атрибутом lang может быть связан только один язык. Это означает, что атрибут <html> может иметь только один язык, даже если на странице присутствует несколько языков. Установите lang в качестве основного языка страницы.
<html lang="ar,en,fr,pt">...</html>Несколько языков не поддерживаются.
<html lang="ar">...</html>Установите только основной язык страницы. В данном случае язык арабский.
Язык раздела
Вы также можете использовать атрибут языка ( lang ) для переключения языка в самом контенте. Применяются те же основные правила, что и к полностраничному атрибуту языка, за исключением того, что вы добавляете его к соответствующему элементу на странице, а не к тегу <html> .
Помните, что язык, который вы добавляете в элемент <html> , распространяется на все содержащиеся в нем элементы, поэтому всегда сначала устанавливайте основной язык атрибута lang верхнего уровня страницы.
Для любых элементов на странице, написанных на другом языке, добавьте этот атрибут lang к соответствующему элементу-оболочке. Это будет переопределять настройку языка верхнего уровня до тех пор, пока этот элемент не будет закрыт.
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
"Kas sa räägid inglise keelt?" when I met someone new.</p>
</div>
</body>
</html>
<html lang="en">
<body>...
<div>
<p>While traveling in Estonia this summer, I often asked,
<span lang="et">"Kas sa räägid inglise keelt?"</span>
when I met someone new.</p>
</div>
</body>
</html>
iFrames
Элемент iFrame ( <iframe> ) используется для размещения другой HTML-страницы или стороннего контента на странице. По сути, это помещает другую веб-страницу в родительскую страницу. iFrame обычно используются для рекламы, встроенных видео, веб-аналитики и интерактивного контента.
Чтобы сделать ваш <iframe> доступным, необходимо учитывать несколько аспектов. Во-первых, каждый <iframe> с отдельным содержимым должен включать элемент заголовка внутри родительского тега. Этот заголовок предоставляет пользователям AT дополнительную информацию о содержимом внутри <iframe> .
Во-вторых, рекомендуется установить для прокрутки значение «авто» или «да» в настройках тега <iframe> . Это позволяет людям с плохим зрением прокручивать контент внутри <iframe> , который иначе они не смогли бы увидеть. В идеале контейнер <iframe> также должен иметь гибкую высоту и ширину.
<iframe src="https://www.youtube.com/embed/3obixhGZ5ds"></iframe>
<iframe title="Google Pixel - Lizzo in Real Tone" src="https://www.youtube.com/embed/3obixhGZ5ds" scrolling="auto"> </iframe>
Проверьте свое понимание
Проверьте свои знания о доступности документов.
Ваш сайт представляет собой многоязычный онлайн-учебник, в котором на одной странице показано несколько языков. Как лучше всего передать вспомогательным технологиям язык текста?
<html> . Например <html lang="en,lt,pl,pt">lang может быть связан только один язык.lang для <html> и дополнительные языки для любого элемента, содержимое которого на другом языке.<html> для чтения документа. Если у вас многоязычный текст, обязательно добавьте атрибут lang к соответствующему элементу (например, разделу или абзацу) с правильным двухбуквенным кодом ISO.