東京都

【開発日誌#25】いま考える、ウェブアクセシビリティ

上松眞綾, 大島奈々恵他5人

その他

上松眞綾

株式会社コムデ /

フォロー

大島奈々恵

その他

フォロー

松岡京子

株式会社コムデ / フロントエンドエンジニア

フォロー

稲邉堅太

フォロー

橋本瑠奈

Web エンジニア

フォロー

韓顔彤

その他エンジニア

フォロー

深嶋建次

株式会社コムデ / 取締役副社長兼WEB事業部統括

フォロー

on 2022/12/23

はじめまして！フロントエンドエンジニア入社6ヶ月目の上松です。
今回の開発日誌ではウェブアクセシビリティのさわり部分についてお話したいと思います。
「最近よく耳にするけど、ウェブアクセシビリティって実際どういうことなの？」と思っている方には是非読んでいただけると嬉しいです！

未経験入社2ヶ月目、ウェブアクセシビリティと出会う

入社して2ヶ月目のある時、官公庁関連案件のヘルプに入ることになりました。
官公庁のサイトなので、求められるアクセシビリティのレベルが他サイトと比べてとても高く…。
アコーディオン（※）のフォーカスに大変苦労したのを昨日のことのように思い出せます。

※アコーディオンとは...WEBサイトにおけるナビゲーションメニューのひとつで、項目をクリックしたりタップしたりすることで、隠れている詳細画面を表示させることができるものです。

そして官公庁案件ヘルプの直後、大手飲料メーカーのシステム構築案件にてフロント領域にアサインされました。コーディングルールを読むと「アクセシビリティに配慮した構築を」との文言と、それに関するルールが列挙されているではありませんか。

私「もしかして、いまウェブアクセシビリティって誰しもが知っている熱いものなの！？」

どうやらそんなことはなさそうだった

疑問を抱えたので早速いくつかの記事を調べてみると以下のような情報結果が出てきました。

freee・サイバーエージェント・サイボウズ、 Webアクセシビリティに関する調査結果を公開（2020年）
Web関連企業従事者の62％がWebアクセシビリティを「知らない」と回答

総務省「通信利用動向調査報告書」（2021年）
「アクセシビリティとは何かを知らなかった」と回答した企業が51.7%(8ページ)

調査結果をみると約過半数以上が知らないと答えているアクセシビリティ...ですが今まさに世の中から求められている雰囲気は感じ取れます。

障害者差別解消法の改正による時代の流れ

上記のようなアンケート結果もありましたが、体感としてはウェブアクセシビリティに関する動きは少しずつ、確実に活発化していると思います。
そしてその潮流に大きな影響を与えた事象の一つに、2021年5月に成立した障害者差別解消法の改正が挙げられることは間違いありません。
「障害者差別解消法」とは、障がい者への合理的配慮の提供を民間の事業者にも義務付ける「障害を理由とする差別の解消の推進に関する法律」の通称です。
改正のポイントは、これまで国や地方公共団体などが義務付けられていた「合理的配慮」の提供が、民間の事業者に対しても「努力義務」から「義務」に変わる点。
改正法は公布日である2021年6月4日から起算して3年以内（2024年6月まで）に施行される予定です。
これはもちろんウェブサイトも対象になります。

デバイスの進化によってウェブにアクセスできる人も増えている

また、私達が普段使用するOSやブラウザ・デバイスのアクセシビリティ機能、そして障がいを持った人向けのウェアラブルデバイスなども目まぐるしく進化しているおかげで、インターネットを利用出来る人がどんどん増えてきています。
総務省情報通信政策研究所による障がい者全体のインターネット利用率調査では、平成15年には29.2%だったのに対し、平成24年には53.0%にまで上がっています（視覚障害者に限るとインターネット利用率は91.7%！）。
ハードが進化しているなら、ソフト（ウェブサイト）も負けじと進化していかなくては！

第一歩はここから

ウェブアクセシビリティのガイドラインはWeb Content Accessibility Guidelines（WCAG)やJIS X 8341-3:2016によって定められています。
WCAGにはウェブアクセシビリティ基盤委員会による日本語訳もありますが、もう少しカジュアルにアクセシビリティに触れることができるコンテンツをいくつかご紹介します。
（もちろん、WCAGやJIS X 8341-3:2016にも是非目を通していただきたいです！）

ウェブアクセシビリティの「べき/べからず (Dos/Don'ts)」ポスター（英国内務省）

（↑こちらは@onouchidebeさんによって日本語化されたものです。公式はこちら）
図解付きでコンパクトにまとまっており、視覚的に理解しやすいです。
日本語だけでなく、様々な言語に翻訳されたものが公開されています。

ウェブアクセシビリティ導入ガイドブック（デジタル庁）

ウェブアクセシビリティを学ぶための書籍として「デザイニングWebアクセシビリティ」が有名ですが、その情報を更新し、さらに導入用としてまとめられたような内容です。
こちらも図解付きで、ウェブアクセシビリティの基本を丁寧に知ることができます。
ディレクター・デザイナー・エンジニアなどの垣根を超えてあらゆる方におすすめしたいガイドブックです！

freeeアクセシビリティ・ガイドライン（freee株式会社）

アクセシビリティ対応がプログレッシブな企業として、まず名前が挙がるのはfreee株式会社さんではないでしょうか。
アクセシビリティのことをもっと実践的に知りたい！という方に是非おすすめします。
「デザイン」「コード」など対象ごとのチェックリストも公開されています。これだけでも必見です！

ウェブアクセシビリティが盛り上がっているところを覗いてみよう

・Webアクセシビリティアドベントカレンダー（リンク先は2022年版）
12月に入ると、企業各社のテックブログやZenn,Qiitaなどでアドベントカレンダー企画が催されていますね！こちらもそういった企画の一つで、2013年から続いている連続企画です。
個人的に好きな記事は、
2017年12月25日分担当記事「多様性と経済合理性のあいだ」
2019年12月2日分担当記事「【事故った】「アクセシブルな環境」は「状況」で簡単に変化するWebアクセシビリティについて」
です。

・22/12/01、Amebaブログがウェブアクセシビリティ達成基準にて全項目レベルAに適合（レベルAAも2項目達成）
・noteアクセシビリティ施策
いずれも大きな自社サービスを抱える企業ですよね。アクセシビリティが考慮されないままサービスが発展してきた状態から、どのようにしてアクセシビリティに対応していくか、それぞれの苦労や達成までの過程を覗き見ることができます。

実際に何をすればよいのか

もしエンジニアなら、たとえば以下のようなことがあります。
（個人的に感じている手軽さ・難易度順で並べてみました）
・構築後のサイトはLighthouseで検証する
・正しいマークアップ、html構造を徹底する
・role属性でコンテンツに役割を与える
・キーボードでページ全体を操作可能にする（tabindex属性などでコントロール）
・area属性でコンテンツの状態（隠れている／現れている）やその性質を明示する
など
このあたりは、いろいろな方が分かりやすくまとめてくださっているサイトや書籍がたくさんあるので、ご自身に合った手段で学んでみてください！

ディレクター、デザイナー、エンジニア、それぞれにできることがある

上記ではエンジニアができることをピックアップしてみましたが、ウェブアクセシビリティは要件定義やワイヤーフレーム作成の時点でできること、デザイン作成時にできることも本当に数多くあります。
逆を言うと、全ポジションの担当者がウェブアクセシビリティを実践しなければ、ガイドラインの基準を達成する（アクセシビリティなサイトにする）ことはできません。

成長もウェブアクセシビリティも「１」を重ねていこう

また、私自身がそう考えてしまっていたのですが、アクセシビリティ対応は「0か100か」ではありません。
対応項目、手段はたくさんあるので、できることをひとつからやればいいんです。そしてその「ひとつ」でサイトを利用できる人は絶対に増えるはずです。
私もつい、アクセシビリティ対応を含めたいろいろな事を「0か100か」で考えてしまいがちなので、改めて胸に刻みます。

おわりに

はじめは流行りに乗るつもりで学び始めたウェブアクセシビリティですが、これからの可能性にすっかり心を掴まれてしまいました。これからはウェブアクセシビリティが重視される案件も増えてくると思いますので、もっと勉強を続けます！

入社早々にウェブアクセシビリティを知るきっかけができたのも、案件の内容が多彩かつ、新人でも大きな案件に携わることができるコムデで働いていたからこそと思います。
コムデではwordpress案件をメインに、Vue.jsやヘッドレスCMSなどの案件なども扱っています。
詳細が気になった方は是非wantedlyからコンタクトをとってみてください。
最後までご覧いただきありがとうございました！

参考文献・サイト