Awesome Accessibility Vue.js

List of awesome things related to accessibility in Vue.js

• Resources
  • vue-a11y
  • Community
  • Posts and tutorials
  • Videos
  • Talks
  • Books
  • Courses
• Components and plugins
  • Development
  • Vuepress
• Accessible libraries
• Accessible projects
• License

Resources

Vue A11y

• Project website (coming soon)
• GitHub Repo

Community

• Twitter

Posts and tutorials

2020

• Improved accessible routing in Vue.js
• Disclosure widgets in Vue.js

2019

• Accessible Custom Vue.js Select Component Part 1: Simple but Experimental
• Accessible Custom Vue.js Select Component Part 2: Advanced
• Accessible Form Validation Messages with ARIA and Vue.js
• Vue.jsから考えるアクセシビリティについて - 2019
• Accessible form error auto-focus with Vuelidate in Vue

2018

• Getting Started with Web Accessibility in Vue
• Improve Vue.js Accessibility with vue-announcer
• How to Create an Accessible Autocomplete Component with Vue.js
• Web components still need to be accessible

Videos

• Vue.js Modal w/ Keyboard Accessibility
• Vue.js Dropdown w/ Keyboard Accessibility

Talks

• Callum Macrae - Accessibility with Vue
• Maria Lamardo - Web Accessibility With Vue.js
• Maya Shavin - Media for everyone - how to make your Vue Apps accessible for all users
• Maya Shavin - Vue your Media with Accessibility (m16y)

Books

• Vue.js: Up and Running: Building Accessible and Performant Web Apps
• Accessible Vue

Courses

• Web Accessibility Fundamentals (Vueschool)

Components and plugins

• @vue-a11y/announcer - A simple way with Vue to announce any useful information for screen readers.
• @vue-a11y/skip-to - It helps people who only use the keyboard to jump to what matters most.
• @vue-a11y/dark-mode - A component that helps to implement dark mode and other color modes in your Vue application.
• @vue-a11y/focus-loop - Vue component that helps you to to trap focus in an element.
• @vue-a11y/vlibras - Componente Vue.js que ajuda você a implementar o VLibras no seu site.
• vue-accessible-multiselect - Vue.js accessible multiselect component made according to WAI-ARIA practices.
• vue-a11y-utils - Utilities for accessibility (a11y) in Vue.js.
• vue-focus-lock - It is a trap! A lock for a Focus. A11y util for scoping a focus.
• vue-a11y-calendar - Accessible, internationalized Vue calendar.
• a11y-vue-dialog - An accessible dialog component made for Vue.
• vue-a11y-katex - Katex Accessibility Using Vue.js.
• vue-m16y - A11y widget for Vue app which enables media accessibility mode.
• vue-switch-button - Accessible toggle button component for Vue 2.
• vue-menu-button - Accessible menu button component for Vue 2, following WAI-ARIA 1.1 authoring practices.
• vue-transition-a11y - A extended version of the Vue component, which takes 'prefers-reduced-motion' in to account.
• autocomplete-vue - Accessible autocomplete component Vue.
• focus-trap-vue - Vue component to trap the focus within a DOM element.
• vue-accessibility-toolbar - A Toolbar with Buttons to invert Colors, highlight Links, desaturate and increase Font Size.
• vue-a11y-click - It helps you handling click events on element which are not natively clickable...
• vue-accessible-modal - Vue.js component for accessible modals.
• vue-number-input - Vue component for numbers input.
• vue-accessible-color-picker - Accessible color picker component for Vue.js.
• vue-autosuggest - Vue autosuggest component.
• vue-a11y-dialog - Vue.js wrapper for a11y-dialog .
• vue-accessible-tabs - An accessible, unstyled <Tabs> implementation for Vue 2
• vue-toggles - A highly customizable and accessible toggle component
• vue-accessibility-list - An accessibility list for your project with the options: increase / decrease font and high contrast.
• vue-visually-hidden - Vue.js visually hidden component for Vue 3

Development

• vue-axe - Accessibility auditing for Vue.js applications.
• vue-axe-next - Dynamic accessibility analysis for Vue.js 3 using axe-core.
• eslint-plugin-vuejs-accessibility - An eslint plugin for checking accessibility rules from within .vue files.

Vuepress

• vuepress-theme-default-vue-a11y - Vuepress theme for vue-a11y documentation

Accessible libraries

• Vuetensils - A "naked" component library for building accessible, lightweight, on-brand applications.
• Vuetify - Material Design Component Framework.
• BootstrapVue - Bootstrap v4 component and grid system for Vue.js, complete with extensive and automated WAI-ARIA accessibility markup.
• @chakra-ui/vue - Build scalable and accessible Vue.js applications with ease.

Accessible projects

• Tournant UI - Inclusive Vue Components

License