Помимо структуры, существует множество вспомогательных элементов 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.