Документ

Помимо структуры, при создании и проектировании цифровых доступных интерфейсов необходимо учитывать множество вспомогательных элементов HTML. В ходе курса «Изучение доступности» мы рассматриваем множество таких элементов.

Этот модуль посвящен очень специфическим элементам, которые не совсем вписываются ни в один из других модулей, но понимание которых полезно.

Заголовок страницы

HTML-элемент <title> определяет содержимое страницы или экрана, который пользователь собирается увидеть. Он находится в разделе <head> HTML-документа и эквивалентен <h1> или основной теме страницы. Содержимое заголовка отображается во вкладке браузера и помогает пользователям понять, какую страницу они посещают, но оно не отображается на самом веб-сайте или в приложении.

В одностраничных приложениях (SPA) обработка <title> происходит несколько иначе, поскольку пользователи не переходят между страницами, как на многостраничных сайтах. Для SPA значение свойства document.title можно добавить вручную или с помощью вспомогательного пакета, в зависимости от используемой JavaScript-платформы. Для оповещения пользователя программы чтения с экрана об обновленных заголовках страниц может потребоваться дополнительная работа.

Описательные заголовки страниц полезны как для пользователей, так и для поисковой оптимизации (SEO) , но не стоит переусердствовать и добавлять много ключевых слов. Поскольку заголовок — это первое, что замечает пользователь вспомогательного технология, посещающий страницу, он должен быть точным, уникальным и описательным, но при этом лаконичным.

При написании заголовков страниц также рекомендуется сначала «наполнить» внутреннюю страницу или важный контент, а затем добавлять информацию с предыдущих страниц. Таким образом, пользователям вспомогательных технологий не придется прочитывать уже услышанную информацию.

Не 
<title>The Food Channel | Outrageous Pumpkins | Season 3 </title>
Делать 
<title>Season 3 | Outrageous Pumpkins | The Food Channel</title>

Язык

Язык страницы

Атрибут языка страницы ( lang ) устанавливает язык по умолчанию для всей страницы. Этот атрибут добавляется к тегу <html> . Действительный атрибут языка следует добавлять к каждой странице, поскольку он указывает вспомогательному языку, какой язык следует использовать.

Рекомендуется использовать двухсимвольные коды языков ISO для более широкого охвата вспомогательных технологий, поскольку многие из них не поддерживают расширенные коды языков .

Если какой-либо языковой параметр полностью отсутствует, вспомогательная технология (ВТ) будет использовать язык, заданный пользователем. Например, если ВТ настроена на испанский язык, но пользователь посещает англоязычный веб-сайт или приложение, ВТ попытается прочитать английский текст с испанскими акцентами и интонацией. Такое сочетание приводит к непригодности цифрового продукта и разочарованию пользователя.

Не 
<html>...</html>
Делать 
<html lang="en">...</html>

Атрибут `lang` может быть связан только с одним языком. Это означает, что атрибут <html> ` может иметь только один язык, даже если на странице присутствует несколько языков. Установите lang на основной язык страницы.

Не 
<html lang="ar,en,fr,pt">...</html>
 Поддержка нескольких языков отсутствует.
Делать 
<html lang="ar">...</html>
 Укажите только основной язык страницы. В данном случае это арабский язык.

Язык раздела

Атрибут language ( lang ) также можно использовать для переключения языка непосредственно в контенте. Применяются те же основные правила, что и для атрибута language всей страницы, за исключением того, что его нужно добавлять к соответствующему элементу на странице, а не к тегу <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> с отдельным содержимым должен содержать элемент title внутри родительского тега. Этот заголовок предоставляет пользователям вспомогательных технологий дополнительную информацию о содержимом внутри <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>
Назад
Структура контента
Далее
Фокус клавиатуры