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
520
アクセシビリティの観点からみた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
Microsoft Playwright Testing廃止!
tomokusaba
0
54
Azure Well-Architected Framework入門
tomokusaba
1
360
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
240
Azure Cloud Adoption Framework(計画編)
tomokusaba
1
91
速報Visual Studio 2026(Insiders)
tomokusaba
0
42
Cloud Adoption Framework(導入戦略)
tomokusaba
0
32
.NET開発者のためのAzureの概要
tomokusaba
0
300
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
520
Cloud Adoption Framework入門
tomokusaba
1
45
Other Decks in Programming
See All in Programming
Cursorハンズオン実践!
eltociear
2
1k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.1k
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
990
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
Le côté obscur des IA génératives
pascallemerrer
0
140
CSC305 Lecture 06
javiergs
PRO
0
220
Catch Up: Go Style Guide Update
andpad
0
220
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
4k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.3k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Six Lessons from altMBA
skipperchong
28
4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Docker and Python
trallard
46
3.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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/)
おしまい おしまい