😺

Fluent UI Blazorボタンの使用法に関するガイドライン

2023/12/02に公開

アクセシビリティ

Fluent UI

tech

始めに

ボタンは最も代表的な入力コンポーネントの一つです。
何かのアクションやイベントをトリガーするために使用します。

応答の送信、フォームの送信、変更のコミット、次のステップへの移動など重要なアクションに使用します。
ここでは、Fluent UIにおけるボタンの使用方法のガイドラインを示します。
これらを遵守することによって高いアクセシビリティ及びアプリケーション間での共通の操作性を実現することができます。

ボタンを使用すべき場所

ボタンは、何らかの応答の送信、フォームの送信、状態の変更のコミット、次のステップへの移動などのアクションに使用します。
すなわち、ボタンは何らかのアプリケーションの動作を引き起こすために使用します。

たいして、単に別の場所に移動する場合はリンクを使用します。

ボタンの色

通常、ボタンにつけることができる色は「Accent」または「Neutral」のいずれかです。
レイアウトの中で最も重要なボタン1つのみに「Accent」を利用することができ、その他は「Neutrul」で表現します。

レイアウト

レイアウトの「Accent」のボタンは最も重要なアクションに一つだけ使用することができます。
同じ優先度のボタンが同一のレイアウト内に2つ以上ある場合はすべてのボタンを「Neutral」にする必要があります。

「Accent」にしたボタンは常に他のアクションの上または左に目立つように配置する必要があります。右から左に記述する文書ではこれは逆になり右になります。

すなわち、「はい」「いいえ」であったり「OK」「Cancel」のような選択肢があった場合は「はい」や「OK」がより重要で論理的に順当な選択肢であると考えられるため、左側に配置して「Accent」を使用します。

<FluentButton Appearance="Appearance.Accent">はい</FluentButton>
<FluentButton Appearance="Appearance.Neutral">いいえ</FluentButton>

ボタンの色のコントラスト

ボタンに視覚的にアクセスするために、アクセシビリティの観点からすべてのインタラクティブ状態でボタンのテキストが4.5:1以上にボタンの背景に対するコントラストが3:1以上にする必要があります。
これは、Fluent UI Blazorのデザイントークンを使用して構築している場合このコントラスト比は保証されています。

また、無効になっているボタンは色のコントラストの条件の対象外です。

コンテンツ

ここでは、ボタン上に表示される文字を示します。
ボタンによって引き起こされるアクションを反映したアクティブな動詞を使用します。
簡潔に通常は単一の動詞が最適ですが明瞭さが増す場合は名詞を含めます。
末尾の句読点は使用しません。