Bootstrap 3 の「sr-only」クラスはスクリーン リーダーのアクセシビリティをどのように強化しますか?

スクリーン リーダーの支援: Bootstrap 3 における sr-only の役割を明らかにする

Bootstrap 3 では、sr-only クラスが重要な役割を果たします。ウェブアクセシビリティにおける役割。スクリーン リーダー専用の情報を隠し、支援技術ユーザーが Web ページを効果的に移動して理解できるようにします。

Bootstrap のドキュメントによると、sr のみの要素は視覚的なレンダリングから隠されており、レイアウト内のスペースを占有しません。これにより、開発者は、ユーザー インターフェイスを乱雑にすることなく、スクリーン リーダーにラベルやその他の情報テキストを提供できます。

次の例を考えてみましょう。

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

この例では、sr-only クラスがscan 要素は、テキスト「Toggle Dropdown」を視覚的なビューから非表示にします。ただし、支援技術はこのテキストを読み上げて、ボタンの機能をユーザーに通知します。

アクセシビリティの目的で sr 専用クラスを維持することが重要です。これを削除すると、スクリーン リーダーの機能が妨げられ、Web サイトの包括性が低下する可能性があります。

このクラスは、次のような CSS スタイルを適用して要素を非表示にします。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

アクセシビリティを優先する場合は、次のようなリソースを検討してください。 Web Accessibility Initiative (WAI) および MDN Accessibility ドキュメントは、障害を持つ個人のユーザー エクスペリエンスを向上させます。

以上がBootstrap 3 の「sr-only」クラスはスクリーン リーダーのアクセシビリティをどのように強化しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。