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
270
アクセシビリティの観点からみた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
Semantic Kernelの最新状況及び入門
tomokusaba
0
7
Fluent UI Blazor 最新Update
tomokusaba
1
200
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
280
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.2k
プロンプトエンジニアリング入門
tomokusaba
2
1.5k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
670
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
370
Fluent UI Blazorの新しいComponentについて
tomokusaba
0
390
Other Decks in Programming
See All in Programming
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
Jetpack for KMP
fornewid
1
290
Activities at Cairo Library
cairolibrary720
0
1.2k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
CSC307 Lecture 05
javiergs
PRO
0
210
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
継続的な活動で築く地方エンジニアの道
myamashii
2
350
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
How STYLIGHT went responsive
nonsquared
93
5k
Thoughts on Productivity
jonyablonski
64
4.1k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Web development in the modern age
philhawksworth
203
10k
YesSQL, Process and Tooling at Scale
rocio
166
14k
RailsConf 2023
tenderlove
16
720
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Optimizing for Happiness
mojombo
373
69k
Building Your Own Lightsaber
phodgson
101
5.9k
Debugging Ruby Performance
tmm1
71
11k
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/)
おしまい おしまい