Вместе с понятием юзабилити (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 шрифты на сайте. Это сделает сайт намного удобнее и доступнее, но разработка и поддержка будет дороже обычной.
Доступность сайта важна, поскольку нельзя забывать о людях с ограниченными возможностями — мы должны делать интернет-ресурсы доступными для всех. Простые правила разработки позволят сделать жизнь таких людей немного легче.