視覚的に隠す

これらのヘルパーを使用して、要素を視覚的に隠しつつ、支援技術へのアクセス性を維持します。

visually-hidden 属性を使って、補助技術 (スクリーンリーダなど) を利用できるようにしながら、要素を視覚的に隠すことができます。

visually-hidden="focusable" 属性を使うと、デフォルトでは要素を視覚的に非表示にすることができますが、 (キーボードのみのユーザなど) フォーカスされたときに表示することができます。

:focus-within のおかげで、コンテナの子要素がフォーカスを受け取ったときにコンテナが表示されます。

Skip to main content
A container with a focusable element .
vue
<template>
 <div
  style="height: 25px"
 >
  <b-h
   level="2"
   visually-hidden
  >
   Title for screen readers
  </b-h>
  <Anchor
   visually-hidden="focusable"
   href="#content"
  >
   Skip to main content
  </Anchor>
  <b-div visually-hidden="focusable">
   A container with a
   <Anchor to="/">
    focusable element
   </Anchor>
   .
  </b-div>
 </div>
</template>

See Also