vue-visuellement-masquée

Composant masqué visuellement Vue.js (Vue 3 uniquement)

Qu'est-ce qu'un composant visuellement caché ?

Dans le cas d'un contenu visuel, les utilisateurs utilisant des technologies d'assistance (par exemple, des lecteurs d'écran) peuvent ne pas toujours savoir ce que signifie le contenu.

Dans la plupart des cas, le contenu accessible peut être fourni par un balisage sémantique, mais il n'existe actuellement aucun balisage capable de fournir un contenu qui n'est pas visuellement visible mais qui peut être lu à haute voix.

Par exemple, lorsqu'un bouton est affiché avec uniquement des pictogrammes, la description du bouton peut être discernable visuellement, mais le lecteur d'écran peut ne pas savoir ce que cela signifie.

<button type="submit">
  <span>
    📧
  </span>
</button>

Dans de tels cas,

<VisuallyHidden>

<button type="submit">
  <span aria-hidden="true">
    📧
  </span>
  <VisuallyHidden>
    Send email
  </VisuallyHidden>
</button>

Utilisez

aria-hidden="true"

Il était utilisé dans Bootstrap sous la forme de

sr-only

Référence

WebAIM : CSS en action - Contenu invisible réservé aux utilisateurs de lecteurs d'écran

Démo

https://vue-visually-hidden.vercel.app/

Installation

npm install -D vue-visually-hidden

yarn add -D vue-visually-hidden

Usage

<template>
  <div>
    <VisuallyHidden>
      Visually Hidden Text
    </VisuallyHidden>
    <VisuallyHidden :isFocusable="true">
      <a href="http://example.com">example</a>
    </VisuallyHidden>
  </div>
</template>

<script setup>
  import { VisuallyHidden } from 'vue-visually-hidden'
</script>

cadre de style (vue-cli)

import 'vue-visually-hidden/dist/style.css'

paramètre de style (vite)

import 'vue-visually-hidden/style'

isFocusable

Boolean

false

Inspiré de l'assistant masqué visuellement Bootstrap

.visually-hidden-focusable

<template>
  <VisuallyHidden :isFocusable="true">
    <a href="http://example.com">example</a>
  </VisuallyHidden>
</template>

Cela peut être utilisé principalement pour une fonctionnalité appelée lien de saut. Un lien de saut est un lien qui permet aux utilisateurs du clavier d'accéder rapidement au contenu principal, et les liens sont visibles lors de la mise au point.

Référence

• Bases | Vue.js
• vue-a11y/vue-skip-to

Paramètre de résolution

Si vous obtenez l'erreur

Invalid VNode type: Symbol(Fragment) (symbol)

resolve

Voir : https://github.com/vuejs/vue-next/issues/2064

vue.config.js

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      symlinks: false,
      alias: {
        vue: path.resolve('./node_modules/vue')
      }
    }
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    dedupe: ['vue']
  }
})