Следующие библиотеки помогут, если для вас важна доступность (a11y) приложения:
vue-announcer: Это пакет, который предлагает удобный способ использования динамичных областей в вашем Vue приложении, чтобы пользователи, читающие с экрана, получали информацию о динамическом обновлении определенных частей вашего приложения. Например, индикаторах загрузки, уведомлениях о ходе выполнения и т. д.
a11y-vue-dialog: При создании доступных модалок не обязательно начинать все с нуля. Это библиотека для создания доступных модальных диалогов в приложении Vue.
focus-trap-vue: Помогает справиться с управлением фокусом - отправлять фокус внутрь и наружу при любых обстоятельствах.
vue-skip-to: Помогает с помощью клавиатуры или в программах чтения с экрана переходить к основному содержимому приложения.
vue-dark-mode: Эта библиотека дает пользователям больше возможностей для выбора темы при работе с приложением.
#lib #a11y
vue-announcer: Это пакет, который предлагает удобный способ использования динамичных областей в вашем Vue приложении, чтобы пользователи, читающие с экрана, получали информацию о динамическом обновлении определенных частей вашего приложения. Например, индикаторах загрузки, уведомлениях о ходе выполнения и т. д.
a11y-vue-dialog: При создании доступных модалок не обязательно начинать все с нуля. Это библиотека для создания доступных модальных диалогов в приложении Vue.
focus-trap-vue: Помогает справиться с управлением фокусом - отправлять фокус внутрь и наружу при любых обстоятельствах.
vue-skip-to: Помогает с помощью клавиатуры или в программах чтения с экрана переходить к основному содержимому приложения.
vue-dark-mode: Эта библиотека дает пользователям больше возможностей для выбора темы при работе с приложением.
#lib #a11y
Решил применить плагин eslint-plugin-vuejs-accessibility на своем проекте онлайн магазина Arty-Crafty. По PageSpeed оценка по
Кстати, когда
Чтобы подключить плагин в ESlint flat config (типа того, что используется в antfu
#a11y #eslint #artycrafty
A11y была 72, теперь вот так. Мелочь, а приятно. БОльшую часть ошибок плагин помог исправить, остальное - по подсказкам PageSpeed. Кстати, когда
eslint-plugin-vuejs-accessibility показывает ошибку, по ссылке можно попасть на очень хорошее описание в документации плагина соответствующего требования A11y и варианты исправления, так что однозначно рекомендуется.Чтобы подключить плагин в ESlint flat config (типа того, что используется в antfu
eslint-config) нужен примерно такой код (в доке этого нет):import a11y from "eslint-plugin-vuejs-accessibility";
export default antfu({
plugins: {
"vuejs-accessibility": a11y,
},
rules: {
...a11y.configs.recommended.rules,
"no-console": "off",
#a11y #eslint #artycrafty