Семантика для циников
© MTV
youtube.com/pepelsbey
Семантика —
это как монады.
HTML5
© Lucasfilm
Важные вопросы
<b> или <strong><section> или <article><div> или <span><i> для иконок?
Дарья
© MTV
Это
совсем
не важно
Ну или важно, но вам может быть всё равно.
UX
Удобно ли пользоваться сайтом.
Роли разметки
- Контент
- Интерфейс
Контент?
© MTV
Главная страница KharkivJS
Пофиг и беда
<div> — 497 шт. да пофиг<img alt> — 0 из 53 шт. ой, беда<a href></a> — 7 шт. очень беда<h*> — 0 шт. вообще беда
Пустота в пустоте
Контент
- Язык:
<html lang="en">, <html lang="ua">
- Заголовки:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- Картинки:
<img alt="">, <svg role="image" aria-label="">
- Фигуры:
<figure>, <figcaption>
- Списки:
<ul>, <ol>, <li>
Для поисковиков, режимов чтения, скринридеров, новых устройств.
Меню заголовков VoiceOver
Меню заголовков VoiceOver
OdessaJS
Интерфейс?
© MTV
Интерфейс
- Ориентиры:
<header>, <main>, <aside>, <footer>
- Заголовки:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- Элементы форм:
<fieldset>, <legend>, <input>
- Интерактивные:
<button> и <a>
- Лейблы:
<a href="" aria-label="Twitter"></a>
Для пользователей клавиатур и скринридеров.
Меню ориентиров VoiceOver
Ссылки на соцсети в VoiceOver
Всё правильно сделали
<a href="https://t.me/odessafrontendcommunity">
<svg viewBox="0 0 240 240">
<title>Telegram Logo</title>
</svg>
</a>
Но можно лучше, понятнее: Телеграм или Новости в Телеграме.
Но апки…
© MTV
Документ
<body>
<h1>Заголовок 1</h1>
<p>Съешь ещё этих булок</p>
<h2>Заголовок 2</h2>
<p>Да выпей кавы</p>
</body>
Сайт
<body>
<header>Шапка сайта</header>
<nav>Навигация</nav>
<main>Главный контент</main>
<aside>Прочий контент</aside>
<footer>О сайте</footer>
</body>
Меню ориентиров VoiceOver
Приложение
<header>
<h1>Телеграм</h1>
<a href="/contacts">Контакты</a>
<a href="/chats">Чаты</a>
<a href="/options">Настройки</a>
</header>
Приложение
<nav>
<h2>Чаты</h2>
<a href="/chat-1">
<img src="chat-1" alt="Чат 1">
<h3>Чат 1</h3a>
</a>
</nav>
Приложение
<main id="chat-1">
<h2>Чат 1</h2>
<p>Как дела?</p>
<p>Ну такое…</p>
</main>
<main id="chat-2" hidden>
<main id="chat-3" hidden>
Разметка — это просто.
Если вы знаете зачем.
Теперь вы знаете.
d’
ARIA
© MTV
