Документ¶

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

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

Наш курс "Изучение HTML" подробно рассматривает основы HTML и семантической структуры. Таким образом, этот модуль основывается на материалах того курса и специально ориентирован на цифровую доступность. Аналогично, обязательно изучите модуль "ARIA и 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>

Важно

Поисковые системы обычно отображают только первые 55–60 символов заголовка страницы, поэтому обязательно ограничьте общее количество символов заголовка страницы.

Язык¶

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

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

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

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

Чтобы сделать ваш <iframe> доступным, есть несколько аспектов для рассмотрения. Во-первых, каждый <iframe> с отличным контентом должен включать элемент title внутри родительского тега. Этот заголовок предоставляет пользователям с AT больше информации о содержимом внутри <iframe>.

Во-вторых, как лучшая практика, хорошо установить прокрутку на "auto" или "yes" в настройках тега <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>

Источник — https://web.dev/learn/accessibility/more-html