🚀

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

2023/12/02に公開

始めに

TextFieldを使用すると短いテキストデータを入力できます。
ここでは、Fluent UIにおけるテキストフィールドの使用法のガイドラインを示します。
これらを遵守することによって高いアクセシビリティ及びアプリケーション間での共通の操作性を実現することができます。

複数行の情報を入力する必要がある場合はTextAreaを使用してください。
数値を入力する必要がある場合はNumberFieldを使用してください。

TextFieldの幅はユーザーが入力すると予想されるコンテンツのおおよその長さに合わせる必要があります。

ユーザーがTextFieldにフォーカスした時、プレースホルダーが消えて認知障害がある人を含む一部の人が情報を入力することが困難になってしまいます。

プレイスホルダーは支援技術のarea-labelに関連付けられている必要があります。

この、TextFieldに何を入力するのかを示すテキストを表示します。
単体のラベルを配置するほか、TextFieldのLabelパラメータを指定してラベルを配置することも可能です。

ラベルのテキストからそのUIの空間的配置から当然に類推される事項が省略されていることがしばしばあります。しかし、その空間的は位置は視覚障害者にとってはとても理解しにくい事柄です。
そのような場合にはAreaLabelパラメータで省略されている事項を補う必要があります。

プレイスホルダーを使用して短い補助的なヒントや想定される入力値の書式設定の例を示すことができます。
ラベルから直感的ではない場合にデータを提供する方法についてユーザを導く必要があります。

プレイスホルダーには常に表示されるべき重要な情報には使用しないでください。