bootstrap-vueを利用するとsr-only要素が見える問題

bootstrap-vueを利用するとsr-only要素が見える問題

bootstrap-vueのGetting Startedにしたがってインストールすると謎の文字がでてくることがあります.

例えば…

✅ 解決策

$ npm install [email protected]

これ何

謎の文字は sr-only というクラスを持っています.
<label class="sr-only" id="_BVID__6__value" for="__BVID__6">2021年9月19日日曜日</label>
これはスクリーンリーダー(音声読み上げソフト)のためのようです.
つまり画面上には必要ないものが見えていることになります.

原因

bootstrapのバージョンが新しすぎるためです.
bootstrap-vueではv4.5.3が推奨されていますが,Getting Startedの通りにnpm install bootstrapをするとsr-onlyが廃止されたv5をダウンロードしてきます.
v4.5.3を指定してダウンロードすることで見えなくなります.

リンク

Getting Started | BootstrapVue - https://bootstrap-vue.org/docs

Accessibility · Bootstrap v5.0 - https://getbootstrap.com/docs/5.0/getting-started/accessibility/

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×