Accessible Vue Components

A set of Accessible, easy to use, Front-end UI Components for Vue 3. Most of these components are used in the Accessible Vue Starter which showcases practical use cases for them. As a bonus, the starter also has its own dedicated components (like a keyboard accessible and responsive navigation) and other utilities provided by Tailwind CSS.

NOTE: This package is still in it's early stages of development, it's NOT recommended to start using it in production yet! This project is inspired by the Accessible Astro Components and will be developed in the same way, but for Vue.

Installation

Run the following command in your project folder to get started:

npm install accessible-vue-components

Usage

You need to install the components as a plugin in your Vue app. You can do this by adding the following code to your main.js file:

import { createApp } from 'vue'
import App from './App.vue'

// register accessible components as a plugin and import styles
import components from 'accessible-vue-components'
import 'accessible-vue-components/dist/style.css'

const app = createApp(App)
app.use(components)
app.mount('#app')

Skip to: SkipLinks

SkipLinks

• Live demo (coming soon)

SkipLinks provide a way for users using assistive technologies to skip repeated content on pages to go directly to the main content of a website or application. To use this component properly, make sure you give the main content of your project an id of #main-content so the SkipLink can target it. As a fallback the SkipLink will try to target the h1 of the page. If neither are found a warning will be logged to the console.

Some (accessibility) features of the SkipLinks:

• Let's assistive technologies skip to the main navigation and main content of a website

Example

<template>
  <header>
    <SkipLinks />
  </header>
</template>

Overwriting styles

You can apply your own styles by overwriting the specificity of the default styles. For example, to change the color of the SkipLinks you can use the following CSS:

<style>
  header .avc-skiplinks a {
    color: white;
    background-color: purple;
  }

  header .avc-skiplinks a:hover,
  header .avc-skiplinks a:focus {
    background-color: indigo;
  }
</style>

Other accessible projects by Mark Teekman

• Accessbile Vue Starter
• Accessible Astro Starter
• Accessible Astro Dashboard
• Accessible Astro Components
• Accessible Astro Documentation

Helping out

If you find that something isn't working right then I'm always happy to hear it to improve these components! You can contribute in many ways and forms. Let me know by either:

1. Filing an issue
2. Submitting a pull request
3. Starting a discussion
4. Buying me a coffee!

Thank you!

A big thank you to the creators of Vue and to all using these components and the information to make the web a bit more accessible for all people around the world :) Also a big thanks to creators around the web for providing us with information about how to build accessible web interfaces, such as Zell Liew from Learn JavaScript Today and Heydon Pickering, the author of Inclusive Components and many more.