Документ

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

Проверьте свое понимание

Проверьте свои знания о доступности документов.

Ваш сайт представляет собой многоязычный онлайн-учебник, в котором на одной странице показано несколько языков. Как лучше всего передать вспомогательным технологиям язык текста?

Не беспокойтесь об этом, AT может автоматически читать каждый язык.
Хотя некоторые АТ могут обладать навыками распознавания языка, вы не можете гарантировать, что АТ угадает правильно.
Включите все языки в элемент <html> . Например <html lang="en,lt,pl,pt">
С атрибутом lang может быть связан только один язык.
Установите основной lang для <html> и дополнительные языки для любого элемента, содержимое которого на другом языке.
AT будет в первую очередь полагаться на языковой атрибут <html> для чтения документа. Если у вас многоязычный текст, обязательно добавьте атрибут lang к соответствующему элементу (например, разделу или абзацу) с правильным двухбуквенным кодом ISO.