アクセシビリティの祭典 2019
https://accfes.com/2019/images/index/mainvisual.jpg
登壇者
元ミュージシャン
趣味は語学学習
英語、中国語、ロシア語、手話など
字幕だけの話はあまりない
インクルーシブ対応の中での「字幕」
今日のUDトーク配信
誤認識の修正をしてる
修正するのはまだまだ人間の仕事
全文記録されてる
UDトーク
導入件数 400団体
大学施設での導入
発達障害へのサポート
ダウンロード 43万本
最近は議事録作成や自動翻訳への活用が検討
バリアフリー対応
視覚聴覚バリアフリー
多言語バリアフリー
世代間バリアフリー
60フレーム
Episonのウェアグループ
開発のきっかけ
耳が聞こえない人との出会い
相手に伝えるスキルやツールが足りないのは自分？
音声認識＋アプリでスキル不足を補えるかどうか
もともとは趣味だった
インクルーシブって何？
Exclusion
マジョリティのグループがメイン
Separation
盲学校、ろう学校のグループ
Integration
なかよし学級というグループ
Inclusion <= これ
色んな特性が一緒の空間にいる
社会課題とはコミュニケーション課題
隣の人とコミュニケーションできる？
テクノロジーが解決しうる？
世の中にするために
マニュアル通りのことわりしか出来ない
主催者側が設備として配慮や対応がある
サービスの提供なのでむしろ「ご利用ありがとうございます」となる
0か1ではなく0.5か0.6でも目指そう
完璧ではないところからできるのをやるのもインクルーシブな考え方
シビックテックと呼ばれる活動をしている団体
Civic + Technology
みんなのテクノロジー
オープンデータと呼ばれるデータを活用して地域課題を解決
それにこだわらないIT×地域課題の解決を目指す
多種多様な人が集まるコミュニティの楽しさ
活動内容
情報アクセシビリティーサポート
最近の成人式は外人も居るので多言語対応が求められている
オープンデータを活用した住民サービスを企画・提案・開発
多言語カフェというイベント
活動内容は全文ログや資料を公開
メンバー全員に発表の機会をもってもらう
自己紹介をどうやるか「方法」を考える
ZOOMと併用して字幕付き動画配信を行える
アクセシビリティとは？
体験と想像力
机上の空論じゃ駄目
もし自分が○○だったら？を想像してみる
シオノギ製薬
コミュニケーションバリアフリーとは？
耳の聞こえない人
日本で2000万人
国民の6人に1人
世界で4億7000万
困りごとが多いと障壁ができてしまう
生きづらい世の中を変えたい
コミュニケーションバリアフリーを2015/10に設立
最初はあまり積極性はなかったが
方向性が徐々に浸透していった
バリアを感じている人はいないか？
CBF-PJの使命は、最もよい薬をすべての患者さんに届けること 活動の３本柱
医療従事者
医療向けセミナーを行う
患者
漫画で説明した服薬説明ポスター
聴覚障害の学生向けに働き方講座を実施
CM放映を字幕付き
耳マーク、補助犬ステッカーを配布
従業員
UDトークを使う
最終的なゴールは医療・製薬以外でも社会全体をバリアフリーにする
意見・感想
医療機関としてコミュニケーションを備える必要性
難聴者が聞き返しているのは、大きな勇気をもって言っていたことに気づいた
聞こえについて知らないことが多かった・誤解していた
東京都の心のバリアフリーサポート企業
2019/3認定
お互いへの質問会
原「いつUDトークは必要がなくなるのだろうか？」
4年前の質問
青木
個人が頑張らなくてもいいような未来になればいいな
障害者の自立支援に疑問視
歩み寄りで解決できることは大いにある
必要なくなったら別のアプリを作ろうかな
もう少し簡易的なアプリを作ってみてる
原
4〜5年先を見据えたアプリになってる
そういうコンセプトを持ててるのがすごい
大きな会社に吸収される危機感は？
青木
ほぼ１人の会社
奥さんが経理
小さすぎると何もかまってもらえない
助成金なしで自分の興味から作ってみた
身近な人に使ってもらえると最高
青木「音声認識でどう生活が変わったか？」
原
テレビで字幕が出るようになった
生放送とかにはなかった
それまでは自分だけが透明人間みたいになってた
リアルタイム字幕のおかでげ仕事も含めた生活が一体感が出てきた
周りが何を言ってるか分かる
脳が活性化される感じになる
置いてけぼりにされなくてよくなった
KYという扱い・レッテルを貼られた
青木
音声認識率も低い場合、勘違いしたコミュニケーションになりうる
聞こえにくい人同士のコミュニケーションをどうにかしたい
手話はコミュニケーションツールとして最高
スマホ・筆談などもある
音声の向上はデータの収集
音声認識は「確認ができる」
発音のチェックができる
簡単な手話を覚えよう
ミニ手話講座
こんにちは！
ありがとう！
うれしい！
おもしろい！
https://1.bp.blogspot.com/-4uJD9IeWkK4/XKGqmZ_kWqI/AAAAAAABSK4/hPvBrCPWRkgX-ju0wndp8VxpS9Z49TBPgCLcBGAs/s450/gengou_syuwa.png
ユーザー（北畠かずと君）
兵庫県立視覚特別支援のも全盲高校生
家族が無料のスクリーンリーダーを見つける
当時小学三年生
ようやく日本語の入力と出力ができるように
あれ？と思った現象を本日紹介
オープンソースのWindows対応スクリーンリーダー
オーストラリアのNPOと世界のコミュニティ
３ヶ月毎にリリース
日本語チーム
日本語版の配布
本家版の開発と翻訳
フォーカスハイライトアドオン
利用者・技術者・開発者に対する普及啓発
11月 サイトワールド
NVDAチートシート配布中
質問１
神戸新聞 NEXT
タイトルをクリックで記事へと遷移
「リンク」の箇所がクリック可能と呼ばれる
慣れないと何のこと言ってるの？となる
エンターキーを押すとページが変わる
何も変わらないこともある
クリック可能というのがわかりにくいという事象
リンクだと解釈されていない
NVDAの実力であり、悲鳴
Web A11yの役割分担
OSとアプリの上にまたげる役割が「スクリーンリーダー」
分断された役割もまたげる変化に強いものを作る必要がある
フォーカスモード
キーイベントはブラウザへ映る
上下矢印でスクロールするのと同じ
普通の機能
ブラウズモード
NVDAがブラウザを制御するモード
どこを呼んでいるか？を独自に管理する
ナビゲータオブジェクト
上下の矢印キーで読み取り場所の移動
Tab, スペース, Enterはフォーカスモードと同じ機能
自動的にフォーカスモードに切り替わる場合もある
１文字ナビゲーション
見出しジャンプ
要素リスト
Firefoxは「リンク」だったが
Chromeは「クリック可能」となる
LayoutTable
aタグをdisplay:tableにしている
DOMのclickイベント
マウスとタップに反応
NVDAでは
ロールがあればクリック可能を省略してリンクなどと読む
CSSによってリンクでないのをChromeが解釈
書式とドキュメント情報で報告をオフにできる
<a role="link">で回避もできる…ひねくれてるが
質問2
ツイキャス
IE11でNVDAを見る
上下カーソルでは見つけられない
「埋め込みオブジェクト」から抜けることが出来ない
タブキーだと抜けることができない
タブで移動すると内容は変わるが
ぐるぐると内容を繰り返してしまう
対象
Java Applet
Flash Player
HTML5 Video
MediaElements.js
ショートカットキーで「埋め込みオブジェクト」から抜けられる
実際はアンケート画面しか見えないが
いろんなボタンが隠されているらしい
保存、音声等
IE + Flash + スクリーンリーダーは配慮されている
スクリーンリーダーユーザーにしか見えないものがある
これ以上の対応は無償対応しんどいです…
質問3
日本語表現インフォ
辞書検索サイト
Webサイト広告
上下で移動するたびに「追加マークあり」と呼ばれる
答え：校閲者による更新の報告をオフに
挿入マークありになるかも
追加マークあり
<ins>要素
追加されたテキストの範囲を表す
<del>は削除要素
同じ種類の情報は同じように読み上げる
どこで使われた？
Microsoft Wordの「変更履歴の記録」
追加マークなるものが出る
マークの境目で報告する
FirefoxとGitHubで開発者が議論
IAccessible2で対応
今後は「挿入マークあり」にすべき？
質問4
検索を実行
ブラウズモードに切り替わる
NVDAで検索
検索フィルタ、リンク、検索フィルタ…と読まれる
内容を読むことが出来ない
ブラウズモードに切り替えるとページが切り替わったことが分かる
NVDA+Tで現在のウィンドウタイトルを報告する
答え：慣れましょう
入力してENterを押すとページ遷移するように見える
タイトルとURLは更新される
検証する意義
開発者も利用者も無料
やってみないとわからない！
他のスクリーンリーダーに対応させる準備になる
開発者と利用者がWebの概念を共有する手段
アクセシビリティのこれから
頻繁にリリースされるアプリやサービス
頑張ってもすぐ壊れる？
仕事の中に組み込まれていくことが理想
PowerPointの自動代替テキスト
Acrobatのリリース前レポート
当事者と語る「アクセシビリティとAI」の最新事情
登壇者
各社の取り組み
アイ・コラボレーション
グループについて
滋賀県：４箇所
サテライト：京都１箇所
グループ：神戸、三重２箇所
合計100名の身体障害者が働いてる
主にウェブサイト制作・システム開発が得意な事業所
ユニバーサルデザインの対応・検証
実際の様子（動画）
アクセシビリティの祭典を見てもらう
鉛筆でキーボード入力する男性
トラックボールで操作
なにかのはずみでトップページに戻ってしまった
車椅子の男性
スクリーンキーボードで操作
仕事の様子
脳性麻痺の男性
ユニバーサルツーリズムの仕事
ホームページの更新をしている
ストレッチャーで寝ながら指マウスで仕事
イラストレーターを操作している
繰り返し操作で花を作れる
ICTで便利になる
ネットミーティング
実績
インクルーシブな空間
アクセシビリティの祭典(本イべント)
だれでもナビ
AIデジタルサイネージ
開発イベント
わたし達の未来をつくる「アイデアソン・ハッカソン」
【最優秀賞】メモメール
【優秀賞】靴センシング
【アイデア賞】IoTバス降車サポート
【フロンティア賞】「AR音声案内システム」
https://www.youtube.com/watch?v=e5XlibX3LYk
マイクロソフト
Seeing AI
3年前の紹介ビデオ
2年前のiPhoneのアプリとしてリリース
1年前からAppStoreから取れるように
日本語版ももうすぐ
仕組み
カメラで撮影
画像認識
Coginitive Services Computer Vision API
インターネットに送信
Cognitive Services
使った分で請求になるのでつかってみてほしい
Microsoft Office Lens | PDF Scan
イマーシブリーダー
キャプションや字幕、翻訳
Word、Outlookなどの翻訳機能
Presentation Translator/字幕機能
プレゼンで話している言葉を自動翻訳
字幕表示
Translator アプリ
音声、キーボード入力、写真から
翻訳・テキスト表示
1：1や多数：1で翻訳・テキスト表示
プレゼンへの参加も可能
わたしのバス
視覚障害者がバスの状況が分かるスマートソリューション
視線制御機能など
AIはどこまで進化するのか？
究極な体験みたいなのはできないが、いろいろできるようになってきてる
AI for Microsoft
WebAIM Million
59,653,607件のエラー
59.6件/1ページ
97.8%のホームページでWCAGの不適合を検出
24.4%のあいまいなリンクラベル
こちらをクリック、more、続き…など
2,099,665件ものレイアウトテーブルを検出
データテーブルは113737件
改善の余地はまだまだたくさんある
キーワード
品質への社会的要求
ビヨンセのサイト
2018年は2285件
2019年1~4月で前年より増加比傾向あり
対象
小売
フードサービス
旅行など
増加の背景
ウェブユーザーの増加・多様化
必要不可欠なインフラ／社会基盤
QOL向上の為に不可欠
各国法整備
欧州アクセシビリティ法
日本
情報アクセシビリティ＝Webも含まれる
東京都10月条例
民間事業者に対しても合理的配慮を義務化
製作と法律に関して
しょうがなくやるもの？
発想の転換をしてみる
PL法、食品安全、建築基準などの品質基準
当たり前な品質基準とするならあってもいい？
その上でクリエイティブをやっていこう
アクセシビリティ×UXデザイン
狭い意味ではなく、あらゆる人のUXに寄与するデザインを
同等の体験を提供する
状況を考慮する
一貫性を保つ
利用者に制御させる
選択肢を提供する
コンテンツの優先順位を付ける
価値を付加する
ユーザーと体験してみるイベント
ライブユーザーテスト
AccSell meetup
Yahoo!での実施
弁護士ドットコムの取り組み
HCDサイクル ISO9241-210
ユーザーテストは
利用状況の把握と明確化
要求事項に対する設計の評価
デザインシステムにおける解決
要求事項を満たす設計による解決策
「認知パターン」
背景色
フォーカスの可視化
可読性
認知ノイズにならない控えめな動き
「機能パターン」
モジュール・コンポーネント
ボタン
リンク
タブ
フォーム要素
フィードバックメッセージ
カード
Form Design Patterns
2018/5勧告
新たな達成基準を追加（意訳）
ロービジョン
文字以外のコントラスト要求
画面拡大しても縦か横のどちらかでよめるようにしよう
任意で行間や文字感の感覚調整しても、コンテンツや機能が欠損しないように
ユーザーの意図に反したマウスオーバー効果やマウスアウト効果が生じないようにする
モバイル
デバイスの特定の向きを共用しないようにしよう
特定のジェスチャを強要しない
特定の動きを強要しない（振る、傾けるなど）
UIコンポーネントに触れただけで意図せず機能を引き起こさないようにしよう
タッチターゲット十分な大きさ
44×44 CSSピクセル
音声入力
キーボードショートカットの機能を偶発しないように
視覚的なラベルは音声入力でも操作できるように
認知／学習
パララックスはは眩暈などを引き起こす恐れがあるため、無効化できるように
アラートをスクリーンリーダーでも認識できるように
role=“alert”
aria-live=“assertive”
タイム・アウトしてデータが損失されそうなとき、残り時間を提示しましょう
まとめ
あるユーザーに対して、障害などの条件故にその人の目的達成やユーザー体験が妨げられてはいけない
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
ウェブが優れているところは、その広い汎用性である。
障害があるか否かに関わらず、誰でもアクセスできるということは、ウェブにとって不可欠な特徴なのである。
Tim Berners-Lee, W3C Director and inventor of the World Wide Web スペシャルトーク「企業とアクセシビリティ」
MISSION
スモールビジネスを、世界の主役に。
コンセプト
アイデアやパッションやスキルが有れば誰でもビジネスを強くできるプラットフォーム
日本の企業規模の割合
中小企業 99.7%
ここを強くしたい
プロダクト
会社設立
会計
人事労務
アクセシビリティに取り組む理由
アイデアやパッションやスキルが有れば誰でもビジネスを強くできるプラットフォーム
あらゆる人がアクセスできるようにする
やらない理由がない
QAとは？
品質保証のこと
Quality Assurance
機能、デザインは一般的に実施されている
アクセシビリティの品質保証をプロセスに取り組む
チーム構成
やっていきワーキンググループ
CAO
プロセス
強豪の２人がチェックする
XD時点でコメントする
コーディング時に検証
レビューする時に確認方法をしっかり書く
優先度低いのは日常的な業務で
フォントおじさん
インクルーシブな世界と意外と知らないフォントの世界
役割？
情報を正確に伝えるインターフェース
読みやすさ
わかりやすさ
Helvetica
Frutiger
ぼかしてみるとFrutigerが見やすい
日本でも使用されつつある
明朝体を看板に使うのはまずない
ゴシック体がメイン
伝わりやすさ
古印体は使い所でコンテキストでこわくなる
はんこは怖くない
書体がどういう属性なのか？というのが欲しい
情報の重み付け
パッとみたときわかる
Webフォント講座
昔は画像にしていた
Webフォントはシステムフォントのそれと同じ
導入事例
小田原市公式ホームページ
マシンリーダブルなテキスト情報とデザイン性の確保
必要に応じて使おう
かっこ枠組みで文字詰めができるようになってきた
今まではdivやspanでletter-spacingしていた
まとめ
文字は文字でいてください
フォントは企業の顔であり、ブランディングの主人公なのです
フォントは情報を正確に伝えるための重要なUI/UX
より多くの方がAlexaを利用できるために
1. 画面つきEcho端末の登場
従来の音声に加えて、以下が可能になった:
Alexaが音声で提供する情報をグラフィックで可視化
Alexaの発話を文字で情報提供(字幕)
発話指示に代わる画面ジェスチャ, キーボード/マウスでの入力
Alexaコミュニケーション(ビデオ通話)による手話通話
Firefox または Silk によるWeb利用(Echo Showのみ)
同時に、Alexaスキルが出力する視覚情報や、
視覚が必要な入力に対する補完が必要となった
この補完が「ユーザー補助」
2. 画面付きEcho端末のユーザー補助機能
視覚をサポートする機能
拡大鏡
画面拡大: 指1本でトリプルタップ
画面移動: 開いた2本指で拡大画面をドラッグする
拡大率変更: 2本指で画面をピンチインまたはピンチアウト
一時的な画面拡大: 1本指で画面をトリプルタップ
色の反転
黒背景に白フォントが、白背景に黒いフォントに変更
「パフォーマンスが低下する場合がある」
「一部のビデオが正常に表示されなくなる」
スキルの背景によっては、コントラストが不足する場合も
色の補正
色覚異常に合わせて画面の色を補正
2型3色覚(赤緑)、1型3色覚(赤緑)、3型3色覚(青黄)
「一部のビデオが正常に表示されなくなる」
VoiceViewスクリーンリーダー
Fire OS向けのスクリーンリーダー
画面ジェスチャで仮想カーソルを移動させてアイテムを選択し
文字を読み上げたりUIを操作する
日本語変換の詳細読みやWebブラウザの読み上げにも対応
ジェスチャでのオン／オフ
オンにする: マイク/カメラ ボタンを長押し。
音が鳴ったら、2本の指を(やや離して)画面に置いたまま、5秒間待つ。
オフにする: マイク/カメラボタンを長押し。
音が鳴ったら、1本指で画面をダブルタップし、5秒間長押し。
Echo Showでマイク/カメラボタンは、画面を正面から見て端末上部の一番左にあるボタン。普段はミュートに利用。
ヘルプに記載のない情報
ジェスチャを使うと、VoiceViewで端末のセットアップも可能
聴覚をサポートする機能
字幕サポート / Alexa字幕サポート
タップでAlexa
Bluetoothキーボード/マウス対応
音声なしでコミュニケーション
3. Alexaスキルの開発者が意識するアクセシビリティ
『Alexaデザインガイド』の「アクセシビリティ」
視覚的な情報提供に依存していないか(音声でも利用できるか)
色のコントラスト(テキスト、背景)
色反転のテスト、色の補正のテストへの対応
読み上げ順序
世界中の文字が読めない人に音声で情報を届けるAccessible Codeの誕生まで
多言語のウェブサイト制作
QRコードを通じて印刷物から文字情報を取得できる
ゴール
世界中の視覚障害者の得られる情報量を大幅に増やしていこう
もともとのはじまり
QR Translatorについて
スマホページに登録された設定言語で表示される
一部の観光地の看板、商品名、パッケージ、自販機
京都伏見稲荷大社の音声案内
スマートフォンの利用者は増えてきている
音声化ができるようになってきた
しかし印刷の文字情報は簡単に得られない
QRコードが付与されていれば読めるのでは？
実証試験
QRコードの読み取りは98%の成功率
20cm程度話すと読み取ることができると伝える
伝える前は5割程度
立体物は84.6%の成功率
コツと場所さえわかればできる！
Accessibile Codeの開発
規格を満たしたコードに付与するとユニバーサル対応できる
ColorTester
PowerCMS
近頃の日本語は難しくて読めない！
伝えるウェブ
やさしい日本語に置き換わる
ふりがなが振られる
丁寧語よりはっきり伝えるほうが良い
おこしください => 来てください
短く区切る
文末の統一
置き換えはコンテキストへ配慮
凍結も凍る方と口座を止めるほうがある
単語の難易度を可視化する機能
阪神・淡路大震災がきっかけ
外人は「ご参集」ってなんだ？となった
インバウンドが増えてきたことで注目
応用分野
多言語化の前処理（下翻訳）
音声アシスタントへのメッセージの兵役化
字幕の優しい日本語
読み上げ機能もターゲットが変わってきた
外国人、知的障害、独自障害者
情報発信側でカスタム辞書をもつことができる
まとめ
属人性を排除するためには、全社をあげて取り組む
もしくは、経営者自身が取り組む(辞めない人)
ソフトウェアやサービスに落とし込む
経営者の取り組みは、資産計上しなくて良い(会社を強くする源泉)
OSS化やサービス終了で固定資産を圧縮する
登壇者
コーポレートグループ ピープル・デベロップメント統括本部 コーポレートPD本部 採用部 アクイジション2 角谷真一郎 ロービジョン
メディアカンパニー メディア統括本部 プロダクト企画・デザイン本部 企画デザイン3部 デザイン 梶谷匡佑 サービス統括本部 UX・品質推進室 デザイン品質部 UIガイドライン 中野信 天気サービスのユーザビリティテストをしてアクセシビリティ改善した
Yahoo!天気・災害
何故やろうと思ったか？
当事者がサービス開発に関わりたいと相談していた
課題
できるだけ多くの人に情報を届けたい
ロービジョンでも分かりやすい図を提供したい
解決
ユーザビリティテストで課題と当事者の関わりを同時に達成
プロセス
要件定義
テスター募集（角谷）
テスト設計（中野）
テスト実施（角谷）
一括りにしがちなロービジョンも多様性にあふれている
改善点の整理（梶谷）
優先度の高いものは伝わりやすいようにブラッシュアップ
気圧配置がわかるように等圧線を意識
震度5弱以上は強調する
改善（梶谷）
ツールでチェックしてみてもあまり確信はない
今後やりたいこと
テストプロセスの仕組み化
多様な障害のテスト実現
すべてのユーザーの使いにくいことを解消したい
登壇者
アクセシビリティの未来をどう捉えてる？
木達
明るいイメージ
誰でも宇宙に行ける
現実的なイメージが見えてきて暗い
ミヒャエル・エンデ曰く
人類はいずれ金融システムが壊れるか環境が壊れるかのどっちかの二択になる
すごいショックだった
100年以内でも滅ぶ可能性はある議論もある
持田
人口減少がまずいと思ってる
2004が日本の人口ピーク
高齢化率が40%
生産年齢人口は3000万人減る
マーケットが縮む
人類があってナンボができなくなる
日本が先進国から取り残される？
何をやっていったらいいのだろう？
木達
法律の制定
改善法によって正直全然進んでない
建築
ハートビル法、バリアフリー新法
なぜか情報側には罰則はない
情報はインフラ化してるはずなのに…
公共調達の場合は必須化
持田
人間 => ロボットに置き換える
生産年齢人口を増やしていこう
木達
障害には２種類ある
医学モデル
技術である程度解決できそう
社会モデル
「経済合理性に負ける」
法律が必要
しかし法律にぶん投げるのはベターではない
ステークホルダーが必要？
Googleの翻訳
筋ジストロフィーの人を補助
明るい未来に向けて「今」すべきことは？
木達
人類全体に対する分解能があがってきた
１人１人違うニーズがある
ここが本質である
デジタルの力を信じよう
専門家の力を生かしていこう
デジタルであるメリットを活用していこう
情報の流通そのものは大事
持田
AI分野でもアクセシビリティの概念を浸透させていきたい
デバイスが違えどWebの延長・応用のことは抑えていこう
木達
Webブラウザに対する不満
API増やすとかは正直どうでもいい
ユーザーにフィットした機能はブラウザ側がやるべき
やさしい日本語はユーザーエージェント側がやれ
ベンダーさん頑張ってくれ
コンテンツ側でたくさん頑張るのは過渡期
村岡
責任分担ってどうなる？
開発側
使う側
お互いがお互い足りてないという前提