Bootstrapでボタンを押された状態を表示するには？

Bootstrap ボタンの押下状態：簡単に切り替え効果を実装する方法

このガイドでは、Bootstrap で `aria-pressed` 属性とシンプルな CSS コードを使用して、押下状態を持つボタンを作成し、ユーザーエクスペリエンスを向上させる方法を学びます。

aria-pressed 属性を理解する

`aria-pressed` は、ボタンなどのトグル可能な要素の現在の状態（押下または非押下）を示すために使用される ARIA 属性です。

この属性は、次の 3 つの値を取ります。

値 説明
true ボタンが押された状態であることを示します。
false ボタンが押されていない状態であることを示します。
mixed ボタンが混合状態であることを示します（例：ボタングループの一部だけが押されている）。

aria-pressed を使用して押下状態を作成する

  1. HTML 構造

    ボタンに aria-pressed="false" 属性を追加して、初期状態が非押下であることを示します。 

    
<button type="button" class="btn btn-primary" aria-pressed="false">
  ボタン
</button>

  2. CSS スタイル

    [aria-pressed="true"] セレクターを使用して、押下状態のボタンにスタイルを追加します。たとえば、背景色の変更やシャドウ効果を追加できます。 

    
.btn[aria-pressed="true"] {
  background-color: #007bff; /* 例：背景色を変更 */
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* 例：影を追加 */
}

  3. JavaScript によるインタラクション（オプション）

    JavaScript を使用してボタンのクリックイベントをリッスンし、クリックするたびに aria-pressed 属性の値を切り替えて、ボタンの状態を更新できます。 

    
const button = document.querySelector('.btn');

button.addEventListener('click', () => {
  const isPressed = button.getAttribute('aria-pressed') === 'true';
  button.setAttribute('aria-pressed', !isPressed);
});

MSI 文書における適用例（オプション）

MSI 文書 では、aria-pressed 属性を使用してボタンの状態を制御する例が示されています。

例えば、この文書の XX ページには、XX という機能のオン/オフを切り替えるボタンがあり、aria-pressed 属性を使用してボタンの状態が視覚的に表現されています。

まとめ

aria-pressed 属性とシンプルな CSS コードを組み合わせることで、Bootstrap ボタンに簡単に押下状態を作成し、ユーザーインターフェースのアクセシビリティとインタラクティブ性を向上させることができます。

よくある質問

  1. Q: `aria-pressed` 属性は、どの HTML 要素で使用できますか？

    A: `aria-pressed` 属性は、ボタン、チェックボックス、ラジオボタンなど、トグル可能な状態を持つ要素で使用できます。

  2. Q: `aria-pressed` 属性を使用するメリットは何ですか？

    A: `aria-pressed` 属性を使用すると、スクリーンリーダーなどの支援技術を使用しているユーザーに対して、ボタンの現在の状態を明確に伝えることができます。また、視覚的なフィードバックを提供することで、すべてのユーザーにとってユーザーエクスペリエンスが向上します。

  3. Q: `aria-pressed` 属性の値を JavaScript で動的に変更するにはどうすればよいですか？

    A: JavaScript の setAttribute() メソッドを使用して、aria-pressed 属性の値を動的に変更できます。例えば、element.setAttribute('aria-pressed', 'true'); のように記述します。

その他の参考記事:Bootstrap ボタングループ