Add a Markdown Version of the Slides

en/README.md

@@ -12,9 +12,10 @@ The original document is available on Google Slides. You can copy it to your Goo
 
 - [Inclusive Persona Extension (Google Slides)](https://docs.google.com/presentation/d/10jdG622toXmQGq0bOFWRl3FwUYlQP7qas3G5fAT0b2U/edit?usp=sharing)
 
-The PDF version is also available in this repository for your convenience.
+The PDF and Markdown versions are also available in this repository for your convenience.
 
 - [Inclusive Persona Extension (PDF)](inclusive_persona_extension_en.pdf)
+- [Inclusive Persona Extension (Markdown)](inclusive_persona_extension_en.md)
 
 ## How to Use
 

en/inclusive_persona_extension_en.md

@@ -0,0 +1,161 @@
+# Inclusive Persona Extension
+
+## Visual Disabilities (Blindness)
+
+### Barriers to using the Web
+
+* Cannot see. Cannot understand the visual information.
+* Cannot use the Web without the text-to-speech feature (or braille output) of a screen reader.
+* Cannot use fingers or major pointing devices like a mouse to click or tap on items.
+
+### Solutions
+
+* Provide alternative text for images and icons.
+* Provide alternative formats such as audio descriptions for video content.
+* Use "real" text rather than images of text.
+* Mark up heading structures and landmarks appropriately.
+* Make all functionality operable through a keyboard
+* The link text and button label alone should convey the purpose of the link and button.
+* Provide labels to identify form controls by using the `<label>` element.
+* Make the data table structure as simple as possible and use the `<th>` element for table header cells.
+* Use WAI-ARIA attributes and make sure a screen reader user is aware of dynamic context changes.
+* Do not start playing any sounds automatically when the page is loaded.
+
+## Visual Disabilities (Low Vision)
+
+### Barriers to using the Web
+
+* Cannot see well enough.
+    * Cannot see clearly (Blurred vision, Double vision)
+    * Glare sensitivity
+    * Flickering eyesight
+    * Peripheral vision loss
+    * Central vision loss
+    * Wandering eye (Shaky vision)
+    * People with low vision might need screen readers depending on the severity.
+* People with low vision might need screen readers depending on the severity.
+
+### Solutions
+
+* Allow users to enlarge content on the screen.
+* Use "real" text rather than images of text.
+* Provide adequate contrast between foreground text and its background color combinations.
+* Make all keyboard-accessible components have a visible focus indicator.
+* Make sure the information is transmitted correctly even if the color is changed to the opposite color by the user agent's function.
+* Allow users to use a custom style sheet.
+* Layout content in chunks to better facilitate flow of information.
+* Follow familiar user interface design patterns.
+* Do not change content with accidental triggers such as mouseover or keyboard focus.
+* Match the screen readers reading order with the visual layout.
+
+## Color-Blindness / Grayscale Print
+
+### Barriers to using the Web
+
+* Difficulty distinguishing between certain kinds of colors.
+    * Protanopia / Protanomaly (Low or insensitivity to the color red)
+    * Deuteranopia / Deuteranomaly (Low or insensitivity to the color green)
+    * Tritanopia / Tritanomaly (Low or insensitivity to the color blue)
+    * Monochromacy
+* When printing a web page in grayscale, color-dependent information cannot be identified correctly.
+* When opening a web page with a monochrome e-reader, color-dependent information cannot be identified correctly.
+
+### Solutions
+
+* Do not rely on color alone to communicate information.
+    * Add an underline to the link (especially one in a sentence)
+    * Express the visual hierarchy of text using non-color elements such as font size and thickness.
+    * In figures (graphs, etc.), shapes other than colors should also be used as clues for visual identification.
+* Make content understandable / usable even when displaying it in grayscale.
+
+## Auditory Disabilities / In a public
+
+### Barriers to using the Web
+
+* Hard of hearing or total loss of hearing.
+* Can't make sound in a public space (transportation, library, etc.) including situations where  the battery of Bluetooth headphones is dead, forgot to bring headphones, etc.
+
+### Solutions
+
+* Provide transcripts for audio content.
+* Provide captions (subtitles) for video content with audio.
+
+## Motor Disabilities
+
+### Barriers to using the Web
+
+* Cannot use fingers or major pointing devices like a mouse to click or tap on items. Need to rely on the following means:
+    - Adaptive / Customizable keyboards
+    - Mouth stick
+    - Various switch devices (or buttons)
+    - Speech recognition software
+    - Eye-controlled input devices
+    - etc.
+* Difficult to freely change the device orientation.
+
+### Solutions
+
+* Make all functionality operable through a keyboard.
+* Make all keyboard-accessible components have a visible focus indicator.
+* Make links, buttons, etc. large enough to be able to click / tap / execute without the need to perform precise pointing operations.
+* Describe the labels of links and buttons clearly to support voice input. Write in text and mark up appropriately.
+* Make sure that the page functions properly when the device is used in either "portrait" or "landscape" mode.
+
+## Cognitive / Learning Disabilities
+
+### Barriers to using the Web
+
+* Difficult to recognize or memorize information.
+* Easily distracted by sights and sounds in their environment.
+* Difficult to read text (such as Dyslexia).
+
+### Solutions
+
+* Follow familiar user interface design patterns.
+* Use plain language when presenting text-based information.
+* Present headings to make it easier to understand the content overview. Use visual elements (images, figures, icons, symbols, etc.) to make content understandable without reading.
+* Allow users a way to adjust the time or turn off the time limit if the content provides a time limit.
+* Movement or blinking in the content should be limited within 5 seconds or allowed to be stopped by the user.
+* Do not use flashes that flash 3 times or more per second in content expression.
+* Do not start playing video and audio content automatically when the page is loaded.
+* Use legible fonts.
+* Make the font size and line spacing large enough to improve readability. Provide multiple means of contact. (e.g. text chat as well as phone calls)
+
+## Aging
+
+### Barriers to using the Web
+
+* Difficult to use fingers or major pointing devices like a mouse precisely to click or tap on small items.
+* Hard to read small and light text (Presbyopia).
+* Hard of Hearing.
+* Difficult to recognize information and hard to remember things.
+
+### Solutions
+
+* Make links, buttons, etc. large enough to be able to click / tap / execute without the need to perform precise pointing operations.
+* Provide adequate contrast between foreground text and its background color combinations.
+* Use “real” text rather than images of text.
+* Make the font size and line spacing large enough to improve readability.
+* Follow familiar user interface design patterns.
+* Present headings to make it easier to understand the content overview.
+
+## Mobile 
+
+### Barriers to using the Web
+
+* The field of view for obtaining information is narrow due to the small screen.
+* Size of text tends to be small and difficult to read.
+* When used outside, the content is difficult to see due to the glare of natural light.
+* Since it is tapped on with a finger, precise pointing is difficult compared to using a mouse.
+* Typing is more troublesome than using a hardware keyboard.
+* Mouse-based interactions (such as mouseovers) are not available.
+
+### Solutions
+
+* Clarify content priorities from a user experience perspective and structure information serially based on those priorities.
+* Make the font size and line spacing large enough to improve readability. 
+* Allow users to enlarge content on the screen.
+* Provide adequate contrast between foreground text and its background color combinations.
+* Make links, buttons, etc. large enough to be able to tap without the need to perform precise pointing operations.
+* Minimize the frequency of text input (typing).
+* Do not implement mouseover-dependent interactions.

ja/inclusive_persona_extension_ja.md

@@ -0,0 +1,162 @@
+# インクルーシブなペルソナ拡張
+
+## 視覚障害 (全盲)
+
+### ウェブ利用時の障壁
+
+* 目が見えない。視覚的な情報が理解できない。
+* スクリーンリーダーによる音声読み上げ (または点字出力) がないと利用できない。
+* 自由にポインティング (マウスでのクリックや指でのタップ) をすることができない。
+
+### 解決方法
+
+* 画像やアイコンに対して、代替テキストを提供する。
+* 映像コンテンツに対して、代替コンテンツ (音声解説など) を提供する。
+* 文字情報は画像ではなくテキストで作る。
+* 見出し構造やランドマークを適切にマークアップする。
+* キーボード操作だけですべての機能を利用できるようにする。
+* リンクやボタンのラベルを具体的に記述する。
+* フォームの入力要素にはラベル (label 要素) を付ける。
+* テーブル (表) はシンプルな構造にし、見出しセルを th 要素にする。
+* インタラクションに伴う動的な状況の変化がスクリーンリーダーでも伝わるようにする (WAI-ARIA)。
+* ページの読み込みと同時に音声コンテンツを自動再生させない
+
+## 視覚障害 (ロービジョン)
+
+### ウェブ利用時の障壁
+
+* 目が見えにくい。
+    - 明瞭に見えない (ぼやける、重なる)。
+    - まぶしい。
+    - ちらつく。
+    - 視野を広く見ることができない。
+    - 視野の中心が欠ける。
+    - 焦点が定まらない (震える)。
+* 見えにくさによっては、スクリーンリーダーによる音声読み上げに頼ることもある。
+
+### 解決方法
+
+* ズーム (画面表示の拡大) を妨げない。
+* 文字情報は画像ではなくテキストで作る。
+* 文字色と背景色のコントラストを十分に保つ。
+* キーボード操作によるフォーカス位置を視認できるようにする。
+* ユーザーエージェントの機能で色を反転表示しても、情報が伝わるようにする。
+* ユーザーが独自のスタイルシートを使うことを妨げない。
+* 情報のチャンク (塊やつながり) に配慮してレイアウトする。
+* ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
+* 偶発的なトリガー (マウスオーバーやキーボードフォーカス) でコンテンツを変更しない。
+* 音声読み上げ順と視覚的なレイアウトを合致させる。
+
+## 色覚特性 / グレースケール印刷
+
+### ウェブ利用時の障壁
+
+* 色が識別しにくい。
+    - P型 (赤の視感度がないか低い)
+    - D型 (緑の視感度がないか低い)
+    - T型 (青の視感度がないか低い)
+    - A型 (色の識別ができず明暗でしか判別できない)
+* ウェブページをグレースケールで印刷する場合、情報識別を色に依存しているコンテンツだと判別できない。
+* モノクロの電子書籍リーダーで (電子書籍からのリンクなどで) ウェブページを開く場合、情報識別を色に依存しているコンテンツだと判別できない。
+
+### 解決方法
+
+* 色だけで情報を識別させない。
+    - リンク (特に文中のリンク) には下線を付ける。
+    - 文字の大きさや太さなど、色以外の要素を用いてテキストのビジュアルヒエラルキー (視覚的な優􏰀度) を表現する。
+    - 図 (グラフなど) においては、色以外の形状も、視覚的な判別の手がかりとして付ける。
+* グレースケール表示でもコンテンツを理解/利用できるようにする。
+
+## 聴覚障害 / 公共の場
+
+### ウェブ利用時の障壁
+
+* 音が聞こえない、または聞こえにくい。
+* 公共の場 (交通機関、図書館、など) にいて、音を出せない (Bluetooth イヤホンのバッテリー切れ、イヤホン忘れ、といった状況も含む)。
+
+### 解決方法
+
+* 音声コンテンツに対して、トランスクリプト (書き起こし文) を併せて提供する。
+* 音声付き動画コンテンツに対して、キャプション (字幕) を併せて提供する。
+
+## 運動障害
+
+### ウェブ利用時の障壁
+
+* 自由にポインティング (マウスでのクリックや指でのタップ) ができない。以下の手段に頼る必要がある。
+    - PC キーボード
+    - マウススティック
+    - 各種スイッチ (ボタン)
+    - 音声認識ソフト
+    - 視線入力装置
+    - ...etc.
+* デバイスの向きを自由に変えることが難しい。
+
+### 解決方法
+
+* キーボード操作だけですべての機能を利用できるようにする。
+* キーボード操作によるフォーカス位置を視認できるようにする。
+* リンクやボタンなどは、精緻なポインティング操作ができなくてもクリック / タップ / 実行できるよう、十分な大きさにする。
+* 音声入力の支援として、リンクやボタンのラベルを具体的に記述する。テキストで記述し、適切にマークアップする。
+* デバイスの向きが「ポートレート (縦)」「ランドスケープ (横)」どちらでも問題なく利用できるようにする。
+
+## 認知 / 学習障害
+
+### ウェブ利用時の障壁
+
+* 情報を認知したり記憶することが難しい。
+* 外的な刺激によって集中が妨げられる。
+* 文字を読むのが難しい。(ディスレクシアなど)
+
+### 解決方法
+
+* ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
+* コンテンツはなるべく平易な言葉で表現する。
+* 見出しを提示してコンテンツの概要をつかみやすくする。
+* 読まなくても理解できるよう、視覚表現 (画像、図、アイコン、シンボルなど) を適宜用いる。
+* コンテンツに時間制限がある場合、ユーザーが任意で解除または調整できるようにする。
+* コンテンツ内の動きや点滅は、5秒以内にとどめるか、ユーザーが任意で停止できるようにする。
+* コンテンツ表現において、1秒に3回以上の閃􏰁は用いない。
+* ページの読み込みと同時に動画および音声コンテンツを自動再生させない。
+* 視認性のよいフォントを用いる。
+* 文字サイズや行間を十分な大きさにして、可読性を高くする。
+* 複数のコンタクト手段を提供する。(例 : 電話+テキストチャット)
+
+## 加齢
+
+### ウェブ利用時の障壁
+
+* 精緻なポインティング (マウスでのクリックや指でのタップ) が難しい。
+* 小さな文字や薄い文字が見にくい。(老眼)
+* 耳が遠い。
+* 情報を認知したり記憶することが難しい。
+
+### 解決方法
+
+* リンクやボタンなどは、精緻なポインティング操作でなくてもクリック / タップ / 実行できるよう、十分な大きさにする。
+* 文字色と背景色のコントラストを十分に保つ。
+* 文字情報は画像ではなくテキストで作る。
+* 文字サイズや行間を十分な大きさにして、可読性を高くする。
+* ユーザーインターフェースの慣例 (おなじみのパターン) に従う。
+* 見出しを提示してコンテンツの概要をつかみやすくする。
+
+## モバイル
+
+### ウェブ利用時の障壁
+
+* 画面が小さく、情報を得るための視野が狭い。
+* 文字が小さくなりがちで、読みにくい。
+* 屋外で使用する場合、自然􏰁のまぶしさでコンテンツが見にくい。
+* 指でタップするので、マウスに比べて精緻なポインティングが難しい。
+* ハードウェアのキーボードに比べて文字のタイピングが面倒。
+* マウスを前提としたインタラクション (マウスオーバーなど) を利用できない。
+
+### 解決方法
+
+* ユーザー体験の観点からコンテンツの優􏰀順位を明確にし、伝えたいことを上位に提示する。
+* 文字サイズや行間を十分な大きさにして、可読性を高くする。
+* ズーム (画面表示の拡大) を妨げない。
+* 文字色と背景色のコントラストを十分に保つ。
+* リンクやボタンなどは、精緻なポインティング操作でなくてもタップできるよう、十分な大きさにする。
+* 文字入力 (タイピング) の発生をなるべく少なくする。
+* マウスオーバー (hover) 依存のインタラクションを実装しない。