HTML

Семантичность - это

- легкость поддержки

- SEO-friendly

Как семантичность реализовать?

- Теги текста располагать по иерархии (заголовки, параграф, span, em, i, b ...)

- Избегать <br>, <hr>

- Правильно использовать заголовки - <h4>по семантическому значению</h4>, а не размеру букв.

- В контенте избегайте абр. (аббревиатура) без их расшифровки

<abbr title="аббревиатура">абр.</abbr>
            

(тег <abbr> и атрибут title поможет программе - screanreader)

Ссылки

- Текст внутри ссылки должен нести информацию о том, куда осуществится переход, а не сообщать click me или ссылка

- Подробнее правила создания гиперссылок описаны с статье на MDN

Label

- Аналогично ссылкам - внутри label должен быть поясняющий текст

Таблицы

- По возможности таблиц следует избегать, т.к. программы для чтения описывают переход в каждую ячейку. Что очень утомительно долго.

- Если все же таблицы используются, то caption, thead, tbody, th, tfooter помогут понять содержимое лучше

Img

- Alt должен нести смысл и избегать повторения названий на одной странице

- Пустые alt допустимы при верстке, но не при размещении сайта в сети (за редким исключением)

- Возможны описательные предложения

- SEO также ищет изображения по alt

Текст-изображение

- Используйте аттрибут title с описанием того, что недоступно для распознавания программой для чтения web-страниц. Например для иконок с поясняющим изображением.

Figure & Figcaption

- Лучший способ связать информацию figure, требующую описания, с самим описанием figcaption.

See the Pen Accessibility tags by Gennadiy ( @Gorbulin) on CodePen.