Перейти к содержанию

Структура контента

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

Структурные элементы служат планом контента на экране, но они также действуют как точки привязки для более легкой навигации по контенту.

Когда вы используете семантические HTML элементы, присущее значение каждого элемента передается в дерево доступности и используется AT, придавая контенту больше смысла, чем несемантические элементы. Могут быть случаи, когда вам нужно добавить дополнительные ARIA атрибуты для построения отношений или улучшения общего пользовательского опыта, но в большинстве ситуаций один из 100+ HTML элементов должен работать достаточно хорошо сам по себе.

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

Наш курс изучения HTML подробно рассматривает основы HTML и семантическую структуру. Таким образом, этот модуль основывается на материалах того курса и специально фокусируется на цифровой доступности. Аналогично, обязательно изучите модуль ARIA и HTML в этом курсе перед погружением в данный модуль.

Ориентиры

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

Ориентиры обеспечивают, чтобы контент находился в навигационных областях. Рекомендуется предоставить по крайней мере один ориентир на страницу.

Некоторые ресурсы предлагают комбинировать ARIA и HTML ориентиры вместе для обеспечения лучшего покрытия AT. Хотя такой тип избыточности не должен вызывать проблемы для ваших пользователей, протестируйте паттерны, используя программу чтения с экрана, чтобы быть уверенным. В случае сомнений лучше всего по умолчанию использовать только более новые HTML элементы ориентиров, так как поддержка браузерами очень надежна.

Давайте сравним HTML элементы ориентиров, как они соответствуют своим аналогам ARIA ролям ориентиров.

HTML элемент ориентира ARIA роль ориентира
<header> banner
<aside> complementary
<footer> contentinfo
<nav> navigation
<main> main
<form> 1 form
<section> 1 region

1 Требует включения атрибута name для доступности. section должен быть доступно назван для того, чтобы его неявная ARIA роль region была видна вспомогательным технологиям.

Теперь давайте сравним примеры доступной структуры контента.

Плохо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div>
    <div>...</div>
</div>
<div>
    <p>Филателия, также известная как коллекционирование марок, это
    изучение почтовых марок, конвертов с марками,
    почтовых штемпелей, открыток и других материалов, относящихся
    к почтовой доставке.</p>
</div>
<div>
<p>© 2022 - Марки Превосходны</p>
</div>

Хорошо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<header>
    <nav>...</nav>
</header>
<main>
    <section aria-label="Введение в филателию">
        <p>
            Филателия, также известная как коллекционирование марок, это
            изучение почтовых марок, конвертов с марками,
            почтовых штемпелей, открыток и других материалов,
            относящихся к почтовой доставке.
        </p>
    </section>
</main>
<footer>
    <p>© 2022 - Марки Превосходны</p>
</footer>

Ознакомьтесь с Примером ARIA Ориентиров для получения дополнительной информации и лучших практик.

Заголовки

При правильной реализации HTML уровни заголовков формируют краткий план общего содержания страницы.

Есть шесть уровней заголовков, которые мы можем использовать. Уровень заголовка один <h1> используется для самой высокой и важной информации страницы, постепенно переходя к уровню заголовка шесть <h6> для самой низкой и наименее важной информации.

Последовательность уровней заголовков важна. В идеале вы не будете пропускать уровни заголовков, например, начиная раздел с <h1> и сразу следуя за ним с <h5>. Вместо этого вы должны прогрессировать к <h5> по порядку. Порядок уровней заголовков особенно важен для пользователей AT, так как это один из их основных способов навигации по контенту.

Хотя вы можете использовать ARIA роли заголовков для уровней заголовков, рекомендуется использовать семантические HTML уровни заголовков всякий раз, когда это возможно.

Чтобы помочь вам придерживаться правильной семантической структуры и порядка для заголовков, рассмотрите возможность отделения ваших CSS стилей от уровней заголовков. Это позволяет вам больше гибкости в стилях заголовков, сохраняя при этом порядок уровней заголовков. Критически важно не использовать только стили для создания заголовков, так как они не воспринимаются AT как заголовки.

Когда мы подделываем заголовки, соответствующая структура не передается пользователям AT.

Заголовки также полезны для людей с когнитивными расстройствами и расстройствами внимания. Важно сделать содержание заголовков значимыми, чтобы помочь им понять, что наиболее важно на странице.

Плохо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div>
    <h3>Марки</h3>
    <p>Филателия, также известная как коллекционирование марок, это изучение почтовых марок, конвертов с марками, почтовых штемпелей, открыток и других материалов, относящихся к почтовой доставке.</p>
</div>
<div>
    <h3>Как начать коллекцию марок?</h3>
  <h2>Оборудование, которое вам понадобится</h2>
    <h4>...</h4>
  <h2>Как приобрести марки</h2>
    <h4>...</h4>
  <h2>Организации, в которые можно вступить</h2>
    <h4>...</h4>
</div>

Хорошо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<header>
    <h1>Коллекционирование марок</h1>
</header>
<main>
    <section aria-label="Введение в филателию">
        <h2>Что такое филателия?</h2>
        <p>
            Филателия, также известная как коллекционирование марок, это
            изучение почтовых марок, конвертов с марками,
            почтовых штемпелей, открыток и других материалов,
            относящихся к почтовой доставке.
        </p>
    </section>

    <section aria-label="Начать коллекцию марок">
        <h2>Как начать коллекцию марок?</h2>
        <h3>Необходимое оборудование</h3>
        <p>...</p>

        <h3>Как приобрести марки</h3>
        <p>...</p>

        <h3>Организации, в которые можно вступить</h3>
        <p>...</p>
    </section>
</main>

Списки

HTML списки - это способ семантически группировать элементы, похожие друг на друга, придавая им присущий смысл, как ваш список покупок или тот бесконечный список дел, который вы продолжаете игнорировать.

Есть три типа HTML списков:

  • упорядоченные <ol>
  • неупорядоченные <ul>
  • описательные <dl>

Элемент элемента списка <li> используется для представления элемента в упорядоченном или неупорядоченном списке, в то время как элементы описательного термина <dt> и определения <dd> можно найти в описательном списке.

При правильном программировании эти элементы могут информировать незрячих пользователей AT о видимой структуре списка. Когда AT встречает семантический список, он может сказать пользователю название списка и сколько в нем элементов. Когда пользователь навигает по списку, AT будет читать каждый элемент списка вслух и говорить, под каким номером он находится в списке - элемент один из пяти, элемент два из пяти и так далее.

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

Плохо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div>
  <p>Как начать коллекцию марок?</p>
  <p>Оборудование, которое вам понадобится</p>
    <div>
      <p>Маленькие щипцы с закругленными кончиками</p>
      <p>Маркировочные петли</p>
      <p>Альбом для марок</p>
      <p>Увеличительное стекло</p>
      <p>Марки</p>
    </div>
</div>

Хорошо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div>
    <h1>Как начать коллекцию марок?</h1>
    <h2>Оборудование, которое вам понадобится</h2>
    <ol>
        <li>Маленькие щипцы с закругленными кончиками</li>
        <li>Маркировочные петли</li>
        <li>Альбом для марок</li>
        <li>Увеличительное стекло</li>
        <li>Марки</li>
    </ol>
</div>

Таблицы

В HTML таблицы обычно используются для организации данных или макета страницы.

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

Макет

В ранние дни интернета таблицы макета были основным HTML элементом, используемым для построения визуальных структур. Сегодня мы используем смесь семантических и несемантических элементов, таких как <div> и ориентиры для создания макетов.

Хотя дни создания таблиц макета в основном прошли, есть времена, когда таблицы макета все еще используются, например, в визуально богатых электронных письмах, новостных рассылках и рекламе. В этих случаях таблицы, используемые только для макета, не должны использовать структурные элементы, которые передают отношения и добавляют контекст, такие как <th> или <caption>.

Таблицы макета также должны быть скрыты от пользователей AT с помощью ARIA роли presentation или состояния aria-hidden.

Плохо
1
2
3
4
5
6
7
8
<table>
  <caption>Моя коллекция марок</caption>
  <tr>
    <th>[Изображение марки 1]</th>
    <th>[Изображение марки 2]</th>
    <th>[Изображение марки 3]</th>
  </tr>
</table>

Хорошо
1
2
3
4
5
6
7
<table role="presentation">
    <tr>
        <td>[Изображение марки 1]</td>
        <td>[Изображение марки 2]</td>
        <td>[Изображение марки 3]</td>
    </tr>
</table>

Данные

В отличие от таблицы макета, которая должна быть скрыта от пользователей AT, таблица данных и все ее элементы должны быть открыты. Структура таблиц данных критически важна для передачи простой и сложной информации пользователям.

Когда таблица структурирована правильно, формируются отношения между заголовками столбцов и строками и данными в таблице. Когда структурирована неправильно, пользователь остается разгадывать смысл и контекст информации в таблице.

В зависимости от сложности таблицы, формирование отношений через код достигается различными способами. Первым шагом к созданию доступной таблицы является разметка ячеек заголовков с помощью <th> и ячеек данных с помощью <td> элементов.

Для более сложных таблиц вам может понадобиться использовать дополнительные HTML элементы таблицы, такие как <rowgroup>, <colgroup>, <caption> и scope для передачи смысла и отношений.

Плохо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
  <tr>
    <td>Животное</td>
    <td>Год</td>
    <td>Состояние</td>
  </tr>
  <tr>
    <td>Птица</td>
    <td>1947</td>
    <td>Хорошее</td>
  </tr>
  <tr>
    <td>Лев</td>
    <td>1982</td>
    <td>Отличное</td>
  </tr>
  <tr>
    <td>Лошадь</td>
    <td>1978</td>
    <td>Монетное</td>
  </tr>
</table>

Хорошо
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
    <caption>
        Моя коллекция марок
    </caption>
    <tr>
        <th>Животное</th>
        <th>Год</th>
        <th>Состояние</th>
    </tr>
    <tr>
        <td>Птица</td>
        <td>1947</td>
        <td>Хорошее</td>
    </tr>
    <tr>
        <td>Лев</td>
        <td>1982</td>
        <td>Отличное</td>
    </tr>
    <tr>
        <td>Лошадь</td>
        <td>1978</td>
        <td>Монетное</td>
    </tr>
</table>

Источник — ARIA and HTML

Комментарии