Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アクセシビリティの観点からみたFluent UI Blazorのすすめ
Search
tomokusaba
May 24, 2024
Programming
1
230
アクセシビリティの観点からみたFluent UI Blazorのすすめ
アクセシビリティの観点からみたFluent UI Blazorのすすめ
.NETラボ勉強会2024年5月
https://dotnetlab.connpass.com/event/317839/
tomokusaba
May 24, 2024
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Fluent UI Blazor 最新Update
tomokusaba
1
160
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
270
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.2k
プロンプトエンジニアリング入門
tomokusaba
2
1.4k
Sementic Kernelのネイティブ関数について
tomokusaba
0
990
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
590
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
360
Fluent UI Blazorの新しいComponentについて
tomokusaba
0
370
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
330
Other Decks in Programming
See All in Programming
ビッグデータにおける、RAGデザインパターン詳解
randoryo
0
170
terraform-provider-aws にプルリクして マージされるまで
exoego
2
170
俺たちのPHPの型システムはすごいぞっ!
suguruooki
1
230
ドラ🔵もんでDIを学ぶ
tomo1227
0
4.8k
Micro Frontends for Java Microservices - KCDC 2024
mraible
PRO
0
250
デプロイ・QA・Four keys を自動化×見える化する freee の統合デリバリー基盤
akito0922
1
410
IaCにおけるテスト考察 / Tests in IaC
linyows
2
250
過去や未来を扱うのは難しい? 過去と未来に立ち向かうための勘所
shinpeim
2
450
Google Cloud で プロダクト開発 事業として成長させるZennの例 / grows-zenn-with-google-cloud
wadayusuke
2
280
高品質と高スピードを両立させるテストアプローチ/Test Approach that Improves Quality and Agility Together
goyoki
12
7.6k
#KotlinFest 2024 : Kotlin sealed classを用いた、ユーザーターゲティングDSL(専用言語)と実環境で秒間1,000万評価を行う処理系の事例紹介
kazukima
0
460
我々はなぜテストを書くのか / Why we write test codes
takaking22
6
700
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.4k
The Cult of Friendly URLs
andyhume
74
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
What's in a price? How to price your products and services
michaelherold
238
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
244
1.2M
For a Future-Friendly Web
brad_frost
173
9.1k
Into the Great Unknown - MozCon
thekraken
17
1.2k
Optimizing for Happiness
mojombo
372
69k
Designing for humans not robots
tammielis
247
25k
Robots, Beer and Maslow
schacon
PRO
155
8k
What’s in a name? Adding method to the madness
productmarketing
PRO
18
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
128
32k
Transcript
アクセシビリティの観点からみ たFluent UI Blazorのすすめ 株式会社SAKURUG プロダクトDiv 草場 友光 .NETラボ勉強会2024年5月
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2024 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると左側に表示されます
今日の目的 • あらゆるWebサイトやアプリケーションはとある情報を届けるこ とを目的にしていたり、インタラクティブな対話を通して何らかの コミュニケーションを達成することを目的にしています。 • このようなことができているのも、正常な視覚をあり正常な聴覚 がありそして五体満足であり健康であるからこそこのようなサー ビスを満足に享受することができています。 •
Fluent UI Blazorを使用することによっていかにアクセシビリ ティに優れたWebアプリケーション構築ができるかをお話しした いと思います。
あなたのサービスは、 ある日あなたが色を 識別できなくなったとしても 不自由なく使えますか?
あなたのサービスは、 ある日あなたが目が 見えなくなったとしても 不自由なく使えますか?
地球上のすべての個人と すべての組織が より多くのことを達成できるようにする。
きっと、Fluent UI Blazorの力で アクセシビリティもより効率よく 実装できるに違いない!
アクセシビリティに ついて学びましょう
アクセシビリティとは? • 誰もが自由に何かの目的を達成できるような状態のことを指す。 • 特に情報システムにおいては何らかのハンディキャップを持った 方でも不自由なく情報にアクセスできるような状態を指す。
Webシステムにおけるアクセシビリティ • 色覚異常に配慮して色の組み合わせに配慮しないといけない • 色彩に関する学習しますか?? • WCAG規格に則り4.5:1以上の文字のコントラストが必要 • コントラスト比に関してどうやってテストすれば? •
画像・動画には代替テキストが必要みたい • 読みやすいフォントとはなに? • ダークモード実装したいんだけども・・・ • レスポンシブデザインにも対応しないと • ・・・etc
でも、アクセシビリティの実装ってよくわからない! • よくわからないので、フレームワークの出番。 • 色彩とか色調とか難しくてよくわからない →フレームワークに任せればよい • デザイナーがいないのでWebUIもエンジニアがやってるんです けども →だからこそフレームワークと規約に縛られてみる
Fluent UI Blazorとは? • Microsoftが推進しているデザインシステムFluent UIの Blazorラッパー • 多くは、Fluent UI
Webコンポーネントのラッパーとして実装 • いくつかのコンポーネントはFluent Design Systemを活用し たコンポーネント
情報システムにおけるハンディキャップ • 色覚異常 • 視覚障害 • 聴覚障害 • 四肢障害 •
などなど
情報システムにおけるハンディキャップ • 色覚異常 • 視覚障害 • 聴覚障害 • 四肢障害 •
などなど 主なターゲットとして考えていく
色覚異常ってどれくらいいるの? • 日本人において男性の20人に一人、女性の500人に一人の割合 • とても無視できる割合ではない!
色覚異常へのWebデザインでの対処 • 色に頼った情報発信のしかたをしない。 • 色調の違いのみの違いに頼らない • 色数を増やさない • コントラストを高くする
Fluent UI Blazorでの実装及び規約 • 基本的に製品を表すAccentColorを1色のみ指定できるのみ。 • 自動的に文字のコントラストを確保するデザイントークンが実装さ れている。 • 規約上、AccentColor以外はUIの階層構造を表すグレースケー
ルのみの色。 • 例外的にシステムから、警告、エラーなどを表すセマンティックカ ラーをつけることができるとされているが説明文の添付の配慮が 求められている。
ライトモード・ダークモードにおける デザイントークンの効果 ライトモード ダークモード
ライトモード・ダークモードにおける デザイントークンの効果 ライトモード ダークモード アクセントカラーが変化している!
アクセントカラーが変化する理由 • WCAG AAの規定するコントラスト比4.5:1のテキストと背景の コントラストを確保するため! • WCAGとは・・・W3Cのアクセシビリティに関する仕様 • たとえば、薄い文字は読みにくいですよね!! •
コントラストがつかない色の変化に頼った文字も読みにくい人が いるかもしれません。
視覚障害者ってどれくらいいるの? • 日本に約30万人
視覚障害者へのWebデザインでの対処 • UIの自然な順番でスクリーンリーダーが読めるようにする。 • area-labelに説明的な文章を書きスクリーンリーダーに読ませ る
Fluent UI Blazorでの実装及び規約 • HTML上のarea-labelはすべての入力コンポーネントに AriaLabelプロパティとして実装されている。 • レイアウトは左から右に上から下にが原則 • すべての入力コンポーネントにはLabelをつける規約
• IconにはTitleをつける規約
その他、アクセシビリティへの配慮 • すべてのコンポーネントはWCAG 2.1AA規格を満たすか上回る (満たされていない場合は明記されている) • キーボードナビケーション技術を積極的に導入している • マウスはハンディキャップを持った方には難しい入力デバイスです •
キーボードによっての入力も可能なように配慮されています • レスポンシブレイアウト • リッチメディアと代替メディア • 画像などを利用すると多くの人に理解しやすくなります • 視覚情報が認識できない人に代替手段を提供する方法があります
色についてのガイドライン • コミュニケーションの唯一の手段として色を使用しない。 • 色以外にテキスト、グラフィック、アイコンなど様々な方法で情報 を伝えて視覚異常への配慮をする。
まとめ • 色に関しての知識がない場合、色覚異常への配慮は難しい • 専門のデザイナーがいない場合、Fluent UI Blazorなどのアク セシビリティに十分配慮されたUIコンポーネントを使用すること はとても有用 •
見た目に美しく、デザインの一貫性を得られるだけでなくアクセシ ビリティにも配慮でき、現実的な工数でそれらが実現できるので 採用しない手はない!
参考文献 • https://github.com/microsoft/fluentui- blazor/releases • Welcome to the Fluent UI
Blazor components library (https://www.fluentui-blazor.net/) • Fluent 1 (https://fluent1.microsoft.design/)
おしまい おしまい