Веб-доступность: как улучшить доступность вашего сайта

Размещено на http://www.allbest.ru/

Веб-доступность: как улучшить доступность вашего сайта

Шогенов А.М.

Аннотация

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

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

Annotation

In the modern world, the development of websites and their promotion is a rather difficult task. One of the ranking factors of sites is its availability and loading speed. The site should be optimized in such a way that the site loads quickly both on personal computers and mobile devices. Unfortunately, at present there are a large number of sites that are not optimized enough. This applies to both Russian-speaking and English-speaking segments of the Internet. In this article, we draw attention to the fact that the availability of the site and its loading time are important factors with which it is necessary to carry out certain actions aimed at optimizing the site. In connection with the foregoing, the author of this article has made an attempt to scientific analysis and critical reflection on the web accessibility of the site, as well as given certain recommendations on how to improve the accessibility of your site.

Key words: website development, website promotion, website loading speed, website availability, website optimization.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!-- Example of decorative image --> <img src="decorative_img.png" alt="">

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

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

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

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

Рисунок 3. Пример иерархии заголовков

Ниже приведен код этой веб-страницы. Обратите внимание на различные теги заголовков в нем:

<И1>Факты о собаках</И1>

<img src="dog.png" alt="a cute dog resting under the sun">

<Ь2>Что делает собаку лучшим питомцем?<Ж2>

<р>Собаки любимы всеми, и этому есть множество научно обоснованных причин, упомянутых ниже</р>

<113>Собаки чувствуют ложь<Ж3>

<р>Ага! Вы правильно прочитали! Собаки достаточно умны, чтобы понять, когда похвала искренняя. У них довольно острый ум.</ р>

<h3>y собак отличное обоняние<Ж3>

<р>Собаки чувствуют себя маленькими в 40 раз лучше, чем мы, и это качество играет важную роль в построении более прочной связи между человеком и собакой. Причины этого приведены ниже</ р>

<h4>1. Они чуют, что к вам в гараж пробирается незнакомец</И4>

<р>Собаки могут обнаружить незнакомца благодаря своему острому обонянию и спасти вас от кражи.</р>

<h4>2. Они могут сказать вам, когда вы забыли положить мясо в холодильник после похода в магазин</ h4>

<р>Собаки могут заставить вас отдать им половину мяса, которое вы купили в супермаркете, но они также могут помочь вам сохранить оставшуюся половину. Благодаря их обонянию!</р>

Используйте свойство Aria или тег Label для полей ввода

Метки Aria или теги <label> сообщают программам чтения с экрана, какой тип информации ожидает поле ввода. Без них средства чтения с экрана не знали бы назначения поля ввода, что создавало бы неудобства для пользователей с нарушениями зрения. [6, с. 329]

<!-- Aria label example -->

<input type-'text" placeholder-'Enter your name" aria-label-'Enter your name">

<!-- Label tag example -->

<label>Full Name: <input type-'text" placeholder-'Enter your

name"></label>

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

Во втором примере используется тег <label> с текстом Full Name, который может быть прочитан программами чтения с экрана.

Обеспечьте функциональность ключевых слов

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

Одним из простых примеров этого является добавление прослушивателя события щелчка к кнопке отправки формы вместо использования события onsubmit (которое требует, чтобы пользователь щелкнул, чтобы отправить форму). Взгляните на пример ниже: [2, с. 43]

<!-- Example one -->

<form>

<label>Full name: <input type-"text" value-""></label>

<label>Email: <input type-"email" value-""></label>

<button onclick-"handleSubmit>Submit</button>

</form>

<!-- Example two -->

<form>

<label>Full name: <input type-"text" value-""></label>

<label>Email: <input type-"email" value-""></label>

<button>Submit</button>

</form>

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

Во втором примере используется событие onsubmit и этому событию назначается функция JavaScript. Таким образом, щелчок или кнопка ввода запускают функцию handleSubmit. [5, с. 28]

Используйте доступную цветовую палитру

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

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

Предложите альтернативы аудио- и видеоконтенту

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

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

Убедитесь, что контент легко понять

Простой для понимания контент не содержит необъяснимого жаргона и технических фраз.

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

Мы - команда экспертов по аналитике, которые умеют собирать данные из всех доступных хранилищ, обнаруживать аномалии, выполнять пакетную обработку больших объемов данных и применять надежные алгоритмы для решения ваших бизнес-задач. [3, с. 29]

Вышеприведенный текст полон аналитического жаргона, который не каждый может понять. Из -за этого вы теряете своих посетителей - зачем им вкладывать в вас деньги, если они не понимают, что вы делаете?

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

Мы - команда экспертов, которые специализируются на сборе данных из всех доступных источников, выявлении ошибок в этих данных, обработке больших объемов данных за меньшее время и с большей точностью, а также на составлении прогнозов для решения ваших бизнес-задач. [7, с. 38]

Убедитесь, что ваш контент соответствует своему назначению на понятном всем языке.

Заключение

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

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

Я надеюсь, что эти советы помогут вам улучшить взаимодействие с пользователем в ваших будущих проектах.

Использованные источники

1. Агишева, Э.Р. Обеспечение доступности веб-сайтов для пользователей с ограниченными возможностями здоровья / Э.Р. Агишева // Уфа: Общество с ограниченной ответственностью "Аэтерна", 2019. - С. 121124.

2. Борисова, А.А. Сайт компании как инструмент интернет-маркетинга. Юзабилити сайта / А.А. Борисова // Вестник науки. - 2023. - Т. 5, № 6(63). - С. 40-45.

3. Гаджиев, М.Г. Инструменты для анализа доступности сайтов / М.Г. Гаджиев, Н.А. Журавлева, А.А. Шайдуллов // Стерлитамак: Общество с ограниченной ответственностью "Агентство международных исследований", 2022. - С. 27-31.

4. Игнаткова, Я.А. Доступность веб-контента как неотъемлемый параметр качественного веб-сайта / Я.А. Игнаткова, Н.П. Шутько // Армавир: Армавирский государственный педагогический университет, 2022. - С. 162165.

5. Инструменты для анализа уровня обеспечения доступности сайтов / М.Г. Гаджиев, Н.А. Журавлева, Д.С. Савочкина, А.А. Шайдуллов // Анапа: Общество с ограниченной ответственностью «Научно -исследовательский центр экономических и социальных процессов» в Южном Федеральном округе, 2022. - С. 25-32.

6. Мухина, Ю.Р. Правила вёрстки сайтов для обеспечения их доступности / Ю.Р. Мухина // Челябинск: Южно -Уральский технологический университет, 2021. - С. 327-332.

7. Назаров, Д.М. Методы оценки юзабилити и доступности веб-сайтов электронной коммерции / Д.М. Назаров // Международный журнал прикладных наук и технологий Integral. - 2022. - № 4. - С. 32-41.

8. Петров, Р.Г. Конструктор сайтов E-publish как одно из средств создания персонального сайта / Р.Г. Петров // Орел: Орловский государственный аграрный университет имени Н.В. Парахина, 2018. - С. 7881.

9. Пудич, А.С. Исследование доступности веб-сайтов вузов России для лиц с ограничениями по зрению / А.С. Пудич, М.Г. Гриф, М.А. Бакаев // Вестник Российского университета дружбы народов. Серия: Информатизация образования. - 2022. - Т. 19, № 1. - С. 29-44.

10. Элиханов, В.Г. Как улучшить рейтинг вашего сайта в GOOGLE / В.Г. Элиханов, М.С. У. Халиев // Тенденции развития науки и образования. - 2020. - № 68-1. - С. 127-130.

Размещено на Allbest.ru