Tweet
Tweet

Slide 1

Slide 1 text

アクセシビリティの観点からみ たFluent UI Blazorのすすめ 株式会社SAKURUG プロダクトDiv 草場 友光 .NETラボ勉強会2024年5月

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

アクセシビリティとは？ • 誰もが自由に何かの目的を達成できるような状態のことを指す。 • 特に情報システムにおいては何らかのハンディキャップを持った 方でも不自由なく情報にアクセスできるような状態を指す。

Slide 12

Slide 12 text

Webシステムにおけるアクセシビリティ • 色覚異常に配慮して色の組み合わせに配慮しないといけない • 色彩に関する学習しますか？？ • WCAG規格に則り4.5:1以上の文字のコントラストが必要 • コントラスト比に関してどうやってテストすれば？ • 画像・動画には代替テキストが必要みたい • 読みやすいフォントとはなに？ • ダークモード実装したいんだけども・・・ • レスポンシブデザインにも対応しないと • ・・・etc

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Fluent UI Blazorとは？ • Microsoftが推進しているデザインシステムFluent UIの Blazorラッパー • 多くは、Fluent UI Webコンポーネントのラッパーとして実装 • いくつかのコンポーネントはFluent Design Systemを活用し たコンポーネント

Slide 15

Slide 15 text

情報システムにおけるハンディキャップ • 色覚異常 • 視覚障害 • 聴覚障害 • 四肢障害 • などなど

Slide 16

Slide 16 text

情報システムにおけるハンディキャップ • 色覚異常 • 視覚障害 • 聴覚障害 • 四肢障害 • などなど 主なターゲットとして考えていく

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ライトモード・ダークモードにおける デザイントークンの効果 ライトモード ダークモード アクセントカラーが変化している！

Slide 22

Slide 22 text

アクセントカラーが変化する理由 • WCAG AAの規定するコントラスト比4.5:1のテキストと背景の コントラストを確保するため！ • WCAGとは・・・W3Cのアクセシビリティに関する仕様 • たとえば、薄い文字は読みにくいですよね！！ • コントラストがつかない色の変化に頼った文字も読みにくい人が いるかもしれません。

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

その他、アクセシビリティへの配慮 • すべてのコンポーネントはWCAG 2.1AA規格を満たすか上回る （満たされていない場合は明記されている） • キーボードナビケーション技術を積極的に導入している • マウスはハンディキャップを持った方には難しい入力デバイスです • キーボードによっての入力も可能なように配慮されています • レスポンシブレイアウト • リッチメディアと代替メディア • 画像などを利用すると多くの人に理解しやすくなります • 視覚情報が認識できない人に代替手段を提供する方法があります

Slide 27

Slide 27 text

色についてのガイドライン • コミュニケーションの唯一の手段として色を使用しない。 • 色以外にテキスト、グラフィック、アイコンなど様々な方法で情報 を伝えて視覚異常への配慮をする。

Slide 28

Slide 28 text

まとめ • 色に関しての知識がない場合、色覚異常への配慮は難しい • 専門のデザイナーがいない場合、Fluent UI Blazorなどのアク セシビリティに十分配慮されたUIコンポーネントを使用すること はとても有用 • 見た目に美しく、デザインの一貫性を得られるだけでなくアクセシ ビリティにも配慮でき、現実的な工数でそれらが実現できるので 採用しない手はない！

Slide 29

Slide 29 text

参考文献 • 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/）

Slide 30

Slide 30 text

おしまい おしまい