Документ

Помимо структуры, существует множество вспомогательных элементов 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 для <html> и дополнительные языки для любого элемента, содержимое которого на другом языке.
Не беспокойтесь об этом, AT может автоматически читать каждый язык.