Последнее обновление 08.01.2023 — Василий Иванов
Итак, вы слышали много разговоров о том, что называется доступностью. Возможно, вы даже слышали о людях, которые судятся с крупными компаниями за предоставление недоступных услуг. Но знаете ли вы точно, что означает доступность?
К счастью, доступность не так уж сложна для понимания или реализации, как только вы ее реализуете. Как только вы узнали, что такое доступность, вы можете применить эту теорию на практике, написав доступные приложения Vue.js.
Что такое доступность?
Доступность — популярное модное слово в Интернете, но что именно оно означает? Оказывается, название довольно описательное. Доступность — это просто мера того, насколько удобно веб-приложение для всех типов людей.
Не все воспринимают Интернет одинаково. Некоторые люди имеют нарушения, которые могут повлиять на их слух или зрение. Некоторые не могут получить доступ к современному оборудованию или высокоскоростному Интернету, и людям часто приходится использовать Интернет в далеко не идеальных условиях. Доступность — это гарантия того, что все эти люди смогут использовать веб-приложение как можно более плавно.
Почему важна доступность?
Доступность важна, потому что, когда приложение очень доступно, оно может обслуживать как можно больше людей. Когда кто-то предоставляет услугу или информацию на веб-сайте, его цель состоит в том, чтобы другие люди использовали эту услугу или прочитали эту информацию.
Оптимизация доступности гарантирует, что как можно меньше людей не смогут использовать веб-приложение. Кроме того, более доступные веб-приложения обычно занимают более высокие позиции в результатах поиска. Это позволяет еще большему количеству людей находить и использовать более доступные веб-приложения.
Распространенные ошибки разработчиков, которые ухудшают доступность
Многие веб-приложения менее доступны, чем могли бы быть. Обычно это результат ошибок со стороны тех, кто их строил. Вот некоторые распространенные ошибки доступности, которые допускают разработчики при создании приложений:
Использование недоступных библиотек
Вы можете полагаться на сторонние библиотеки, чтобы сэкономить время и усилия при разработке своих приложений. К сожалению, не все библиотеки серьезно относятся к доступности, и бывает сложно определить хорошие. Таким образом легко случайно снизить доступность ваших приложений.
Пренебрежение семантическим HTML при создании компонентов
Семантический HTML — это HTML, чей смысл и структура верны. У каждого тега HTML есть неотъемлемая цель, которую вспомогательные технологии используют для определения значения его содержимого. Например, тег заголовка отмечает заголовок веб-сайта. Программа чтения с экрана должна иметь возможность объявить, что все, что находится внутри тега заголовка, является заголовком веб-сайта.
К сожалению, ничто не мешает вам использовать тег не по назначению. Другим распространенным примером является использование тега кнопки в качестве ссылки или наоборот.
Написание HTML таким образом вредит доступности, потому что вспомогательные технологии больше не могут быть уверены в назначении любого элемента HTML. В конечном итоге это может привести к путанице или разочарованию пользователей технологии. Для максимальной доступности вы всегда должны писать семантический HTML, даже если это требует немного больше работы.
Не тестировать на доступность
Создание веб-приложения часто может быть сложной задачей с жесткими сроками. Между поспешностью завершения функций и бременем тестирования других аспектов программного обеспечения тестирование специальных возможностей отходит на второй план. У вас может возникнуть соблазн развернуть приложение в рабочей среде до того, как вы протестируете его на наличие проблем с доступностью.
Почему? Тестирование требует времени и может потребовать значительных изменений в коде приложения. Но тестирование веб-приложения — неотъемлемая часть процесса разработки. Вы должны проверить доступность вашего приложения так же строго, как и любой другой аспект.
Инструменты, улучшающие доступность при написании Vue.js
К счастью, существуют инструменты, помогающие решить эти проблемы. Следующие пять инструментов помогут вам писать более доступные приложения Vue.js:
1. ВОЛНА
WAVE — это набор инструментов, которые помогают разработчикам автоматически тестировать свои приложения на наличие проблем с доступностью. Хотя WAVE не заменяет тестирование конечным пользователем, он все же может помочь вам выявить многие проблемы с доступностью.
WAVE предоставляет инструмент онлайн-тестирования на своем веб-сайте. Он также предлагает расширения для браузера и несколько других инструментов, помогающих в тестировании доступности для многих типов веб-приложений.
2. Vue-Диктор
Многие сигналы, которые веб-приложения используют для сообщения об активности, такие как индикаторы выполнения и индикаторы загрузки, являются чисто визуальными. Люди с нарушениями зрения или те, кто использует программы чтения с экрана, не могут их воспринимать.
Vue-announcer — это библиотека, которая позволяет объявлять об изменениях в ваших приложениях Vue.js таким образом, чтобы каждый мог получить к ним доступ.
3. Vue-Skip-To
Vue-skip-to — это библиотека, созданная для того, чтобы люди, использующие программу чтения с экрана, могли переходить непосредственно к основному содержимому приложения Vue.js. Это полезно, потому что многие веб-приложения имеют навигационные ссылки и другие элементы перед основным содержимым. Некоторым пользователям их легко пропустить, но их использование с программой чтения с экрана может быть проблематичным и разочаровывающим.
4. Плагин ESLint
ESLint — это инструмент, который помогает вам лучше писать JavaScript, анализируя ваш код и проверяя его на наличие ошибок.
Этот инструмент представляет собой плагин ESLint, который помогает вам обеспечить соответствие структуры ваших компонентов Vue.js правилам доступности.
После установки этот плагин анализирует все файлы Vue.js и указывает на проблемный код. Затем вы можете максимизировать доступность при написании своих приложений вместо того, чтобы изменять код после этапа тестирования.
5. Вуэтенсилс
Серьезным источником проблем доступности в приложениях является использование недоступных библиотек компонентов. Vuetensils — это библиотека компонентов Vue.js.
Эти компоненты оптимизированы для минимального размера, максимальной доступности, простоты использования и простоты оформления. Вы можете сэкономить время и использовать эти предварительно созданные компоненты, не нанося ущерба доступности ваших приложений.
Доступность в Vue.js — это просто
Доступность — это уверенность в том, что каждый может использовать ваше приложение в любом контексте. Максимизация доступности важна для обеспечения того, чтобы приложение могло использоваться как можно большим количеством людей.
Разработчики часто допускают распространенные, но предотвратимые ошибки доступности при создании своих приложений. Общие проблемы включают отсутствие тестирования и написание несемантического HTML. Но с помощью нескольких инструментов проще писать высокодоступные приложения Vue.js.
