1 of 28

アクセシビリティー研修 for All freeers

　

2 of 28

YouTubeに研修動画をアップロードしました

https://www.youtube.com/watch?v=gm1-xOnR9Z4

​

2

3 of 28

このセッションの目標

  • アクセシビリティーの考え方を知る
  • freeeでのアクセシビリティーに関する取り組みを知る
  • すぐに実践できるアクセシビリティーを意識したアクションを知る

3

4 of 28

アクセシビリティーとは？

　

5 of 28

そもそもアクセシビリティーって？

  • accessibility = access + ability
    • アクセスできる状態
  • 誰もが、ほぼ同じコストで、�ほぼ同じ量の情報を得られ、同じ目標を達成できる
  • accessibility を略して a11y と綴ることがあります
    • aとyの間が11文字なので

5

6 of 28

誰もが、ほぼ同じコストで

  • 誰もが
    • 利用環境
    • 年齢や性別
    • 身体的能力 — 障害の有無
  • ほぼ同じコストで
    • 経済的負担
    • 所要時間
    • 身体的負荷
    • 精神的負荷

6

7 of 28

つまり、アクセシビリティで目指すものは

  • 特定の誰かのためではなく、すべての人を対象にする
  • 特別な専用のものを作るのではなく、同じものを使えるようにする
  • 特定の条件での使いやすさではなく、あらゆる条件で使えることを目指す

​

  • freeeが提供するサービスの品質の、指標のひとつとして捉えてほしい
    • 絶対に完璧になることはないが、高めていけるもの
    • 良いサービスでは高い水準になっているべきもの
    • 「製品がサクサク使える」「サポートの人が親切」みたいなのと同じ

7

8 of 28

ユーザビリティーとアクセシビリティー

  • ユーザビリティーもアクセシビリティーも、「使いやすさ」っぽい概念
  • ユーザビリティーは対象が狭く深い
    • こういう人が
    • こういう時に
    • 最適な方法で
  • アクセシビリティーは対象が浅く広い
    • だれでも
    • どんなときでも
    • いろんな方法で

8

9 of 28

障害者と�アクセシビリティー

　

10 of 28

ここで強調しておきたいこと

  • アクセシビリティーは「障害者や高齢者のためのもの」という説明が�されることがあるが、いろいろな人にとって価値のあること
    • 人は一時的にハンディキャップを抱えることがあるし、�身体的要因以外にも様々な形で製品の利用が困難になることがある
  • とはいえ、障害のあるユーザーが、どういう場所で不便を感じたり、�どうやってそういう困難をカバーしているのかはとても参考になる

10

11 of 28

障害者とICT

障害者もPCやスマホを、必要な場合は支援技術の力も借りながら使っている

  • 上肢障害
    • 細かい操作・マウス操作が困難/不可能
  • 聴覚障害
    • 音声コンテンツの利用が困難/不可能
    • 音による注意喚起が難しい場合が多い
  • 読みが困難な人（ディスレクシア）
  • 色覚多様性・色弱
  • 視覚障害

​

左手に棒状の器具をつけてキーボードを、�右手にパッド状の器具をつけてトラックボールを操作する様子�画像出典:大きな格差、都市と地方に　多様なヘルパーが勤務、当事者スタッフも�◆重度障害、つかんだ自由（３）�https://www.jiji.com/jc/v4?id=202106jstj30001

​

11

12 of 28

色覚特性（色覚多様性・色弱・色盲・色覚異常）

  • 色の見え方は人によって異なる
    • 色のシミュレータを使うと、いろんな色覚特性の見た目を体験できる
  • 赤と緑の区別が付きにくい人は、日本人男性の約5%と言われる
    • X染色体に遺伝子があって伴性遺伝するので、男性に多い
  • 色によって区別をする必要があるようなものの使用が困難なことがある

「肉が網の上で焼かれている写真」「京王線の路線図」を、左端には元の画像、中央と右端にP型とD型の色覚を再現した見え方のものを並べたもの。

肉は手前の一枚だけが生なのだが、P型とD型の見え方では他の肉とほとんど同じように見える。

路線図は「各駅停車（灰色）と急行（青緑色）」「準特急（オレンジ色）と区間急行（黄緑色）」の判別が難しい。

画像は「色のシミュレータ」で作成。路線図は京王電鉄のWebサイト（ https://www.keio.co.jp/train/map/index.html ）より引用

12

13 of 28

視覚障害（弱視・ロービジョン）

  • 視力が低い・光の刺激に弱い・視野が極端に狭いなど、さまざまな障害
  • 画面を拡大したり、配色をカスタマイズしたり、スクリーンリーダーを�使用する人もいる
  • コントラストの低い色使いだと、見えづらかったり、見えない場合もある

色を反転させ、画面に顔を近づけてWebを閲覧している様子

画像出典:ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開

https://webtan.impress.co.jp/e/2019/12/18/34577

​

コントラスト比が高い色の組み合わせ

コントラスト比がほどほどの色の組み合わせ

コントラスト比が低い色の組み合わせ

コントラスト比の「高い」「ほどほど」「低い」組み合わせを並べてあります。

それぞれの文字の読みやすさを比べてみてください。

コントラスト比の低い組み合わせの文字を難なく読める人は、画面と目の間の距離を離してみてください。

13

14 of 28

視覚障害（全盲）

  • 画面を視覚的に捉えることができないため、スクリーンリーダーを�使って、表示内容を音声や点字にして読む
  • スクリーンリーダーでは文字情報しか知覚することができない
  • 複雑なレイアウトや、その上での配置を前提にした説明を理解しづらい
  • マウスやタッチパネルは使用できない

点字ディスプレイを使って画面の情報を読んでいる様子

14

15 of 28

デモ: スクリーン・リーダーってこんな感じ (Windows)

​

​

  • 今回使うのはWindows用でオープンソースのNVDA日本語版
  • 視覚障害者は、デスクトップではWindows、�モバイルではiOSユーザーが多い
  • freeeではNVDA+Google Chromeを標準環境として採用

15

16 of 28

freeeと�アクセシビリティー

　

17 of 28

なぜfreeeはアクセシビリティーに取り組むのか

​

だれもが自由に経営できる

統合型経営プラットフォーム。

​

統合型経営プラットフォームはみんなで使うもの。

だれもが自由に自然体で使えるプロダクトを作っていきたい。

　

18 of 28

アクセシビリティーのガイドライン

  • WCAG (Web Content Accessibility Guidelines) という国際規格がある
    • WCAGの内容がそのままISOやJIS規格にもなっている
    • WCAGの原文 / 日本語訳
  • freeeでは、WCAGをより使いやすく、わかりやすくした�独自の freee アクセシビリティー・ガイドライン を策定している
    • これは公開されていて、他の会社の人たちも参照している
    • 似たようなものに Ameba Accessibility Guidelines がある
  • 上記はWebのガイドラインだが、いろいろなものに応用できる

18

19 of 28

障害の医療モデルと社会モデル

​

​

  • 医療モデル: �医学的な事実に基づいて、その人が障害者であると判断する考え方
  • 社会モデル: �社会環境の不備がその人の不便を生み、その人を障害者にしているとする考え方

社会のアクセシビリティが高ければ、医療モデルで障害者となる人でも、

社会モデルでは障害がない人として生きていくことができる。

​

19

20 of 28

社会モデルで考える：簿記を知らない人の個人事業

  • 青色申告が難しいからメリットが少ない�→社会の仕組みで不便を強いられている
  • 不便の要因を取り除く
    • 青色申告を不要にする→非現実的
    • 簿記を知らなくても青色申告をできるようにする→freee会計
  • 不便を感じている人と社会のギャップを埋めるのが支援技術
  • freee会計も広く考えれば支援技術

20

21 of 28

改めてなぜfreeeはアクセシビリティーに取り組むのか

​

​

  • 「freeeのプロダクトを使う」という文脈において障害者を減らしたい
  • 世界の主役になれる人を1人でも多く
  • 1人が使えないことて失うユーザーは1人だけとは限らない

21

22 of 28

あなたも今日からできる

アクセシビリティーの�ためのアクション

　

23 of 28

アクセシビリティーは、けっして他人事ではない

  • freeersの中には、障害がある人も、日本語が母国語でない人もいる
  • freeeがビジネスをしているスモールビジネスの領域、�それが存在するこの世界は、さらに多様性に満ちている
  • freeeの社内向け、社外向けに何かを発信する・対話する・提供するときは�アクセシビリティーのことを思い出してください
    • ソフトウェアやWebサイトを企画・開発・リリースするとき
    • SNSやブログで発信するとき、そこに載せるコンテンツを作るとき
    • パンフレットやチラシやポスターを作るとき
    • プレゼンテーションのスライドを作るとき
    • 通話・チャット・メール・対面での会話をするとき

23

24 of 28

「あえて共有」はスクショじゃなくてテキストで

  • スクショ（スクリーンショット）は、画像データ
    • 中のテキストを検索したり、機械翻訳にかけたりできない
    • 拡大するとギザギザになってしまって読みづらい
    • もちろんスクリーンリーダーでは読めない
  • テキストで来たものは、テキストの文面をコピー＆ペーストしよう
    • WorkplaceやSlackは半角で `> `を行頭に書くと引用表示になります
    • 雰囲気を伝えるために、スクリーンショットを一緒に載せるのはOK
  • 個別のURLのあるものは、そのURLも併記しよう
    • WorkplaceやSlackの投稿、スライドやドキュメント、SNSの投稿など
    • 元の場所をURLで示すことで、関連する情報にも辿りつきやすい

Twitterのツイートは、「共有 (Share)」から�「ツイートのリンクをコピー(Copy link to Tweet)」で、URLを取得できる

24

25 of 28

色の使い方・選び方に気をつけよう

  • 色の認識は人や状況によって大きく異なる
    • 色を区別するのが得意な人・苦手な人・文化圏による違い
    • 色覚特性（色覚多様性・色盲・色弱・色覚異常）
    • 画面の発色の調整の具合いや、経年劣化による退色
  • 色のシミュレータ で見てみたり、白黒にしてみたりしてみよう
  • 色で区別するのは伝わりづらい。形や言葉を併用しよう
  • 色の濃さ（コントラスト）も大事。特に文字は濃い色でくっきり書こう

小田急線の路線図の拡大画像。

区別しやすい色を選び、色名も記載している�画像出典: 小田急電鉄 https://www.odakyu.jp/rail/

濃い色でくっきりした文字

薄い色でぼんやりした文字

「濃い色でくっきりした文字」と「薄い色でぼんやりした文字」

薄い色の文字は画面から離れると見辛くなる

各項目の名前を引き出し線で表現した円グラフ�画像出典: freee・サイバーエージェント・サイボウズ、 Webアクセシビリティに関する調査結果を公開

https://corp.freee.co.jp/news/web-accessibility.html

25

26 of 28

音声や映像の使い方を考えよう

  • 動画（音声+映像）は、相手に求めるものの多いコミュニケーション
    • 内容を読み取るのに、視覚・聴覚の両方を求められる
    • 動画が流れている間、集中していなければならない
  • いろんなスタイルで視聴する人がいるので配慮しよう
    • ながら聞きで、映像はぜんぜん見ないで聞いている（視覚障害者も？）
    • イヤホンがないので、音は出さず字幕だけ見ている（聴覚障害者も？）
    • BGMの音量が大きかったり歌詞があったりすると話を聞き取れない
    • 動画を観る時間の余裕がない。大事なことはテキストで教えてほしい
  • Google MeetやZoomも 音声 + 映像 によるコミュニケーション
    • 画面共有やカメラの映像に頼った説明をしていると伝わらないかも

26

27 of 28

イギリス内務省によるポスター (Dos and Don’ts)

画像出典:Japanese version of Access Needs Posters

https://github.com/UKHomeOffice/posters/tree/master/accessibility/dos-donts/posters_ja�（書き起こし: https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_ja/accessibility-posters_%20ja.txt）

27

28 of 28

「相手に伝わらないかも」を常に想像しよう

  • 多かれ少なかれ、コミュニケーションには何かしらのロスが伴う
    • 70%くらい伝われば良いほう
    • やり方を間違えると伝わる内容が0%になってしまう
  • 仕事のコミュニケーションの相手は、目の前の人だけではない
    • チームのメンバーもWorkplaceやSlackの投稿を見ている
    • ターゲットとならないユーザーもパンフレットや資料を見ている
    • 数ヶ月後や数年後に、思いもよらない人が見ているかもしれない
  • まずは、身近な人にきちんと伝わるかどうかを想像してみよう
    • freeersの中には、障害がある人も、日本語が母国語でない人もいます

28