Всем привет! В этой статье мы разберем одну из важнейших тем при разработке любого веб‑сайта — доступность.

Она позволяет сделать наш сайт или веб‑приложение доступным максимальному количеству пользователей. И под максимальным количеством имеются ввиду не только пользователи со слабыми устройствами или интернетом, для которых мы должны предоставить максимально оптимизированное решение, но и пользователи с ограниченными (постоянными или временными) возможностями: люди без слуха, зрения, без возможности использовать мышь или клавиатуру для взаимодействия с контентом веб‑сайта.

Для чего же нам нужно работать над доступностью? Ответ напрашивается сам собой — расширение аудитории и привлечение новых клиентов (если вы, например, оказываете услуги). По данным AccessiCart, при улучшенной доступности мы увеличиваем потенциальную аудиторию до 25%. (Ссылка на статью)

Помимо расширения аудитории, улучшение доступности положительно влияет на органический трафик (переходы на сайт из поисковых систем). Исследование, проведенное Semrush, показало, что 73,4% сайтов, внедривших решения по доступности, зафиксировали рост органического трафика, при этом 66,1% из них отметили увеличение трафика от 1% до 50%. (Ссылка на статью)

Здесь мы рассмотрим как улучшить доступность с двух сторон: оптимизации и взаимодействия с контентом. Добиться этого можно с помощью самых базовых технологий разработки.

Семантическая разметка

Самое первое, что можно учесть при разработке — это семантика. Если коротко, то главная суть семантики в HTML — использование смысловых тегов по назначению.

Перед тем, как мы разберем основные семантические теги, посмотрим на то, как же семантика сказывается на доступности нашего сайта.

Важность семантики

Как мы помним, мы пытаемся обеспечить доступность нашего сайта абсолютно всем людям, в том числе с ограниченными возможностями. Одним из инструментов, которым можно воспользоваться для чтения контента с сайта, является скринридер. Он помогает пользователю прослушивать контент сайта. А также он ориентируется не на его внешний вид, а на разметку, и смысл контента такой инструмент определяет именно по тегам.

Рассмотрим простой пример. У нас есть список дел, который оформлен двумя способами: семантически и с использованием div, не несущим в себе смысла.

Задачи

    
Помыть посуду
    
Постирать белье
    
Купить Lamborghini

Задачи

    
Помыть посуду
    
Постирать белье
    
Купить Lamborghini

Если сравнить 2 варианта, то семантический блок кода выглядит более читаемым и понятным, нежели список размеченный с помощью