Доступные таблицы в техническом уроке
Таблица помогает сравнить методы, параметры или результаты. Её смысл строится на пересечении строки и столбца: отдельное значение отвечает на вопрос, заданный заголовками. Визуально связь видна по расположению. При другом способе чтения её должна передать разметка. Если все ячейки записаны как обычные td, соседство сохраняется на экране, но назначение заголовка не описано явно.
Добавим в a11y-lab/lesson.html таблицу сравнения Element, Elements и Descendants. Она относится к пояснению различий методов и не заменяет исходный программный пример. Затем изменим её представление для узкого экрана. Наша цель — сохранить отношения между данными, а не добиться одинакового количества видимых столбцов в любом окне.
Название и простые заголовки
Вставьте следующий HTML после объяснения метода в разделе descendants. Это полный фрагмент таблицы, который не требует JavaScript:
<table class="method-table">
<caption>Выбор элементов в LINQ to XML</caption>
<thead>
<tr>
<th scope="col">Метод</th>
<th scope="col">Область выбора</th>
<th scope="col">Результат</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Element</th>
<td>Непосредственные дочерние элементы с заданным именем</td>
<td>Первый подходящий элемент или отсутствие результата</td>
</tr>
<tr>
<th scope="row">Elements</th>
<td>Непосредственные дочерние элементы с заданным именем</td>
<td>Последовательность подходящих элементов</td>
</tr>
<tr>
<th scope="row">Descendants</th>
<td>Потомки на разных уровнях ниже исходного узла</td>
<td>Последовательность подходящих элементов</td>
</tr>
</tbody>
</table>caption сообщает предмет таблицы. th обозначает заголовок, а scope уточняет, относится ли он к столбцу или строке. Для ячейки с описанием последовательности в последней строке важны одновременно «Descendants» и «Результат». Именно это пересечение превращает отдельные слова в понятное сравнение.
thead и tbody группируют строки, но сами по себе не заменяют заголовочные ячейки. Жирное начертание td тоже не создаёт связи. В нашей простой структуре достаточно встроенных элементов и scope. Добавлять всем ячейкам ARIA-роль ради повторения уже существующего смысла не требуется. Примеры простых таблиц разбираются в WAI Tables.
Обратите внимание на содержание. «Первый или null» короче, но читатель ещё может не знать, что означает отсутствие результата и как с ним работать. Таблица предоставляет сравнение, а подробный разбор остаётся в тексте урока. Не следует переписывать всю теорию в каждую ячейку: слишком длинная таблица затрудняет удержание обеих координат при чтении.
Попробуйте мысленно прочитать последнюю строку вне её визуального положения. Сначала название метода задаёт объект сравнения. Затем заголовок «Область выбора» объясняет, к чему относится фраза о разных уровнях. Наконец «Результат» связывает последовательность с возвращаемым значением. Если объединить эти сведения в один абзац, получится ясное утверждение. Такая редакционная сверка помогает обнаружить не только отсутствующие заголовки, но и неоднозначные данные.
Например, короткое значение «Все» в третьем столбце непонятно без дополнительного вопроса: все документы, все потомки или все совпавшие элементы? Уточнение в самой ячейке уменьшает зависимость от внешнего контекста. Семантическая разметка передаёт связь, а содержательное название делает эту связь полезной; одно не заменяет другое.
Оформление не должно создавать новые отношения
Добавьте следующие правила в конец lesson.css. Ранее определённые стили оболочки и фокуса сохраняются:
.method-table {
inline-size: 100%;
border-collapse: collapse;
margin-block: 1.5rem;
}
.method-table caption {
text-align: start;
font-weight: 700;
margin-block-end: 0.5rem;
}
.method-table th, .method-table td {
padding: 0.75rem;
border: 1px solid #b8b8c4;
text-align: start;
vertical-align: top;
}
.method-table thead th { background: #f0edf7; }Границы помогают визуально различить пересечения, а выравнивание начала облегчает сопоставление длинных описаний. Однако отношения остаются в HTML. Если удалить фон, названия строк и столбцов не исчезнут. Это существенное отличие от таблицы, где категория передаётся только цветом и читатель должен помнить условную легенду.
Не используйте таблицу для размещения хедера слева и статьи справа. В таком случае строки и столбцы не являются данными, а создают макет. Для компоновки существуют CSS Grid и Flexbox. Учебная таблица подходит именно потому, что читатель сравнивает одинаковые признаки у нескольких методов. Внешнее сходство с сеткой недостаточно для выбора элемента.
Широкая таблица в узком представлении
При небольшом окне длинные описания могут переноситься на несколько строк. Если содержание остаётся читаемым, отдельная прокрутка не нужна. Для действительно широкой таблицы можно создать самостоятельную область прокрутки. Покажем этот вариант как замену обёртки вокруг той же таблицы, а не как изменение её ячеек:
<div class="table-scroll" role="region"
aria-label="Сравнение методов LINQ, область прокрутки"
tabindex="0">
<!-- Здесь целиком остаётся таблица method-table из первого листинга. -->
</div>.table-scroll { overflow-x: auto; }
.table-scroll:focus { outline: 3px solid var(--focus-color); }
.table-scroll .method-table { min-inline-size: 36rem; }В этом варианте область имеет понятное имя и может получить фокус для управления прокруткой. Ячейки при этом не получают отдельный tabindex. Дополнительная остановка оправдывается конкретной задачей прокрутки. Не назначайте такую обёртку всем маленьким таблицам по привычке: если движения нет, она добавит маршрут без нового действия.
Минимальная ширина 36rem — учебное решение для демонстрации, а не норма доступности. Для настоящей таблицы следует подобрать представление по длине данных. Если простой список характеристик превращается в громоздкую горизонтальную область, возможно, его удобнее оформить обычным текстом. Если сравнение действительно двумерное, отдельная прокрутка может сохранить нужные отношения.
Превращение каждой строки в визуальную карточку тоже требует внимания. CSS может менять порядок или отображение элементов, а подписи, добавленные через псевдоэлемент, не следует считать гарантированной заменой заголовков. Перед таким решением необходимо проверить и последовательное чтение, и доступность связей. WAI приводит дополнительные рекомендации для таблиц.
Когда заголовки усложняются
Представим, что к сравнению добавляются группы столбцов «Дочерние элементы» и «Потомки», внутри которых имеются собственные признаки. Теперь ячейка может относиться сразу к нескольким заголовкам. Для таких структур используются более точные отношения, например идентификаторы заголовков и атрибут headers, либо подходящие области colgroup и rowgroup. Выбор зависит от действительного устройства таблицы. Примеры нерегулярных заголовков WAI.
Но сначала стоит спросить, нужна ли эта сложность. Две небольшие таблицы с ясными названиями могут объяснить материал лучше одной с несколькими уровнями объединения. Упрощение структуры не означает потерю данных, если сравнения остаются явными. Мы выбираем представление по вопросу читателя, а не по возможности объединить больше ячеек.
Для будущей проверки возьмите одну содержательную ячейку и сформулируйте её смысл без картинки: «У метода Descendants результатом является последовательность». Затем проверьте, можно ли получить соответствующие заголовки при навигации выбранным скринридером. Отдельно оцените прокрутку клавиатурой и сохранение начала строк. Успешное визуальное отображение не отвечает на вопрос о семантических связях.
Теперь в стенде есть сравнение, у которого определены название, заголовки и область данных. Дополнительная прокрутка описана как вариант для конкретной ширины, а не обязательное усложнение каждой статьи. Следующий урок рассмотрит цвет и контраст: они помогают воспринимать таблицу и управление, но не должны быть единственным способом понять значение.