Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markteekman/accessible-vue-components
A set of Accessible, easy to use, Front-end UI Components for Vue 3.
https://github.com/markteekman/accessible-vue-components
a11y accessibility components library vue vue3 vuejs wcag
Last synced: 20 days ago
JSON representation
A set of Accessible, easy to use, Front-end UI Components for Vue 3.
- Host: GitHub
- URL: https://github.com/markteekman/accessible-vue-components
- Owner: markteekman
- License: mit
- Created: 2022-11-22T08:54:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-22T10:03:47.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T19:12:27.486Z (about 1 month ago)
- Topics: a11y, accessibility, components, library, vue, vue3, vuejs, wcag
- Language: Vue
- Homepage: https://www.accessible-vue.dev/
- Size: 27.3 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
README
# Accessible Vue Components
A set of Accessible, easy to use, Front-end UI Components for [Vue 3](https://vuejs.org/). Most of these components are used in the [Accessible Vue Starter](https://github.com/markteekman/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:
```console
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:
```js
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)
### 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
```vue
```
#### 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:
```scss
header .avc-skiplinks a {
color: white;
background-color: purple;
}
header .avc-skiplinks a:hover,
header .avc-skiplinks a:focus {
background-color: indigo;
}
```
## Other accessible projects by Mark Teekman
- [Accessbile Vue Starter](https://github.com/markteekman/accessible-vue-starter/)
- [Accessible Astro Starter](https://github.com/markteekman/accessible-astro-starter/)
- [Accessible Astro Dashboard](https://github.com/markteekman/accessible-astro-dashboard/)
- [Accessible Astro Components](https://github.com/markteekman/accessible-astro-components/)
- [Accessible Astro Documentation](https://accessible-astro.dev)
## 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](https://github.com/markteekman/accessible-astro-components/issues)
2. [Submitting a pull request](https://github.com/markteekman/accessible-astro-components/pulls)
3. [Starting a discussion](https://github.com/markteekman/accessible-astro-components/discussions)
4. [Buying me a coffee!](https://www.buymeacoffee.com/markteekman)
## 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.
[](https://www.buymeacoffee.com/markteekman)