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

アクセシビリティの観点から見たFluent UI Blazorのすすめ (短縮版) 株式会社SAKURUG プロダクトDiv 草場友光 .NETラボ
2023年12月

自己紹介 • 普段は主にシステムをAzureにモダナイズする仕事をしています。 • コミュニティ活動を通じて知識をアップデートしています。 • 2022/08-2024 Microsoft
MVP (Developer Technologies) • tomo_kusaba

宣伝【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。

注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると左側に表示されます

今日の目的 • あらゆるWebサイトやアプリケーションはとある情報を届けることを目的にしていたり、インタラクティブな対話を通して何らかのコミュニケーションを達成することを目的にしています。 • このようなことができているのも、正常な視覚をあり正常な聴覚がありそして五体満足であり健康であるからこそこのようなサービスを満足に享受することができています。 •
Fluent UI Blazorを使用することによっていかにアクセシビリティに優れたWebアプリケーション構築ができるかをお話ししたいと思います。

あなたのサービスは、ある日あなたが色を識別できなくなったとしても不自由なく使えますか？

あなたのサービスは、ある日あなたが目が見えなくなったとしても不自由なく使えますか？

地球上のすべての個人とすべての組織がより多くのことを達成できるようにする。

きっと、Fluent UI Blazorの力でアクセシビリティもより効率よく実装できるに違いない！

アクセシビリティについて学びましょう

でも、アクセシビリティの実装ってよくわからない！ • よくわからないので、フレームワークの出番。 • 色彩とか色調とか難しくてよくわからない→フレームワークに任せればよい • デザイナーがいないのでWebUIもエンジニアがやってるんですけども→だからこそフレームワークと規約に縛られてみる

色覚異常ってどれくらいいるの？ • 日本人において男性の20人に一人、女性の500人に一人の割合 • とても無視できる割合ではない！

色覚異常へのWebデザインでの対処 • 色に頼った情報発信のしかたをしない。 • 色調の違いのみの違いに頼らない • 色数を増やさない • コントラストを高くする

Fluent UI Blazorでの実装及び規約 • 基本的に製品を表すAccentColorを1色のみ指定できるのみ。 • 自動的に文字のコントラストを確保するデザイントークンが実装されている。 • 規約上、AccentColor以外はUIの階層構造を表すグレースケー
ルのみの色。 • 例外的にシステムから、警告、エラーなどを表すセマンティックカラーをつけることができるとされているが説明文の添付の配慮が求められている。

ライトモード・ダークモードにおけるデザイントークンの効果ライトモードダークモード

視覚障害者ってどれくらいいるの？ • 日本に約30万人

視覚障害者へのWebデザインでの対処 • UIの自然な順番でスクリーンリーダーが読めるようにする。 • area-labelに説明的な文章を書きスクリーンリーダーに読ませる

Fluent UI Blazorでの実装及び規約 • HTML上のarea-labelはすべての入力コンポーネントに AriaLabelプロパティとして実装されている。 • レイアウトは左から右に上から下にが原則 • すべての入力コンポーネントにはLabelをつける規約
• IconにはTitleをつける規約

参考文献 • Design principles (https://fluent2.microsoft.design/design- principles) • Welcome to the
Fluent UI Blazor components library (https://www.fluentui-blazor.net)

おしまいおしまい

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

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

tomokusaba

More Decks by tomokusaba

Other Decks in Programming

Featured

Transcript