Таблиці

Букмарклет для швидкої перевірки

Виконати код букмарклета на цій сторінці
Перейти на сторінку з кодом

Помилка 1 – Таблиця без заголовку

Вимога не виконується, бо таблиця не має програмно прив'язаного заголовку.
<!-- Відповідний код HTML виглядає так -->
<table>
    <tr>
        <th>Назва</th>
        <th>Колір</th>
        <th>Клас</th>
    </tr>
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>
Назва Колір Клас
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч

Підхід 1 – Таблиця із заголовком у вигляді <caption> з виглядом за замовчанням

Вимога виконується
<!-- Відповідний код HTML виглядає так -->
<table>
    <caption>Продукти та їхні кольори</caption>
    <tr>
        <th>Назва</th>
        <th>Колір</th>
        <th>Клас</th>
    </tr>
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>
Продукти та їхні кольори
Назва Колір Клас
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч

Підхід 1А – Таблиця із заголовком у вигляді <caption>, що був візуально кастомізований

Вимога виконується
<!-- Відповідний код HTML виглядає так -->
<table>
    <caption class="caption-custom">Продукти та їхні кольори</caption>
    <tr>
        <th>Назва</th>
        <th>Колір</th>
        <th>Клас</th>
    </tr>
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>
<style>
    .caption-custom {
        color: #707070;
        font-weight: bold;
        padding-bottom: 8px;
        text-align: left;
    }
</style>
Продукти та їхні кольори
Назва Колір Клас
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч

Підхід 2 – Таблиця із заголовком, встановленим через атрибут "aria-label"

Вимога виконується
<!-- Відповідний код HTML виглядає так -->
<table aria-label="Продукти та їхні кольори">
    <tr>
        <th>Назва</th>
        <th>Колір</th>
        <th>Клас</th>
    </tr>
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>
Назва Колір Клас
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч

Підхід 3 – Таблиця із заголовком, встановленим через атрибут "aria-labelledby"

Вимога виконується
<!-- Відповідний код HTML виглядає так -->
<p id="label-for-table-1">Продукти та їхні кольори</p>
<table aria-labelledby="label-for-table-1">
    <tr>
        <th>Назва</th>
        <th>Колір</th>
        <th>Клас</th>
    </tr>
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>

Продукти та їхні кольори

Назва Колір Клас
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч

Помилка 2 – Вказівка на заголовок вказана в атрибуті "aria-labelledby", однак цільовий елемент відсутній

Вимога не виконується, бо таблиця не має програмно прив'язаного заголовку.
<!-- Відповідний код HTML виглядає так -->
<p>Продукти та їхні кольори</p>
<table aria-labelledby="label-for-table-2">
    <tr>
        <th>Назва</th>
        <th>Колір</th>
        <th>Клас</th>
    </tr>
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>

Продукти та їхні кольори

Назва Колір Клас
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч

Помилка 3 – Таблиця не має заголовків рядків чи колонок

Вимога не виконується, бо таблиця не має заголовків рядків чи колонок.
<!-- Відповідний код HTML виглядає так -->
<table aria-label="Продукти та їхні кольори">
    <tr>
        <td>Апельсин</td>
        <td>Помаранчевий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Лимон</td>
        <td>Жовтий</td>
        <td>Фрукт</td>
    </tr>
    <tr>
        <td>Помідор</td>
        <td>Червоний</td>
        <td>Овоч</td>
    </tr>
</table>
Апельсин Помаранчевий Фрукт
Лимон Жовтий Фрукт
Помідор Червоний Овоч