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
370
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
250
Azure Cloud Adoption Framework(計画編)
tomokusaba
1
94
速報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
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
260
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
5
2.4k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
470
EMこそClaude Codeでコード調査しよう
shibayu36
0
120
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
5.1k
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Thoughts on Productivity
jonyablonski
70
4.9k
Building Applications with DynamoDB
mza
96
6.7k
Six Lessons from altMBA
skipperchong
29
4k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Agile that works and the tools we love
rasmusluckow
331
21k
The Pragmatic Product Professional
lauravandoore
36
6.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Visualization
eitanlees
149
16k
Documentation Writing (for coders)
carmenintech
75
5.1k
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/)
おしまい おしまい