Одним из наиболее важных аспектов цифровой доступности является базовая структура страницы. Когда вы создаете свой веб-сайт или приложение, используя структурные элементы , а не полагаясь только на стили, вы даете критический контекст людям, использующим вспомогательные технологии (AT), такие как программы чтения с экрана.
Структурные элементы служат контуром контента на экране, но они также действуют как опорные точки, упрощающие навигацию по контенту.
Когда вы используете семантические элементы HTML , внутреннее значение каждого элемента передается в дерево доступности и используется AT, придавая содержимому больше смысла, чем несемантическим элементам. Могут быть случаи, когда вам потребуется добавить дополнительные атрибуты ARIA для построения связей или улучшения общего взаимодействия с пользователем, но в большинстве ситуаций один из более чем 100 доступных HTML-элементов должен работать достаточно хорошо сам по себе.
Хотя этот модуль посвящен наиболее широко используемым структурным элементам, имеющим решающее значение для цифровой доступности, безусловно, существуют дополнительные элементы и факторы окружающей среды, которые следует учитывать при построении структуры вашего веб-сайта или приложения. Эти примеры представляют собой введение в тему, а не всеобъемлющее описание.
Достопримечательности
Пользователи AT полагаются на структурные элементы, которые предоставляют им информацию об общем макете страницы. При выделении больших областей контента вы можете использовать роли ориентиров ARIA или новые элементы ориентиров HTML, чтобы добавить структурный контекст на вашу страницу.
Ориентиры гарантируют, что контент находится в доступных для навигации регионах. Рекомендуется указывать хотя бы один ориентир на странице.
Некоторые ресурсы предлагают объединить ориентиры ARIA и HTML, чтобы обеспечить лучшее покрытие AT. Хотя этот тип избыточности не должен вызывать проблем у ваших пользователей, для уверенности проверьте шаблоны с помощью программы чтения с экрана. В случае сомнений лучше использовать по умолчанию только новые элементы ориентиров HTML, поскольку поддержка браузера очень надежна.
Давайте сравним элементы ориентиров HTML, сопоставленные с их аналогами ролями ориентиров ARIA.
| HTML-элемент ориентира | Знаковая роль ARIA |
|---|---|
<header> | баннер |
<aside> | дополнительный |
<footer> | информация о контенте |
<nav> | навигация |
<main> | основной |
<form> 1 | форма |
<section> 1 | область |
Теперь давайте сравним примеры структуры доступного контента.
<div>
<div>...</div>
</div>
<div>
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</div>
<div>
<p>© 2022 - Stamps R Awesome</p>
</div>
<header>
<nav>...</nav>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<p>Stamp collecting, also known as philately, is
the study of postage stamps, stamped envelopes,
postmarks, postcards, and other materials relating
to postal delivery.</p>
</section>
</main>
<footer>
<p>© 2022 - Stamps R Awesome</p>
</footer>
Заголовки
При правильной реализации уровни заголовков HTML образуют краткую схему общего содержимого страницы.
Мы можем использовать шесть уровней заголовков. Первый уровень заголовка <h1> используется для самой высокой и самой важной информации на странице, постепенно перемещаясь к заголовку шестого уровня <h6> для самой низкой и наименее важной информации.
Последовательность уровней заголовков важна. В идеале вы не будете пропускать уровни заголовков, например, начиная раздел с <h1> и сразу после него <h5> . Вместо этого вам следует перейти к <h5> по порядку. Порядок на уровне заголовков особенно важен для пользователей AT, поскольку это один из основных способов навигации по контенту.
Чтобы помочь вам придерживаться правильной семантической структуры и порядка заголовков, рассмотрите возможность отделения стилей CSS от уровней заголовков. Это обеспечивает большую гибкость в выборе стилей заголовков, сохраняя при этом порядок уровней заголовков. Крайне важно не использовать одни только стили для создания заголовков, поскольку AT не воспринимает их как заголовок.
Когда мы подделываем заголовки, соответствующая структура не передается пользователям AT.
Заголовки также полезны для людей с когнитивными расстройствами и расстройствами внимания. Важно сделать содержание заголовка осмысленным, чтобы помочь им понять, что самое важное на странице.
<div>
<h3>Stamps</h3>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</div>
<div>
<h3>How do I start a stamp collection?</h3>
<h2>Equipment you will need</h2>
<h4>...</h4>
<h2>How to acquire stamps</h2>
<h4>...</h4>
<h2>Organizations you can join</h2>
<h4>...</h4>
</div>
<header>
<h1>Stamp collecting</h1>
</header>
<main>
<section aria-label="Introduction to stamp collecting">
<h2>What is stamp collecting?</h2>
<p>Stamp collecting, also known as philately, is the study of
postage stamps, stamped envelopes, postmarks, postcards, and
other materials relating to postal delivery.</p>
</section>
<section aria-label="Start a stamp collection">
<h2>How do I start a stamp collection?</h2>
<h3>Required equiment</h3>
<p>...</p>
<h3>How to acquire stamps</h3>
<p>...</p>
<h3>Organizations you can join</h3>
<p>...</p>
</section>
</main>
Списки
HTML-списки — это способ семантически группировать элементы, похожие друг на друга, придавая им неотъемлемое значение, подобно списку продуктового магазина или бесконечному списку дел, который вы постоянно игнорируете.
Существует три типа HTML-списков:
Элемент элемента списка <li> используется для представления элемента в упорядоченном или неупорядоченном списке, а элементы описания <dt> и определения <dd> можно найти в списке описаний.
При правильном программировании эти элементы могут информировать незрячих пользователей АТ о видимой структуре списка. Когда AT встречает семантический список, он может сообщить пользователю имя списка и количество элементов в нем. Когда пользователь перемещается по списку, АТ будет читать вслух каждый элемент списка и сообщать, под каким номером он находится в списке: первый элемент из пяти, второй элемент из пяти и так далее.
Группирование элементов в списки также помогает зрячим людям с когнитивными расстройствами и расстройствами внимания, а также людям с ограниченными возможностями чтения, поскольку содержимое списков обычно оформляется так, чтобы в нем было больше визуальных пробелов, и содержание было точным.
<div>
<p>How do I start a stamp collection?</p>
<p>Equipment you will need</p>
<div>
<p>Small tongs with rounded tips</p>
<p>Stamp hinges</p>
<p>Stockbook or albumn</p>
<p>Magnifying glass</p>
<p>Stamps</p>
</div>
</div>
<div>
<h1>How do I start a stamp collection?</h1>
<h2>Equipment you will need</h2>
<ol>
<li>Small tongs with rounded tips</li>
<li>Stamp hinges</li>
<li>Stockbook or albumn</li>
<li>Magnifying glass</li>
<li>Stamps</li>
</ol>
</div>
Таблицы
В HTML таблицы обычно используются для организации данных или макета страницы.
В зависимости от назначения таблицы вы будете использовать разные семантические структурные элементы. Таблицы могут быть очень сложными по структуре, но если придерживаться основных семантических правил, они вполне доступны без особого вмешательства.
Макет
На заре Интернета макетные таблицы были основным элементом HTML, используемым для создания визуальных структур. Сегодня мы используем сочетание семантических и несемантических элементов, таких как <div> и ориентиры, для создания макетов.
Хотя времена создания макетных таблиц в основном прошли, бывают случаи, когда макетные таблицы все еще используются, например, в визуально богатых электронных письмах, информационных бюллетенях и рекламных объявлениях. В этих случаях таблицы, используемые только для макета, не должны использовать структурные элементы, которые передают отношения и добавляют контекст, такие как <th> или <caption> .
Таблицы макетов также должны быть скрыты от пользователей AT с ролью представления ARIA или состоянием aria-hidden .
<table>
<caption>My stamp collection</caption>
<tr>
<th>[Stamp Image 1]</th>
<th>[Stamp Image 2]</th>
<th>[Stamp Image 3]</th>
</tr>
</table>
<table role="presentation">
<tr>
<td>[Stamp Image 1]</td>
<td>[Stamp Image 2]</td>
<td>[Stamp Image 3]</td>
</tr>
</table>
Данные
В отличие от таблицы макета, которая должна быть скрыта от пользователей AT, таблица данных и все ее элементы должны быть открыты. Структура таблиц данных имеет решающее значение для передачи пользователям простой и сложной информации.
Если таблица структурирована правильно, между заголовками столбцов и строками и данными внутри таблицы формируются связи. При неправильной структуре пользователю приходится расшифровывать значение и контекст информации в таблице.
В зависимости от сложности таблицы формирование связей посредством кода осуществляется разными способами. Первым шагом к обеспечению доступности таблицы является разметка ячеек заголовка с помощью <th> и ячеек данных с помощью элементов <td> .
Для более сложных таблиц вам может потребоваться использовать дополнительные элементы таблицы HTML, такие как <rowgroup> , <colgroup> , <caption> и scope , чтобы передать смысл и связи.
<table>
<tr>
<td>Animal</td>
<td>Year</td>
<td>Condition</td>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>
<table>
<caption>My stamp collection</caption>
<tr>
<th>Animal</th>
<th>Year</th>
<th>Condition</th>
</tr>
<tr>
<td>Bird</td>
<td>1947</td>
<td>Fair</td>
</tr>
<tr>
<td>Lion</td>
<td>1982</td>
<td>Good</td>
</tr>
<tr>
<td>Horse</td>
<td>1978</td>
<td>Mint</td>
</tr>
</table>