Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yamanoku/vue-visually-hidden
Vue.js visually hidden component (Vue 3 Support Only)
https://github.com/yamanoku/vue-visually-hidden
a11y accessibility typescript visually-hidden vite vue3 vuejs
Last synced: about 2 months ago
JSON representation
Vue.js visually hidden component (Vue 3 Support Only)
- Host: GitHub
- URL: https://github.com/yamanoku/vue-visually-hidden
- Owner: yamanoku
- License: mit
- Created: 2021-07-31T11:52:30.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-01T06:47:07.000Z (8 months ago)
- Last Synced: 2024-05-01T12:27:07.603Z (8 months ago)
- Topics: a11y, accessibility, typescript, visually-hidden, vite, vue3, vuejs
- Language: TypeScript
- Homepage: https://vue-visually-hidden.vercel.app
- Size: 2.7 MB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-a11y-vue - vue-visually-hidden - Vue.js visually hidden component for Vue 3 (Components and plugins / Courses)
- awesome-access - vue-visually-hidden - Vue.js visually hidden component for Vue 3 (Components and plugins / Courses)
README
# vue-visually-hidden
[](https://www.npmjs.com/package/vue-visually-hidden)
Vue.js visually hidden component
(Vue 3 Only)
## What is visually-hidden component ?
In the case of visual content, users using assistive technologies (e.g. screen readers) may not always know what the content means.
In most cases, accessible content can be provided by semantic markup, but there is currently no markup that can provide content that is not visually visible but can be read out loud.
For example, when a button is displayed with only pictograms, the description of the button may be visually discernible, but the screen reader may not know what it means.
```html
📧
```
In such cases, `` is a good choice.
```html
📧
Send email
```
*Use `aria-hidden="true"` to prevent screen readers from emoji.*
It used to be used in [Bootstrap](https://getbootstrap.com/) in the form of `sr-only`.
### Reference
[WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)
## Demo
https://vue-visually-hidden.vercel.app/
## Installation
```bash
npm install -D vue-visually-hidden
```
```bash
yarn add -D vue-visually-hidden
```
## Usage
```html:App.vue
import { VisuallyHidden } from 'vue-visually-hidden'
```
### style setting (vue-cli)
```js:main.js
import 'vue-visually-hidden/dist/style.css'
```
### style setting (vite)
```js:main.js
import 'vue-visually-hidden/style'
```
## isFocusable
prop | type | default
----------- | --------- | ---------
isFocusable | `Boolean` | `false`
Inspired by [Bootstrap visually-hidden helper](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/)
`.visually-hidden-focusable` can be show by any child element of the container receives focus.
```html:example.vue
```
This can be used primarily for a feature called skip link.
A skip link is link that allow keyboard users to quickly access the main content, and the links are visible upon focus.
### Reference
- [Basics | Vue.js](https://v3.vuejs.org/guide/a11y-basics.html#skip-link)
- [vue-a11y/vue-skip-to](https://github.com/vue-a11y/vue-skip-to)
## Resolve Setting
If you get the error `Invalid VNode type: Symbol(Fragment) (symbol)`, try setting `resolve` in the configuration file as follows.
See: https://github.com/vuejs/vue-next/issues/2064
### vue.config.js
```js:vue.config.js
const path = require('path')
module.exports = {
configureWebpack: {
resolve: {
symlinks: false,
alias: {
vue: path.resolve('./node_modules/vue')
}
}
}
}
```
### vite.config.js
```js:vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
dedupe: ['vue']
}
})
```