Необходимость семантической верстки и доступности

 

Вместе с понятием юзабилити (usability) не так давно появилось понятие accessibility, или доступность для web-приложений. Accessibility — этот термин означает доступность ресурсов в сети интернет для всех категорий людей, в том числе с инвалидностью или когнитивными нарушениями. 20,7 млн. россиян имеют проблемы со зрением, для них, в той или иной мере, сложно, или невозможно пользоваться ресурсами в сети, в том числе и коммерческими. Как сделать сайт доступнее:

 

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

 

В HTML есть теги, которые несут смысл, их называют семантическими. Семантические HTML 5 теги, такие как <header>, <footer>, <nav>, <article>, <section> нужны, чтобы четко разделить веб страницу на смысловые блоки, которые помогут не только браузерам, но и скринридерам (программам для озвучивания текста с экрана) понять смысловое назначение контента и донести содержание до пользователя. 

Например, скринридер (программа для интерпретации содержания веб страницы в звук) видит, что в теге <nav> содержится список <ul> c 4 элементами <li> и выдает, что на странице есть навигация, которая состоит из списка из 4 элементов, это намного понятнее и удобнее. Часто разработчики используют блок <div> вместо кнопки <button> и стилизуют как кнопку. Может <div> и похож на кнопку, но также недоступен для скринридеров и клавиатуры — так делать нельзя.

 

Доступность элементов страницы

для клавиатуры

 

Если к элементу сайта можно получить доступ только с помощью курсора мыши, это значит, что элемент недоступен. С помощью клавиатуры можно пробежаться по всем элементам сайта и, если они доступны, по умолчанию, обводятся рамкой, которую заметит пользователь. Разработчики отключают это выделение, что негативно сказывается на доступности. Не отключайте выделение элементов, и подменять кнопки дивами, в таком случае, эти элементы будут недоступны для клавиатуры.

 

Размер шрифта

 

Размер шрифта важен для доступности,  не используйте размер шрифта в пикселях, воспользуйтесь REM. Если указать размер шрифта в rem, он будет считаться от размера шрифта, который задан в <html>, но большинство разработчиков указывают в <html> фиксированный размер шрифта — это в корне неверно. Указывайте в <html> размер в процентах, который будет считаться от того, что указал пользователь в браузере, по умолчанию это 16px, и уже от этого значения будут пересчитываться наши rem шрифты на сайте. Это сделает сайт намного удобнее и доступнее, но разработка и поддержка будет дороже обычной.

 

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

Читайте также:

Зачем вам аккаунт-менеджер

(с) “Ну ты же аккаунты в Инстаграме ведешь?” Мама нашего аккаунт-менеджера Валерии   Впервые обращаясь в рекламное агентство, клиенты задают…

Подробнее
#Интересно

Необходимость семантической верстки и доступности

  Вместе с понятием юзабилити (usability) не так давно появилось понятие accessibility, или доступность для web-приложений. Accessibility — этот термин…

Подробнее
#Разработка

Digital 20.20

  Тренды не меняются раз в год, под куранты, но в преддверии нового десятилетия все говорят о трендах будущего года….

Подробнее
#Интересно

SEO или контекст?

Если бы нам давали по рублю за каждый вопрос “Что порекомендуете, SEO, или контекст?”, Дональд Трамп уже плакал бы горючими…

Подробнее
#Контекст

React-компоненты

React — очень популярная UI библиотека, она отвечает только за часть view в модели MVC (Model-View-Controller — «Модель-Представление-Контроллер»). Создана при…

Подробнее
#Разработка

This в JavaScript

This в js является камнем преткновения начинающих разработчиков, все им пользуются, но до конца мало кто понимает, что означает данное…

Подробнее
#Разработка

Знак судьбы или таргет?

Уверена, все оказывались в такой ситуации: разговариваете с друзьями о том, что хотите щенка, достаете из кармана телефон, открываете Instagram,…

Подробнее
#Таргет

Почему мы “топим” за новинки?

Если мы сотрудничали в 2019 году, значит мы предлагали вам разработать сайт-квиз. Неважно, из какой вы сферы — магазин удобрений,…

Подробнее
#Интересно

Как бренды и бизнес адаптируются к карантину

  Раз уж случилось непредвиденное, и всех бизнесов коснулось то, что нельзя называть, предлагаем посмотреть на то, что предпринимают Ваши…

Подробнее
#Интересно

“1 ключевая фраза — 1 объявление” в контекстной рекламе

При настройке рекламной кампании ключевые фразы можно делить на группы 2 способами: По принципу “1 ключевая фраза — 1 объявление”….

Подробнее
#Контекст