Tweet
Tweet

Slide 1

Slide 1 text

東京都新型コロナ対策サイトの
 アクセシビリティ改善を語る
 伊原 力也　伊藤 俊輔
 2020/10/18
 Code for Japan Summit 2020 


Slide 2

Slide 2 text

自己紹介
 サイオステクノロジー株式会社 
 チーフ・デザイン・オフィサー。
 HCD-Net 認定人間中心設計スペシャリスト。
 
 主に金融系システムのユーザーインターフェイス設計・デ ザインなどを専門にしている。また、アクセシビリティ関連 として日本DAISYコンソーシアムに参加するなど、読みや すさ・理解しやすさに関して興味・関心があり活動をして いる。
 freee株式会社 デザイナー。 
 HCD-Net 評議委員および認定人間中心設計専門家。
 
 ウェブアクセシビリティ基盤委員会 WG1委員。共著書に 『デザイニングWebアクセシビリティ 』、監訳書に『コーディ ングWebアクセシビリティ』『インクルーシブ HTML+CSS&JavaScript』がある。
 クリエイティブユニットmokuva所属。 
 伊原 力也
 伊藤 俊輔
 @magi1125
 @shunito


Slide 3

Slide 3 text

アクセシビリティとは
 ● access + ability = アクセスできる度合い
 ● 多様な状況に対する、情報にアクセスするためのルートの幅広さ
 ● 「アクセシビリティの向上」とは、利用方法の選択肢を広げ、
 使える状況を広げる取り組みのこと


Slide 4

Slide 4 text

東京都 新型コロナウイルス感染症 対策サイト 


Slide 5

Slide 5 text

tokyo-metropolitan-gov/covid19: 東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website 


Slide 6

Slide 6 text

Issues · tokyo-metropolitan-gov/covid19 


Slide 7

Slide 7 text

スクリーンリーダー利用時のデモ動画 


Slide 8

Slide 8 text

すべてのAccessibility
 Contributorに敬意を表します


Slide 9

Slide 9 text

前代未聞の現場、それを伝えたい
 ● 約2ヶ月で数十件のアクセシビリティIssueが提案され、高速で反映され、
 ユーザーフィードバックが寄せられる現場は前代未聞！
 ● たいてい「どうしたらアクセシビリティ向上を始められるか？」からの
 議論になるのに、この現場では最初からフルアクセルだった
 ● 障害当事者ユーザーも協力し、現実的なラインを議論しながらも
 どんどん改善されていく様子は、圧倒的なRe:DESIGN感を感じた
 ● なぜそれができたのか？どのように進んでいったのか？
 それを共有することで他の現場でもRe:DESIGNを起こしたい


Slide 10

Slide 10 text

きっかけのIssueと行動原則


Slide 11

Slide 11 text

ユニバーサルデザイン対応を確認する · Issue #65 · tokyo-metropolitan-gov/covid19 


Slide 12

Slide 12 text

サイト構築にあたっての行動原則 


Slide 13

Slide 13 text

サイト構築にあたっての行動原則 


Slide 14

Slide 14 text

ポイント
 ● シビックテックにおいてはインクルーシブな環境と
 インクルーシブなアウトプットが必要不可欠
 ● はじめから「アクセシビリティが必要だ」と宣言すると
 有識者・協力者を集めやすい
 ● 後付け対応だとコストが高くなりがちなので、
 その点でも初期から巻き込むのが重要


Slide 15

Slide 15 text

自動テストツールの導入と改善


Slide 16

Slide 16 text

自動テストツール導入のきっかけ
 ● 対策サイトの公開後、多くの協力者が開発に参加するようになり、日々新しい情報 や機能が追加されている状況
 ● アクセシビリティ上の問題も改善のイシューが登録されるのと同時に新しい問題も 発生して、イタチごっこ
 ● さらにこのコードベースから地方版も作られようとしている……
 
 なるべく多くの開発者にアクセシビリティを意識してもらい、新規の問題が生まれにくくす る仕組みが必要だと考えた。


Slide 17

Slide 17 text

自動テストライブラリvue-axeの導入
 ● 対策サイトは、Vueのフレームワークである「NuxtJS」で開発されており、ローカルの 開発用サーバ上でビルドし開発する仕組み
 ● アクセシビリティ検査ライブラリであるvue-axeを開発用ビルド設定に追加
 ● アクセシビリティ上の問題があるとブラウザの「開発者ツール」のコンソールにメッ セージとして表示するように設定
 
 vue-axeのベースとなっているaxe-coreは、Deque社によりオープンソースで公開されて いるアクセシビリティチェックライブラリで、Lighthouseのアクセシビリティ項目のチェック でも利用されています。
 Deque : axe-core


Slide 18

Slide 18 text

背景色とテキストの
 コントラスト不足の指摘 
 ID属性の重複の指摘 
 ランドマークの
 不具合の指摘など


Slide 19

Slide 19 text

ポイント
 ● 多数のコントリビューターがいる場合に、アクセシビリティを意識してもらい、新しい 問題を作ってしまわないような仕組みとして有効
 ● できれば開発の初期段階で設定し、共通認識を持ちながら進められるとよい
 ● 開発が落ち着いてきたらチェック項目を減らすなど、チェック対象の見直しなどもで きるようにするとなおよい
 ● 機械的なテストで発見できないアクセシビリティ上の問題も多数あるので、有識者 による試験も組み合わせる
 
 gov.ukによる2017年の報告によれば、ツールにより特性はあるが機械的な検査により発見出来るアクセシビリティ上の問題は17% ～37%とのこと。


Slide 20

Slide 20 text

アクセシビリティ試験
 もくもく会の開催


Slide 21

Slide 21 text

オンラインアクセシビリティもくもく会 - 東京都新型コロナウイルス対策サイト改善 


Slide 22

Slide 22 text

Web Content Accessibility Guidelines (WCAG) 2.1 


Slide 23

Slide 23 text

東京都 新型コロナウイルス対策サイト - ウェブアクセシビリティチェック 


Slide 24

Slide 24 text

Ameba Accessibility Guidelines 


Slide 25

Slide 25 text

東京都 新型コロナウイルス対策サイト - ウェブアクセシビリティチェック 


Slide 26

Slide 26 text

キーボードフォーカス時にoutlineが表示されるようにする · Issue #1147 · tokyo-metropolitan-gov/covid19 


Slide 27

Slide 27 text

ポイント
 ● 個々に改善提案を挙げるより、まず網羅的にチェックし、Issue化
 ● 25人いれば、10画面を2時間＋αでひと通りチェックできる
 ● 達成基準ごとに分担、精度よりカバー範囲を優先
 ● 読みやすいガイドラインを使い、質疑に対応できる相談役を立てる


Slide 28

Slide 28 text

東京都 covid-19 対策サイトにアクセシビリティ視点でコントリビュートしてみた 


Slide 29

Slide 29 text

検査陽性者の状況の3段階進化


Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

検査陽性者の状況の3段階進化
 SVG
 HTML
 HTML


Slide 32

Slide 32 text

検査陽性者の状況の3段階進化
 
 
 1. エクセルから起こしたSVG、読み上げや多言語対応に難あり
 2. HTML化で改善、要素増加対応やレスポンシブ対応も必要に
 3. 縦積みリストになり、上記の課題が解消されている


Slide 33

Slide 33 text

表の追加：検査陽性者の状況 · Issue #309 · tokyo-metropolitan-gov/covid19 


Slide 34

Slide 34 text

「検査陽性者の状況」コンポーネントコーディング（table組みでOK!） · Issue #860 · tokyo-metropolitan-gov/covid19 


Slide 35

Slide 35 text

「検査陽性者の状況」テーブルを横均等7分割から縦の積み上げにする · Issue #1520 · tokyo-metropolitan-gov/covid19 


Slide 36

Slide 36 text

Tokyo COVID-19 Information Website - a Collection by macropygia on CodePen 


Slide 37

Slide 37 text

ポイント
 ● 多言語対応や要素追加を考えるとHTML化が必要になる。
 結果として機械可読性があがり、アクセシブルになる
 ● ウェブの媒体特性に合った（＝マテリアルオネスティな）デザインは、
 多様な状況に対応しやすく、実装コスト面でも有利
 ● いっぽう、ウェブにあるだけでアクセシブル、スピードは正義でもある。
 調整コストを考えると段階的な改善という作戦も必要


Slide 38

Slide 38 text

相談フローの4段階進化


Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

相談フローの修正 · Issue #167 · tokyo-metropolitan-gov/covid19 


Slide 42

Slide 42 text

PC: SVG
 SP: SVG


Slide 43

Slide 43 text

相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. デザインが改定され、多言語・読み上げ・レスポンシブに対応


Slide 44

Slide 44 text

[/flowページ] コンポーネントコーディング · Issue #659 · tokyo-metropolitan-gov/covid19 


Slide 45

Slide 45 text

PC: HTML


Slide 46

Slide 46 text

SP: HTML


Slide 47

Slide 47 text

相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. （上記3をユーザビリティテスト、見出しを追加しさらに改善）
 5. デザインが改定され、多言語・読み上げ・レスポンシブに対応


Slide 48

Slide 48 text

[/flow] PC版で矢印の示す順番にコンテンツがスクリーンリーダーで読み上げられない · Issue #1440 · tokyo-metropolitan-gov/covid19 


Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. デザインが改定され、多言語・読み上げ・レスポンシブに対応


Slide 51

Slide 51 text

aria-hiddenを指定して
 スクリーンリーダーから隠す
 PCかつスクリーンリーダーでアクセス 
 SP版のHTMLをvisually-hidden化して 
 見た目上は隠す


Slide 52

Slide 52 text

相談フローの4段階進化
 1. パワポ絵から起こしたSVG、多言語や読み上げで難あり
 2. HTMLになり多言語対応できたが、読み上げ順に難あり
 3. スクリーンリーダーに対し常にスマホ版を提示し読み上げ順を改善
 4. デザインが改定され、多言語・読み上げ・レスポンシブに対応


Slide 53

Slide 53 text

[/flow][全面改修]ページマークアップ · Issue #3315 · tokyo-metropolitan-gov/covid19 


Slide 54

Slide 54 text

PC: HTML


Slide 55

Slide 55 text

SP: HTML


Slide 56

Slide 56 text

ポイント
 ● HTMLも線形、音声も線形である。ゆえにスクリーンリーダーには
 線形に読み上げて意味がわかる順序が必要
 ● スマホ版では要素を縦に積みがちゆえに、線形な順序である可能性が高く
 スクリーンリーダーでも理解しやすい
 ● 有りモノで上手くまかなえるか考えるのも1つの手段。
 永続性・メンテ性・美しさと「いま伝わるか」は天秤に掛けて考える


Slide 57

Slide 57 text

グラフの4段階進化


Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

グラフの4段階進化
 1. 見た目にグラフはあるが、
 スクリーンリーダーでは存在が不明
 2. スクリーンリーダーでも
 グラフの存在はわかるが、内容は不明
 3. グラフとは別に隠しテーブルがあり、
 スクリーンリーダーで内容がわかる
 4. グラフとは別に見えるテーブルがあり、
 より多くの人が内容を理解できる


Slide 60

Slide 60 text

グラフにaria-labelを付与する · Issue #2448 · tokyo-metropolitan-gov/covid19 


Slide 61

Slide 61 text

table提供やcsv提供による、グラフのアクセシビリティへの過渡的な対応 · Issue #1091 · tokyo-metropolitan-gov/covid19 


Slide 62

Slide 62 text

スクリーンリーダー向け隠しtableと通常時のグラフを表示切り替えできるようにしたい · Issue #2068 · tokyo-metropolitan-gov/covid19 


Slide 63

Slide 63 text

オープンソースで作る東京都新型コロナウイルス対策サイト。透明性が求められるサイト構築の舞台裏とは 


Slide 64

Slide 64 text

Essential for Some, Useful for All
 今村：「障がいを持っていなかったとしても、グラフを読めない人もいるのでは？」と いうコントリビューターからの提案を受け、数字が羅列するテーブルを追加で表示さ せることにしました。
 一見グラフの方が直感的にわかりやすい気がしますが、実は今この数字がかなり 見られていて、SNSなどでスクショされてツイートされるのはグラフより表の方が多い んです。


Slide 65

Slide 65 text

ポイント
 ● 「グラフがある」とわかるだけでも取り得る選択肢は増える、
 アクセシブルになっている
 ● 隠しテーブルでも情報を取得できる人は増える。
 グラフ自体がアクセシブルになればもちろん最高だが、
 メインコンテンツがアクセス不能な期間を最短にするのが先決
 ● グラフ→テーブルといった別の表現による提供は、
 特定の人（全盲、弱視、色弱等）をアクセス可能にするだけでなく、
 より多くの人にとっての理解のチャンスを増やすことにも繋がる


Slide 66

Slide 66 text

視覚障害当事者が
 スクリーンリーダーで使ってみる会


Slide 67

Slide 67 text

“目が見えないエンジニア“として、多様性ある社会をつくりたい。情報アクセシビリティーの向上に取り組む中根雅文さん 


Slide 68

Slide 68 text

東京都コロナ対策サイトのスクリーンリーダー・ユーザビリティテスト台本 


Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

東京都 新型コロナウイルス感染症対策サイトをスクリーン・リーダーで使ってみる会 実況まとめ 


Slide 71

Slide 71 text

テスト結果サマリ：OK
 ● サイト全体の構成：ナビゲーション類から概ね理解できる
 ● シンプルな情報ページ：見出しと本文とリンクなので問題なし
 ● グラフ内容の理解：テーブルによって行と列と数字から構成を類推できる。
 ※ただし、これらのデータから何を示唆として受け取るべきかは難しい


Slide 72

Slide 72 text

テスト結果サマリ：要改善
 ● グラフ周りの構成：理解できるが、要素の出現順は改善余地あり
 ● 相談フローの理解：テキストは順序通り読めるが、見出しがないので
 包含関係を理解しにくい。類推はできるが自信は持てない
 ● 問い合わせの手段：電話しかないので改善の余地あり


Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

グラフのパネルの要素出現順の検討（人数・件数と切り替えボタンとグラフ） · Issue #3115 · tokyo-metropolitan-gov/covid19 


Slide 75

Slide 75 text

テスト結果サマリ：要改善
 ● グラフ周りの構成：理解できるが、要素の出現順は改善余地あり
 ● 相談フローの理解：テキストは順序通り読めるが、見出しがないので
 包含関係を理解しにくい。類推はできるが自信は持てない
 ● 問い合わせの手段：電話しかないので改善の余地あり


Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

flowページのSP版HTMLにh4見出しを立てる · Issue #3111 · tokyo-metropolitan-gov/covid19 


Slide 78

Slide 78 text

テスト結果サマリ：要改善
 ● グラフ周りの構成：理解できるが、要素の出現順は改善余地あり
 ● 相談フローの理解：テキストは順序通り読めるが、見出しがないので
 包含関係を理解しにくい。類推はできるが自信は持てない
 ● 問い合わせの手段：電話しかないので改善の余地あり


Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

電話以外のお問い合わせ方法の検討 · Issue #3113 · tokyo-metropolitan-gov/covid19 


Slide 81

Slide 81 text

グラフの色を識別可能なものにする


Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

色弱者 用にチャートで使われる色を変更 · Issue #740 · tokyo-metropolitan-gov/covid19 


Slide 84

Slide 84 text

チャートのカラーをアクセシビリティを考慮した色へ変更する · Issue #1172 · tokyo-metropolitan-gov/covid19 


Slide 85

Slide 85 text

拡張性と基準とトーン&マナーから導かれる要件
 ● 4段階までのデータ系列を想定する：
 それぞれを塗りで見分けられ、白背景とも見分けられること 
 ● 塗りの上に文字が乗ることを想定する：
 塗り色と上に載る文字とのコントラストを4.5:1確保すること 
 ● 塗り色は凡例の文字色としても使用を想定する：
 白背景と凡例文字色とのコントラストを4.5:1確保すること 
 ● 「躍動、繁栄、潤い、安らぎ」のイメージを踏襲：
 生死を連想させる色（≒黒）、危険を煽るような色は回避する 
 ● それぞれの数値を正しく公平に伝える：
 薄い塗り＋囲み、一部模様付き、一部異なる色相などは 
 部分強調の意図が出るおそれがあるので回避する 
 🤯

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

６　たいへん見分けやすい　とても使いやすい
 ５　見分けやすい　使いやすい
 ４　つねに見分けられる　使える
 ３　見分けにくいこともある　使えるが惜しい
 ２　見分けにくい　やめてほしい
 １　見分けられない　ぜったいにやめてください


Slide 88

Slide 88 text

チャートのカラーについての再考、パターンの提案、アンケート作成を行う · Issue #2364 · tokyo-metropolitan-gov/covid19 


Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

なぜ紆余曲折があったか
 1. 見分けにくいという声を受け、色の調整を開始した
 2. 同時にグラフの拡張を見据え、組み合わせる要素や段階を増やした
 3. 要素や段階が増えると、見分けられる表現は限定されていく
 4. 避けたい表現があり、そことの競合回避の優先度が高かった
 5. 複雑な状態を前提とした配色は、シンプルなグラフでも有効とは限らない
 6. クリアできる表現の方向性は、色弱や弱視当事者でなければわかりにくい


Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

ポイント
 ● そもそもグラフを複雑にしないようにする
 ● グラフの段階や要素が増えるほど、誰にとってもわかりにくくなる
 ● コントラストも模様も色相も万能ではなく、面積や配置次第で
 どうやっても見分けられないケースが出てくる
 ● シンプルなグラフを維持し、なるべくコントラストのみで
 差をつけるのがベターなケースが多そう
 ● 色弱や弱視の当事者に見てもらうのは絶対やったほうがよい。
 シミュレーターは目安でしかない


Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

やさしい日本語におけるruby実装


Slide 96

Slide 96 text

「やさしい日本語」とは日本語を習得していない子供や外国人にも分かりやすいよう、 
 簡易な表現を使ったり漢字に読み仮名をふるなど、表現をやさしくした日本語。 


Slide 97

Slide 97 text

rubyタグ対応の開始
 ● 「単語（よみ）」の連続が読みにくいという意見があり実装をスタート
 ● 言語切り替えで「やさしい日本語」が選択された場合に、通常の翻訳テキスト（span タグ）ではなくルビ付きテキスト（rubyタグ）を表示するコンポーネントを開発
 ● 翻訳テキストをルビ付きテキストに変換するための書式を整備
 ● 影響範囲が広く、その他のIssue対応への影響を避けるため専用の検証環境とブラ ンチを準備
 ● ページごとに担当をわけ概ね実装は終了したが、リリースに至らず


Slide 98

Slide 98 text

[ruby] やさしい日本語 のルビタグ対応· Issue #3116 · tokyo-metropolitan-gov/covid19 


Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

ruby実装の課題
 1. サイトの開発が活発で、多数のテキスト指定個所をルビ用コンポーネントに置き換えるにあたり コンフリクトが多数発生。
 2. ルビにより表示される要素の高さが変わり、レイアウトの崩れが各所発生したこと。また、最新 のレイアウトの適応や確認に追いつけなくなっていった。 
 3. 言語切り替えの際にブラウザ側ですべてのテキストの置き換えを行うため、ルビへの変換もそ のタイミングで行う必要があり、パフォーマンス面での懸念があったこと。 
 パフォーマンス面については、体感的には多少遅いものの許容範囲で動いているようでしたがス マートフォンなどでの検証の手もたりず、そのままとなっています。 
 
 初期設計時にうまく取り込むことで、より簡単に対応できる可能性がありますので、次の課題として記 憶しておきたい。


Slide 101

Slide 101 text

他にも数十件のIssue


Slide 102

Slide 102 text

他にも数十件のIssue
 ● HTML文法ミス等の修正、不適切なWAI-ARIAの指定を修正
 ● spanやdivを妥当な要素に変更、ランドマークやrole属性の追加
 ● 見出しレベルの修正、行列見出し(th)の追加
 ● 画像やアイコンにテキストラベル追加
 ● キーボードで操作可能に、フォーカス順の修正、フォーカスの可視化
 ● テキスト色のコントラスト改善


Slide 103

Slide 103 text

Issues · tokyo-metropolitan-gov/covid19 


Slide 104

Slide 104 text

まとめと、これから


Slide 105

Slide 105 text

「前代未聞の現場」からの示唆まとめ
 ● 『シビックテックとアクセシビリティはズッ友』
 前提にあればすぐ協力し合える。有識者と女将を確保しよう
 ● 前提が共有できる環境ならば自動チェックも有効そう。
 ＋なるべく初期に、荒くても網羅的にチェックするのは有効そう
 ● スピード重視でも、少しずつアクセスの選択肢は増やせる。
 オープンに議論することで対応のアイデアは広がる
 ● アクセシビリティを必要とする人に協力を仰ごう。
 テストしてもらって「使える」とわかることがモチベになる
 ● アクセシビリティ改善はパッと取り組めるものもたくさん。
 OSSコントリビュートの入り口にぜひ！


Slide 106

Slide 106 text

俺たちの戦いはこれからだ！
 ● まだIssueはいくつか残っています、そして…
 ● いまこの瞬間においてどの程度アクセシブルなのか？再試験が必要そう
 ● アクセシビリティを継続的に維持するにはどうしたら良いか？
 ● 有識者や女将や改善PR出してみる人を増やすにはどうしたら良いか？
 ● 各地域ごとの対策サイトをアクセシブルするにはどうしたらいいか？
 ● 今後新しく何かが生まれたり広まったりするときに、
 より効率よくアクセシビリティを高めていくにはどうしたら良いか？


Slide 107

Slide 107 text

ありがとうございました
 @magi1125, @shunito 
 Special Thanks
 @forestgtree

Slide 108

Slide 108 text

Code of Conduct (行動規約) と参加時のお願い
 ● サミットは参加者・セッション登壇者・スタッフみ んなでつくるイベントです 
 
 ● 誰もが参加しやすいサミットを「ともに考え、と もにつくる」ことを目指しています 
 
 ● お互い敬意を持って、価値観を認め合いなが ら、建設的に意見を交わしましょう 
 
 ● それぞれが文化的および個人的なバックグラ ウンドがあることを理解するように努めましょう 
 ● Github - Code of Conduct 
 https://github.com/codeforjapan/codeofcond uct
 ● HackMD - Code of Conduct https://hackmd.io/@codeforjapan/CodeOfCon duct 
 ● オンライン版の注意点（抜粋） 
 ○ それぞれが文化的および個人的なバックグラウンド があることを理解するように努めましょう 
 ● 困った時は…
 ○ メール: CoC@code4japan.org 
 ○ Slack: jinnouchi ・ takesada_c4j
 #cfjsummit


Slide 109

Slide 109 text

Code for Japan Summit 2020 
 特別協賛
 
 協賛
 
 
 
 
 
 協力
 #cfjsummit


Slide 110

Slide 110 text

Code of Conduct (行動規約) と参加時のお願い
 ● サミットは参加者・セッション登壇者・スタッフみ んなでつくるイベントです 
 
 ● 誰もが参加しやすいサミットを「ともに考え、と もにつくる」ことを目指しています 
 
 ● お互い敬意を持って、価値観を認め合いなが ら、建設的に意見を交わしましょう 
 
 ● それぞれが文化的および個人的なバックグラ ウンドがあることを理解するように努めましょう 
 ● Github - Code of Conduct 
 https://github.com/codeforjapan/codeofcond uct
 ● HackMD - Code of Conduct https://hackmd.io/@codeforjapan/CodeOfCon duct 
 ● オンライン版の注意点（抜粋） 
 ○ それぞれが文化的および個人的なバックグラウンド があることを理解するように努めましょう 
 ● 困った時は…
 ○ メール: CoC@code4japan.org 
 ○ Slack: jinnouchi ・ takesada_c4j
 #cfjsummit


Slide 111

Slide 111 text

問合せ・連絡先はこちら
 あなたがハラスメントを受けている場合、あるいは、
 誰かがハラスメントを受けていることに気づいた場合、
 その他の懸念がある場合は、すぐに各トラック常駐のスタッフ
 またはCode for Japan担当者に連絡してください。
 メール: CoC@code4japan.org 
 Slack: jinnouchi / takesada_c4j
 
 
 #cfjsummit