Данная секция никак напрямую не связана с Bootstrap, но знать о данном приёме полезно, если вы хотите адаптировать свой сайт для людей с ограниченным зрением. В спецификации WCAG, которая описывает возможности HTML для доступности есть упоминание работы с таблицами.
Существует специальный атрибут scope, который позволяет напрямую связать заголовки таблицы со строками. В базовом варианте атрибут принимает одно из двух значений: col и row. Значением col указываются заголовки таблицы, а row указывает на заголовок строки.
После этого экранные скринридеры смогут явно связать заголовки таблицы и их значение.
<table class="table">
<thead>
<tr>
<th>№</th>
<th>Название профессии</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Фронтенд-программист</td>
<td>JavaScript — язык программирования фронтенд-разработки. С его помощью программисты делают сайты динамичными и «живыми». Самый востребованный и наиболее простой язык для новичков.</td>
</tr>
</tbody>
</table>
При использовании атрибута scope есть возможность «выкинуть» ненужные столбцы. При воспроизведении таблицы речевыми движками в них нет необходимости. В текущем примере, при использовании скринридера в качестве заголовка строки выступит первый столбец. То есть цифра 1. Оказавшись в столбце с описанием профессии и включив функцию прочтения названия ячейки мы получим ответ, что элемент расположен в столбце с именем «Описание» и строке с именем «1». Если таблица небольшая, то в этом нет ничего страшного, но представьте, что пользователь находится в таблице из десятка различных заголовков, с подтаблицами и объединёнными ячейками.
В этом случае озвучивание заголовка строки и столбца не даст полной информации о том, что за данные находятся в ячейке. Установив атрибут scope="row"
для ячейки внутри строки мы укажем использовать это название как заголовок строки. Переделав немного пример выше, получится следующий результат:
<table class="table">
<thead>
<tr>
<th scope="col">№</th>
<th scope="col">Название профессии</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td scope="row">Фронтенд-программист</td>
<td>JavaScript — язык программирования фронтенд-разработки. С его помощью программисты делают сайты динамичными и «живыми». Самый востребованный и наиболее простой язык для новичков.</td>
</tr>
</tbody>
</table>
Теперь, при чтении ячейки с описанием профессии, скринридер укажет, что заголовок строки: «Фронтенд-программист», а заголовок столбца «Описание»