2021/03/02　Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします！ 嶌田 喬行

1. ウェブアクセシビリティ
推進活動はじめました
プロダクトエンジニアリング部 嶌田

2. 2 © . 本書の無断転載、複製を固く禁じます。
自己紹介
嶌田 喬行（しまだ たかゆき）
年 月入社、 年目のフロントエンドエンジニア。少年時代からオンライン
ゲームのファンサイト運営を通じてウェブ技術を培い、社会に出てからもウェブ
一辺倒なフロントエンドエンジニア。デザインとエンジニアリングが交差すると
ころに強い関心がある。
ウェブだいすき

3. 3 © . 本書の無断転載、複製を固く禁じます。
アクセシビリティとは？
アクセシビリティ とは、製品やサービス、施設へのアクセス
（到達）のしやすさのこと。
アクセシビリティに配慮したデザインや実装を行うと、障害者や高齢者など、従
来、サービスの主要なユーザーとみなされてこなかった人たちにもサービスを届
けることができる。

4. 5 © . 本書の無断転載、複製を固く禁じます。
アクセシビリティ推進活動をしています！
去年の入社以来、本業の傍らにアクセシビリティの推進活動をしている。
わたしはウェブが好きなので、ウェブのポテンシャルを最大限に活かしたい！
ところが、ビジネス的要件や審美的要件によってプライオリティを下げられがち。
技術不足で意図せず非アクセシブルなものを送り出してしまうこともしばしば‥。
のサービスをぜんぶアクセシブルにしたい！！

5. © . 本書の無断転載、複製を固く禁じます。
6
これまでやってきたこと

6. 7 © . 本書の無断転載、複製を固く禁じます。
会社の取り組みについての現状把握
これまで、アクセシビリティに関わる活動がどのくらい行われてきたのか？
社内のナレッジベースを徹底的に検索
• アクセシビリティに言及したことのある人を巻き込む
• 少数ではあるが、関心がある人はいた
アクセシビリティの発信をしていた人とランチ
• これまでの取り組みをいろいろ聞いた
• 人を紹介してもらった
• 推進 を作ろうと思っているが一緒にやりませんか？ →

7. 8 © . 本書の無断転載、複製を固く禁じます。
仲間をあつめる
趣の異なる つのグループを作りました。
ウェブアクセシビリティ推進ワーキンググループ
アクセシビリティの全社的な普及を目標に現在 名（主な作業メンバー）で活動
中。打ち手を探りながら普及活動を続けている。
アクセシビリティ研究会
推進 で主体的に活動するほどではないが、ゆるくキャッチアップはしてお
きたい、くらいの人でも参加できるように。現在 数名。

8. 9 © . 本書の無断転載、複製を固く禁じます。
チェックリストに組み込む
リリース前に仕様や実装に見落としがないかどうかを確認するチェックリストが
運用されていた。そこにアクセシビリティ関連の項目を追加した。
チェック項目の例
• 情報を伝えている画像に適切に代替テキストを付与しているか
• フォームコントロールにはラベルが関連付けられているか
• クリックできる要素が キーでフォーカスを受け取ることができ、フォー
カスインジケーターが表示されるか

9. 10 © . 本書の無断転載、複製を固く禁じます。
アクセシビリティ・レビュー
アクセシビリティ上の問題点を探して改善提案する社内サービス。サービス改善、
アクセシビリティの普及、 メンバーのレベルアップが狙い。
おためしフェーズなので、 から押しかけてレビューさせてもらっている。

10. 12 © . 本書の無断転載、複製を固く禁じます。
その他の取り組み
• 社内向けセミナー
• アクセシビリティ質問箱の設置
• 他社のアクセシビリティ・ガイドラインの輪読会
• アクセシビリティ検査ツールのハンズオン

11. © . 本書の無断転載、複製を固く禁じます。
13
これからの取り組み

12. 14 © . 本書の無断転載、複製を固く禁じます。
アクセシビリティ、下から行くか？ 上から行くか？
まだまだやれるボトムアップ・アプローチ
• アクセシビリティ・ガイドラインの整備と運用
• ナレッジベースの拡充
• レビュー等による改善の継続
• 啓発活動の継続
いつかやりたいトップダウン・アプローチ
• アクセシビリティ専門職の創設
• アクセシビリティ方針の宣言
• アクセシビリティ研修（新卒など）

13. © . 本書の無断転載、複製を固く禁じます。
15
組織に何かを広めるということ

14. 16 © . 本書の無断転載、複製を固く禁じます。
なぜ順調に進められているのか？
今のところ順調に進められている理由を、書籍『 アイ
デアを組織に広めるための のパターン』に照らして振り返ってみる。
※ めちゃくちゃいい本です
※ 著者とは関係ありません

15. 17 © . 本書の無断転載、複製を固く禁じます。
情熱を持ち、絶やさない
このアイデアを絶対に広めるのだという情熱を持ち続けること。
情熱こそがすべての推進の原動力になるし、情熱に魅せられて人は集まってくる。
情熱を常日頃から垂れ流していると、興味のなかった人でも「ちょっと調べてみ
ようかな？」と意識を向けてくれるかもしれない。
書籍では‥‥
• エバンジェリスト
「エバンジェリズムこそが成功の必須条件」

16. 18 © . 本書の無断転載、複製を固く禁じます。
社内に顔が広い人とつながる
顔が広く、尊敬を得ている人と早めにつながること。
アクセシビリティ推進活動がここまで快調なのは、社歴 年の中島（このあと
登壇）による部分が大きいと感じる。
解決すべき課題があると「そのことならあの人」と素早く接続してくれる。技術
者としてエンジニアからの尊敬も厚いので、「なかじさんが言うなら‥」と耳を
傾けてもらえている。
書籍では‥‥
• コネクター
• 達人を味方に
• 橋渡し役
冷凍みかんのイラスト

17. 19 © . 本書の無断転載、複製を固く禁じます。
ひとりではなく、仲間を集める
ひとりで成し遂げられると思ってはいけません。
組織に新しいアイデアを導入するのはとても大変な仕事。「自分でやったほうが
早い」は間違い。
他者を巻き込むと、職種に応じたさまざまな視点を提供してくれる。各部署に持
ち帰って情報を拡散してもらうとプレゼンスもあがる。施策の遂行しやすさにも
影響してくる。
書籍では‥‥
• 協力を求める

18. 20 © . 本書の無断転載、複製を固く禁じます。
組織に何かを広めるために必要なこと
情熱を持ち、絶やさない
社内に顔が利く人とつながる
ひとりではなく、仲間を集める
書籍には全部で のパターンが紹介されている。アクセシビリティに限らず、
広めるべき良いアイデアを抱えているなら、ぜひ！

19. © . 本書の無断転載、複製を固く禁じます。
21
はこれからも
アクセシビリティを推進します！

20. © . 本書の無断転載、複製を固く禁じます。
22
ありがとうございました！