
Урок 08 · 11 хв
Доступність і meta
Сторінку читають не лише очима. Мова, заголовок, alt, порядок заголовків.
Доступність — не окремий «режим для людей з інвалідністю». Це зрозумілий документ: мову вказано, вкладку названо, картинки підписано, форма озвучується, фокус не губиться. Більша частина робиться звичайним HTML, без ARIA.
langнаhtml— мова сторінки. Без нього синтез мовлення читає українську як англійську.charset— інакше кирилиця стане кракозябрами. Став першим уhead.viewport— щоб телефон не стискав десктопну верстку у вузьку колонку.title— ім'я вкладки й результат у пошуку. «Без назви» — це діра.description— короткий абзац для сніпета. На саму сторінку не виводиться.
Що перевірити перед здачею
- Один
h1, рівні заголовків без стрибків. - У кожної змістовної картинки є
alt: або опис, або свідомо порожньо. - Усі поля з
label, кнопки з зрозумілим текстом. - Посилання відрізняються від простого тексту не лише кольором.
- Сторінка читається з вимкненими стилями: порядок в HTML збігається з порядком читання.
Валідатор не ловить сенс, але ловить незакритий тег, два однакові id і забутий alt. Прогін через Nu Html Checker — швидка перевірка перед тим, як називати це сторінкою. Принципи — у WCAG коротко на MDN.
Документація
- MDN · lang — мова документа й шматка тексту
- MDN · viewport — масштаб на телефоні
- MDN · aria-label — ім'я, коли видимого тексту немає
- Nu Html Checker — перевірити розмітку
Перевірка
Закріпи, поки не пішов далі
1. Що буде без
langнаhtml?2. Як зробити кнопку, якщо на ній лише іконка?
3. Де живе текст вкладки браузера?
4. Навіщо дивитися на сторінку без CSS?