🙆

アクセシビリティの観点から見たFluent UI Blazorのすすめ

2023/12/02に公開

アクセシビリティ

Fluent UI

tech

なぜアクセシビリティへの配慮が必要か？

あらゆるWebサイトやアプリケーションはとある情報を届けることを目的にしていたり、インタラクティブな対話を通して何らかのコミュニケーションを達成することを目的にしています。
その結果として、動画視聴であったりゲームなどの娯楽であったり、オンライン銀行やネット証券などの取引ができたり様々なサービスを享受することができます。
このようなことができているのも、正常な視覚をあり正常な聴覚がありそして五体満足であり健康であるからこそこのようなサービスを満足に享受することができています。

想像してください。
モノトーンの世界を。

想像してください。
暗闇の世界を。

想像してください。
音のない世界を。

想像してください。
自分の手が満足に動かせない世界を。

このような状態でも自身の作ったサービスがきちんと利用できると言えますか？

色覚異常への配慮

色覚異常とは色の判別が難しかったり特定の色の判別が困難であったり、他の人の思う色と違う色と認識してしまう異常があることを指しています。
こうした場合へのアクセシビリティの観点からの対策としては色の差でコンテンツを表現するのではなく明るさの差、つまりコントラスト比でコンテンツを表現することが唯一の対策となります。
WCAG2.2で規定されている通り通常のテキストのコントラスト比は4.5:1のコントラスト比を確保することが求められています。
また、大きなテキストのコントラスト比は3:1以上のコントラスト比を確保することが求められています。

Fluent UI Blazorのデザイントークンを利用しテキスト表示を行った場合はこれらのコントラスト比が確保できるように設計されています。

すなわち、Fluent UI Blazorのデザイントークン上にUIを構築していった場合は色覚異常への配慮がすでになされているということが言えます。

(参考)Fluent UIの設計原則(色)

視覚障害への配慮

視覚障害への配慮としてはいかにスクリーンリーダーに情報を読み込ませることができるかということになる。
各コンポーネントについての各論になるのでそれぞれのコンポーネント使用法についてのアクセシビリティについての項を参照することによって理解できる。

全体としての共通事項としては、UIの場所として当然推論できるとしてラベルテキストから省略されているような事柄としても、視覚障害者にとってはUIの配置的な情報は伝わらないのでこの情報をAria-Labelに含めるということが重要事項です。

Fluent UI BlazorとしてのトピックとしてはこのAriaLabelについてはすべての入力コンポーネントについて.NETのパラメータレベルでの実装がなされています。

FluentTextFieldでの例

まとめ

Fluent UI Blazorを使用することによって、また付随するガイドラインを遵守することによって一定ラインのアクセシビリティを確保することができます。
セキュリティ同様、アクセシビリティも完全というものは難しく一つ一つ足りないところを着実にこなしていくことが大事だと思います。その中で、Fluent UI BlazorのようなUIフレームワークを採用しそのデザインフレームワークの枠組みのなかでしかも、規約文書を遵守することによって高いアクセシビリティを実現することができます。
これは、通常のHTML+CSSの世界で構築する方法よりも遙かに高効率で実現性が高い方法です。

単に機能を実装するだけではなく、アクセシビリティに配慮したWebアプリケーションを世の中に多く作り出していきましょう！