Веб-инклюзивность: как усовершенствовать скорость загрузки и оптимизировать web-сайт

Keywords: website development, website promotion, website loading speed, website accessibility, website optimization.

Доступный веб-сайт разработан таким образом, чтобы каждый мог без труда им пользоваться. В процессе разработки вебсайта вы хотите убедиться, что конечный пользователь имеет лучший пользовательский опыт. И это включает людей с ограниченными возможностями или тех, кто сталкивается с проблемами при использовании веб-сайта. [8, с. 81]

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

Добавить замещающий текст к изображениям.

Возможно, вы слышали о важности добавления альтернативного текста в теги изображений в HTML5. Итак, как вы их используете? Предоставляете ли вы альтернативный текст для каждого изображения на вашей веб-странице? Замещающий текст изображения облегчает понимание содержимого вебстраницы людьми с нарушениями зрения. Но вы должны включать замещающий текст только для информационных изображений, которые помогают понять контент.

Декоративные изображения должны иметь пустой альтернативный текст. Это сообщает программам чтения с экрана, что информация, предоставляемая изображением, не важна и может фактически отвлекать внимание пользователя. Информационные изображения - это изображения, которые передают важную информацию, связанную с контентом. Вы должны быть в состоянии описать то, что они показывают, в нескольких словах альтернативного текста. [4, с. 163]

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

Рисунок 1. Изображение для сайта (фитнес-блог).

Это изображение должно передать сообщение читателям блога о вещах, которые вам нужны для упражнений на скручивание. Альтернативный текст для этого изображения может быть примерно таким:

img src="crunch_exercise.png" alt=«Y вас должен быть качественный коврик для упражнений и спортивная одежда, чтобы избежать травм спины и кожных аллергий».

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

Декоративные изображения, с другой стороны, служат единственной цели украшения веб-страницы - возможно, они просто разбивают контент или дополняют общие описания в тексте. [1, с. 123]

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

Рисунок 2. Главная страница Airbnb.

Поддерживать иерархию заголовков.

Если вы не используете заголовки в правильной иерархии (от h1 - самого большого - до h6 - самого маленького), программы чтения с экрана могут предположить, что не хватает некоторого контента.

По этой причине лучше всего использовать h1 только для основного заголовка, h для заголовков, следующих за заголовком, h3 для подзаголовков и так далее. [10, с. 129]

Рассмотрим пример ниже: у нас есть веб-страница с несколькими заголовками. h1 используется для заголовка документа, h2 - для заголовка документа второго уровня, h3 - для подзаголовков и h4 - для мини-заголовков (заголовки, идущие после h3).

СПИСОК ЛИТЕРАТУРЫ: