持続可能なアクセシビリティのために - 「聞こえる選挙」の事例 #ja11yc

持続可能なアクセシビリティのために 「聞こえる選挙」の事例 2019年7月20日 今野大介 ヤフー株式会社 (C) Yahoo Japan Corporation

7月21日 投票日 https://kikoeru.yahoo.co.jp/ (C) Yahoo Japan Corporation

自己紹介 〜2000年 新聞社勤務 2000年 ヤフー株式会社入社 こんの だいすけ 今野大介 エンジニア （おもにフロントエンド） (C) Yahoo Japan Corporation 2014年 コーポレートサイト アクセシビリティと出会う 2018年 社会貢献系サービス 聞こえる選挙、ネット募金 などを担当

自己紹介 2014年 コーポレートサイトの開発 https://about.yahoo.co.jp/ (C) Yahoo Japan Corporation

自己紹介 2016年 コーポレートサイトのJIS試験結 果を公表 https://about.yahoo.co.jp/info/accessibility/ (C) Yahoo Japan Corporation

自己紹介 2018年 社会貢献系サービスの開発チーム (C) Yahoo Japan Corporation

「聞こえる選挙」のはじまり (C) Yahoo Japan Corporation

「聞こえる選挙」のはじまり 2017年7月 東京都議会議員選挙 2017年10月 衆議院議員総選挙 (C) Yahoo Japan Corporation

1. 全候補者、全政党の 「聞こえる選挙」 がやっていること 選挙公報を収集 2. 記載内容をテキスト化 3. 特設サイトとして掲載 協力：選挙ドットコム (C) Yahoo Japan Corporation

選挙公報の例 過去に実施された地方選挙のもので、今回の参議 院選挙とは関係ありません。 (C) Yahoo Japan Corporation

● 選挙管理委員会が配布 ● 基本的には紙 選挙公報 ● 候補者が提出した原稿 をそのまま印刷 ● 点字版、音声版も ● 2011年からはPDFも (C) Yahoo Japan Corporation

(C) Yahoo Japan Corporation

PDF版 選挙公報の課題 ● 画像データのみ （テキスト情報なし） ● スクリーンリーダーによ る読み上げ不可 (C) Yahoo Japan Corporation

日本の視覚障がい者 (C) Yahoo Japan Corporation ● 全国で約30万人 ● 1級認定だけでも10万人以上 ● うち、点字の読める人は約1割

課題 選挙公報にアクセスできない人たちがいる (C) Yahoo Japan Corporation

まずは多くの人に知ってもらいたい (C) Yahoo Japan Corporation

国内外で11の広告賞を受賞 Spikes Asia 2017 Digital部門CORPORATE SOCIAL RESPONSIBILITYブロンズ受賞 Digital部門WEB SERVICE / WEB APPブロンズ受賞 London International Awards(LIA Billboard) 2017 Digital部門Web Services ブロンズ受賞 Cannes Lions 2018 Reach部門Media/Branded Content & Entertainment/Use of Branded Content created for Digital or Social ショートリスト入り (C) Yahoo Japan Corporation

広告賞を受賞（つづき） ACC TOKYO CREATIVITY AWARDS 2018 ブランデッド・コミュニケーション部門PR ブロンズ受賞 D&AD Awards 2018 Branding部門 ウッドペンシル受賞 AD STARS 2018 Interactive部門 クリスタル４個受賞、ブロンズ2個受賞 PR部門 クリスタル受賞 IPRA 2018 Public Affairs GWA Winners受賞 Clio Awards 2018（外部サイト） BRAND DESIGN部門Direct Marketing シルバー受賞 (C) Yahoo Japan Corporation PRアワード2017 ゴールド受賞 広告電通賞 2018 デジタルメディア広告電通賞 受賞 コードアワード2018 ベスト・イノベーション受賞

「聞こえる選挙」の作り直し (C) Yahoo Japan Corporation

システム設計の見直し 「聞こえる選挙」の作り直し 長く続けていくために やったこと (C) Yahoo Japan Corporation JIS X 8341-3:2016 レベルA準拠 障がい当事者による試験 （ユーザテスト）

選挙データの登録を簡単に システム設計の見直し 手間とコストの削減 (C) Yahoo Japan Corporation → 選挙コンテンツ管理ツール 保守コストの削減 → システム基盤をクラウド環境へ

● 候補者情報 370人分 ○ ○ 取り扱う選挙データ ● ● ● ● ● ● ● プロフィール 選挙公報テキスト書き起こし 選挙区一覧 選挙区の候補者一覧 政党一覧 比例代表候補者一覧 政党選挙公報 得票数 当選／落選 五月雨式に入ってくる。 (C) Yahoo Japan Corporation

選挙データの登録を簡単に 選挙コンテンツ管理ツール (C) Yahoo Japan Corporation ふつうのCRUDアプリケーション

ブラウザから選挙データの登録、編 集、削除 選挙データの登録を簡単に 選挙コンテンツ管理ツール CSVファイルからまとめて登録 コードを書かなくても作業可 ブラウザとスプレッドシートがあればok (C) Yahoo Japan Corporation

● 最初のバージョンはDBなし ● プログラム＋データを一緒に組み 込んでデプロイ なぜ必要だった？ ● データ修正のたびにデプロイ作 業 選挙コンテンツ管理ツール ● ずっとエンジニアが張り付き ● コストかかりすぎ → 長くは続けられない (C) Yahoo Japan Corporation

仮想サーバ上のPHP システム保守コスト削減 システム基盤をクラウド環境へ (C) Yahoo Japan Corporation ↓ Cloud Foundry上のNode.js + Express

JIS X 8341-3:2016 レベルA準拠 (C) Yahoo Japan Corporation

見えづらい 意味がない 利用者からのご意見 2017年公開当時 スクリーンリーダーで操作しにくい 表示と読み上げの内容が違う ※趣旨を変えない程度に編集、抜粋しています。 JIS規格参考にしてみれば？ (C) Yahoo Japan Corporation

見出しレベル おもな修正個所 JIS X 8341-3:2016試験 にもとづく (C) Yahoo Japan Corporation セクショニング要素 ランドマークロール フォーカス順序 （キーボード操作への配慮） 読み上げ順序

見出しレベルの修正 <div> → <h1> <h1> → <h2> (C) Yahoo Japan Corporation (C) Yahoo Japan Corporation

nav要素のランドマークロールとラベル <nav role="navigation" aria-label="候補者選択"> <div> <a href="candidate/3/0/8/30">前の候補者</a> </div> <div> <a href="candidate/3/0/8/32">次の候補者</a> </div> </nav> (C) Yahoo Japan Corporation

キーボード操作への配慮 ● 画面上の並び順とフォーカス順序をあわせる ● 不要な tabindex 属性を削除 <span> <a href="https://www.yahoo.co.jp/" tabindex="100"> <img src="yahoo_logo.svg" alt="Yahoo! JAPAN"> </a> </span> (C) Yahoo Japan Corporation

SVG画像の代替テキストを読み上げ対象に <img src="about_title.svg" alt="選挙には、見えない 格差がある。視覚障がい者にとって" role="img"> ※Safari デスクトップ版 9.1.0以前、iOS版 9.3.1以前のバージョンでVoiceOverを使用したときに、alt属性が読み上げられないこと がある。 (C) Yahoo Japan Corporation

JIS X 8341-3:2016 レベルA準拠 試験結果 https://about.yahoo.co.jp/info/accessibility/201811.html 協力：インフォアクシア (C) Yahoo Japan Corporation ● 利用者にとって使いやすいサー ビスを提供していくため ● サービス提供者としてのモチベー ション維持のため

• https://about.yahoo.co.jp/info/accessibility/201811.html

JIS X 8341-3:2016 試験をした理由 (C) Yahoo Japan Corporation ● 利用者にとって使いやすいサー ビスを提供していくため ● サービス提供者としてのモチベー ション維持のため

障がい当事者による試験 （ユーザテスト） (C) Yahoo Japan Corporation

本当に当事者の役に立つのか？ JIS試験だけではわからないこと ユーザテストの実施 協力：日本盲人会連合 (C) Yahoo Japan Corporation 条件 ● ● ● 全盲者 選挙に行ったことのある人 ふだん使っているデバイスで

ふりがなは不要／必要？ 「前」「現」「新」「元」って？ ユーザテストをやってみて わかったこと （本当はもっとたくさん） 情報がないことの表現 ナビゲーションの問題 デバイスによる違い サイトマップの重要性 (C) Yahoo Japan Corporation

ふりがなが不要なとき／欲しいとき (C) Yahoo Japan Corporation

都道府県名が2回ずつ読まれる リンク ほっかいどう ほっかいどう リンク あおもり あおもり リンク いわて いわて ... (C) Yahoo Japan Corporation

衆議院 小選挙区では みやぎいちく みやぎいっく みやぎにく みやぎにく みやぎさんく みやぎさんく ... (C) Yahoo Japan Corporation

ふりがなを読み上げ対象から外した <div> <div>宮城</div> <div aria-hidden="true">みやぎ</div> </div> (C) Yahoo Japan Corporation

ふりがなが欲しいとき (C) Yahoo Japan Corporation

候補者名は漢字＋ふりがなの両方 点字投票のためには読み方を 知りたい 漢字でどう書くのかも知りたい (C) Yahoo Japan Corporation

ナビゲーションの改善 (C) Yahoo Japan Corporation

リンク先が想像しにくい メニューへ戻るリンクになってい るのだが... (C) Yahoo Japan Corporation

代替テキスト（alt属性）だけでは不十分 <a href="/menu/3"> <img alt="聞こえる" src="logo3a.svg"> <img alt="選挙" src="logo3b.svg"> </a> (C) Yahoo Japan Corporation

リンクの目的を aria-label 属性に記載 <a href="/menu/3" aria-label="メニューに戻る"> <img alt="聞こえる" src="logo3a.svg"> <img alt="選挙" src="logo3b.svg"> </a> (C) Yahoo Japan Corporation

前現新元 (C) Yahoo Japan Corporation

選挙でよく使う漢字 前 (C) Yahoo Japan Corporation 現 新 元

読み上げではこうなる（例） まえ げん にい もと 前 現 新 元 ※スクリーンリーダーによって読み上げ方は異なります (C) Yahoo Japan Corporation

省略しないことにした ぜんしょく げんしょく しんじん もとしょく 前職 現職 新人 元職 (C) Yahoo Japan Corporation

「情報なし」 (C) Yahoo Japan Corporation

情報がない項目は空欄にしていた 【選挙区】千葉 【政党】無所属 【推薦・支持】 【現新元】 【年齢】51 (C) Yahoo Japan Corporation 目でみると空欄だとわかる 読み上げ音声で聞くとわかり にくい

読み上げ音声だとわかりにくい 【選挙区】千葉 【政党】無所属 【推薦・支持】 【現新元】 【年齢】51 (C) Yahoo Japan Corporation もともと何もないのか 意図した空欄なのか 区別がつかない

「情報なし」と明記 【選挙区】千葉 【政党】無所属 【推薦・支持】情報なし 【現新元】情報なし 【年齢】51 (C) Yahoo Japan Corporation

今後 実現したいこと (C) Yahoo Japan Corporation

地方選挙への対応 今後 実現したいこと 候補者自身の声で 選挙公報のマークアップ (C) Yahoo Japan Corporation

候補者自身の声で 今後 実現したいこと (C) Yahoo Japan Corporation

情報量の違い 本人の声 (C) Yahoo Japan Corporation ＞ アナウンサーの声 機械音声

選挙公報のマークアップ 今後 実現したいこと (C) Yahoo Japan Corporation

実際の選挙公報の例 レイアウトいろいろ 過去に実施された地方選挙のもので、今回の参議院選挙と は関係ありません。 (C) Yahoo Japan Corporation

「聞こえる選挙」の選挙公報の例 書式なしプレーンテキスト (C) Yahoo Japan Corporation

個人的に気づいたこと 当事者のユーザテストを通じて (C) Yahoo Japan Corporation

赤坂見附駅→当社18階来客会議室 全盲者のガイド 初体験 どうしよう... (C) Yahoo Japan Corporation ● ● ● ● ● ● ● ● 地下通路 階段 エスカレータ エレベータ 横断歩道 橋 金曜日の夕方 雪...❄

「いっしょに歩こう」 ～目の不自由な人と楽しく町を歩く ために〜 日本点字図書館 https://www.nittento.or.jp/news/koekake.html

代替テキスト (C) Yahoo Japan Corporation

【お題】 赤坂見附の交差点にいるとします。 いま見えているものを説明してください。 (C) Yahoo Japan Corporation

赤坂見附の交差点にいるとします。 いま見えているものを説明してください。 説明の例 （2019年2月 当社オフィスへのご案内時） (C) Yahoo Japan Corporation 「お堀端に40階建てのビルが建ってい ます。そのビルに私たちの会社が入っ ています。 お堀には橋がかかっていて、これから その橋を渡ります。弁慶橋という橋で す。 橋の上はすこし路面が濡れているの で気をつけてください。」

続けていくことの難しさ (C) Yahoo Japan Corporation

選挙制度 続けていくことの難しさ 変化への対応 (C) Yahoo Japan Corporation 人材と社内体制

選挙区 定員 選挙制度 比例代表制 拘束名簿式 ときどき変わる 非拘束名簿式 特定枠 (C) Yahoo Japan Corporation

参議院選挙 特定枠への対応 やったこと エンジニアの仕事は楽にならない... (C) Yahoo Japan Corporation ● 2018年7月 国会で成立 ● 要件の理解 ● UI設計 ● テンプレート修正 ● FEとAPI機能追加 ● DB項目追加 ● テストコード追加 ● 追加のJIS試験実施

人材と体制 コーポレートサイトでの失敗 (C) Yahoo Japan Corporation サイトのリニューアルを機にアクセシビ リティ低下 属人化 一人でやっていると持続性がない

書き留めメモの例 コーディングを優先した順序 (C) Yahoo Japan Corporation 適切な読み上げ順序

「聞こえる選挙」の終わり (C) Yahoo Japan Corporation

「早く終わらせたいよね」 (C) Yahoo Japan Corporation

「聞こえる選挙」がなくても済む社会に (C) Yahoo Japan Corporation

「読み上げ対応」選挙公報 今回の参議院選挙から 東京都選挙管理委員会のサイトより (C) Yahoo Japan Corporation

今回の参議院選挙から 公職選挙法改正（2019年6月1日） 電子データでの提出も可能に 提出された選挙公報PDFをそのまま掲載 東京都選挙区 20人中12人（60%） 全選挙区 215人中 94人（44%） 比例代表 13政党中11政党が対応 (C) Yahoo Japan Corporation

目が見えなくても 耳が聞こえなくても 有権者が必要な情報にいつで もアクセスできる社会 手足が不自由でも 怪我をしていても 子どもが小さくて目を離せないときでも 大雪で外出できないときでも (C) Yahoo Japan Corporation

難しいことでしょうか？ (C) Yahoo Japan Corporation

実現可能なのだということを証明するためにも、 ヤフーは今後も社会課題の解決に取り組み続けます。 (C) Yahoo Japan Corporation

人材募集 (C) Yahoo Japan Corporation

7月21日 投票日 https://kikoeru.yahoo.co.jp/ (C) Yahoo Japan Corporation