辻ちゃん・ウエちゃんのAccessiブルGOGO! 画面が見えなくても、PCやスマホは操作できるのだ!の巻 参加レポート

はじめに

2019年8月30日に開催された辻ちゃん・ウエちゃんのAccessiブルGOGO! 画面が見えなくても、PCやスマホは操作できるのだ!の巻に参加しました。参加レポートは書いていないのですが、以前CSS Nite LP62に参加した際に、Backlogを使ってみる回で、辻ちゃん・ウエちゃんのAccessiブルGOGO!は見たことがあります。

会場は、二子玉川のco-lab二子玉川。早めに二子玉川に着いたので辺りをぶらついていたのですが、二子玉川にいる人はなぜか全体的に歩くのが遅かったです

そして、私の記憶が確かなら、今回はUDトークによる字幕が、特に紹介されていないにもかかわらず、普通に提供されていました。もうアクセシビリティ関連のイベントでは、デファクトスタンダードになったので、特に紹介はいらないということなのでしょうか(^^;

クイズコーナーや事例紹介

イベントのはじまりは、目が見えない状態で、手ざわりで商品を当てるクイズ。目が見えなくても、ちゃんとモノを判別できるような工夫を知ることができました。帰宅してすぐにサランラップを確認したのですが、たしかに側面にエンボスがありましたTwitterのハッシュタグ「#アクセシブラリ」はチェックしておきます。

事例紹介では、各国のアクセシビリティに関する法律の紹介と、日本の関連法案のゆるさを紹介したあとに、辻さんがオーストラリアに旅行に行かれた際の信号機の音を紹介されていました。日本の信号機とは異なり、興味深かったです。

たまたま、以前台湾旅行に行ったときに信号機の映像を撮っていたので確認してみたのですが、台湾の信号機は音はしていませんでした。ちなみに、台湾の信号機で面白いと思ったのは、赤になるまでの時間が数字でカウントダウンされていることです。赤になるまでものすごく余裕があるのか、あと数秒で赤になってしまうかが一目瞭然でユニークな試みだと思いました。数字なのでメーターより明示的です。

NVDAとVoiceOverの実践

今回のイベントのメインは、辻さんによるNVDAとVoiceOverを実際に使ってのWebの操作でした。今回は、辻さんが普段聞いている読み上げ速度で聴衆をびびらせるという定番の下りがなく、最初からゆっくりな音声で読み上げをされていました。

今回のお題は、co-lab二子玉川のウェブサイトで、フォームからお問い合わせをするというものでした。そして、結果的には辻さんはお問い合わせを完了することができませんでした。今回自分がポイントだと思った点を4点列挙。

1.スクリーンリーダーの読み上げについて

スクリーンリーダーは各ソフトウェアごとに漢字の辞書を持っているので、ソフトウェアごとに読み上げ方が異なってしまう。だが、スクリーンリーダーでちゃんと読み上げられないからといって、漢字をひらがなにひらく必要は無い。ひらがなにひらいたことで、逆に間違った読み方になってしまうものもある。
例)障害者(しょうがいしゃ)→障がい者(さわりがいしゃ)
修正されるべきは、スクリーンリーダーの辞書の方。

2.お問い合わせフォームの箇所に見出しが無い

お問い合わせフォームが存在しているところに見出しが無いので、すぐにお問い合わせフォームにたどり着けなかった。視覚上はFAQなどを含めたブロックになっているが、見出しが無いとスクリーンリーダーで見出しジャンプをされた際はスルーされてしまう。見出しは身だしなみ。

3.フォームの入力欄とラベルが紐付いていない

<label> 要素が無く、入力欄と紐付いていないので、入力欄にフォーカスを当てても、どの項目を入力するのかがわからない。視覚的なブラウザでも、ラベルをクリックして入力欄にフォーカスさせるのは自分もよくやるので、自分でフォームをコーディングするときはちゃんと項目が紐付いているかの確認は入念にやるようにしています。

4.必須入力項目がわからない

フォームの入力がはじまる前の箇所に「※必須記入項目」という文言はあるものの、それ以降の各項目のラベルには「※」しか書かれていないので、最初の文言を読み飛ばしてしまうと、必須項目かどうかの判断が曖昧になってしまう。これの対策としては、「※」などの記号や色で必須項目をあらわすのではなく、各項目にちゃんと「必須」というテキストを加えるべき。

質問コーナー

今回は、私も一つ質問をさせていただきました(プレゼントのコアラのぬいぐるみありがとうございました)。辻さんが使っていて、使いやすいと思ったフォームについてお伺いしたのですが、自治体などのフォームはちゃんとしているところが多いとのことでした。やはり公共系は、みんなの公共サイト運用ガイドラインがあったり、ユーザーが多様な環境でアクセスしてくる率が多かったりするので、基本的なところはちゃんとしているのだと思います。

また、他の方の質問で「アクセシビリティを更に普及させるためには」という質問に対しての「楽しくやっていく」という回答が、とても印象に残っています。植木さんと辻さんのお話は、以前やっていたアクセシビリティPodcastから折に触れて聞いているのですが、お2人はアクセシビリティにかかわるためのハードルをできるだけ下げようとずっと努力されている気がします。アクセシビリティについて調べると、WCAG2.0からはじまり、障害者・高齢者対応や法律の話など難しそうな話が目に付きます。そのせいで、せっかく興味を持ってもらっても敬遠されてしまうこともあるのかもしれません(今回、最初にものすごく早い読み上げで聴衆を驚かせるということをしなかったのも、ハードルを無闇に上げないための一つの作戦だったのかもしれません)。そうならないために、お2人はできるだけアクセシビリティをとっつきやすいものにしようと努力されていると思います。Webアクセシビリティ確保 基本の「キ」なども、その一つだと思います。特別難しいことをするのではなくて、まずこれだけやればコンテンツがアクセシブルになるということを伝えるのは、興味を持ち始めた人にとってはとても有益な情報だと感じます。

せっかく興味を持ってくれた人が離れてしまうようなことはとてもさみしいですので、もっと気軽にアクセシビリティを考えられるようなインクルーシブな状態にしていくのが、今後のアクセシビリティ界隈の課題の一つかと思いました。

さいごに

今回のイベントは、少ない参加人数ながらもアットホームで良いイベントだったと思います。個人的には、会場も良い立地だと思いました。参加人数が少なかったのは、若干開始時間が早かったからかもしれません。私も定時退社だと全然間に合いませんでした。また、無料イベントだったのに、食事や飲み物がふんだんに用意されていて驚きました。参加費1,000円ぐらい取った方がいいのではと心配してしまうほどでした。

主催の株式会社コンセントさんは、IAなどのイメージが強かったのですが、アクセシビリティエンジニアの秋山さんを中心に、アクセシビリティ関連のイベントへの出演が目立ってきています。今回のようにアクセシビリティの裾野を広げるようなイベントを開催されるなど、さらなる活躍が期待されます。ステキなイベントをありがとうございました。

Japan Accessibility Conference – digital information vol.2 参加レポート

はじめに

2019年7月20日に開催されたJapan Accessibility Conference – digital information vol.2に参加してきました。2017年に開催された第1回には参加しておりませんでしたので、今回がはじめての参加となりました。セッションのラインナップを事前に見たところ、Webに寄ったセッションが少ないと感じましたので、あえてWeb系以外のセッションに参加してきました。この記事では、セッションの感想を中心に書いていきます。

イベント自体のアクセシビリティ

今回のイベントでは、アクセシビリティ関連のイベントでは定番になってきた、UDトークと手話通訳も当然のように準備されていました。また、他のイベントでもあったのかもしれないのですが、今回はじめて見たのは、車椅子優先席と手話通訳が見やすい席です。

車椅子優先席は、普通に机があるのに椅子が無い場所があって、なんで椅子がないんだろうと思っていたところに、電動の車椅子の方が颯爽といらっしゃったので、車椅子の方用の場所だと気づくことができました。あまり、道で車椅子の方を意識して見る機会がなかったのですが、結構機動力があり驚きました。

手話通訳が見やすい席については、一番前の席が優先枠として設けてあるというものです。確かに、耳の聞こえない方の情報保障として手話通訳の方がいらっしゃっているのに、前の席の人が邪魔で手話が見えないと本末転倒なので、とても良い配慮だと思いました。

セッション「精神・発達障がい者の社会へのアクセシビリティ」

こちらのセッションは、グリービジネスオペレーションズの代表取締役社長である福田さんによる、精神・発達障がい者の方が主に働かれている会社についての発表がありました。

とても素敵だなと思ったのは、働かれている方たちを決して過保護にしたり、できることだけやらせるのではなく、ちゃんと成長を促しているという点です。もちろん、「受け入れ困難な価値観にムリに同調する必要ない」のように、いわゆる健常者と同じようにしろとは言っていないのですが、ちゃんと各社員と向き合って特性を理解をし、ちゃんと個々人が働いて成長できる環境・設備を用意しているのは、とても素晴らしいと思いました。あまり発達障害の症状は詳しくないのですが、グリービジネスオペレーションズのオフィス紹介ページを見れば、ちゃんと物理的な配慮がなされていることがわかります。デスクトップパーテーションは自分の会社にも欲しいと思いました。

私は知らなかったのですが、「特例子会社」は社会的イメージがあまりよくないようです。国柄の補助金を目当てに、とりあえず障害者を採用はするものの、ほとんど仕事をさせないというような事例が多く離職率も高いということでした。ですが、このグリービジネスオペレーションズはちゃんと障害者の仕事を作り、前述のように成長もできる仕組みを作っているようです。

人口減が進む日本では、その対策が急務です。私の中では、外国人を受け入れるという選択肢が大きいと考えていました。ですが、グリービジネスオペレーションズのように、障害者の方に適切な環境を設けることでも、この人口減問題の解決に貢献できるということがわかりました。大変、社会的意義のある事業だと思います。

セッション「色弱の私が色は大事だという理由」

NPO法人カラーユニバーサルデザイン機構の副理事長で、ご自身が1型2色覚という色覚障害の伊賀さんによる発表でした。

一番心に残っているのは、最後のスライドにあった「誰もが自分の色の見え方に誇りを持てる社会に」という言葉でした。どうしても、色覚”障害”や色覚”異常”というように、通常の色覚とは異なると捉えられてしまいますが、当事者自身はその見え方しか知らないので、自分が障害者である/通常とは異なった色覚であると言われても、受け入れることが難しいのだと思います。

事例としては、肉が焼けたかどうかわからないや、ウニとわさび・ねぎととうがらしを間違えるというものがあるようです。こういう話を聞くと、ウェブサイトを作る際には、WCAGに書いてあるように色だけに頼らないデザインをしなければならないと思ってしまうのですが、伊賀さんの話によると、ちゃんと色の調整をすれば色覚障害の人でも色で見分けることができるということでした。これは初耳でしたので、驚きでした。

この色覚異常の人でもちゃんと見分けられるような配色が広まっていくことによって、色覚の違いによるギャップが埋められていくのだと思います。そんな世界になれば、誰しもが自分の色の見え方に誇りを持てるようになるはずです。

セッション「障害者の働くを解決する ~ 障害者専門クラウドソーシングサービス「サニーバンク」の取り組み」

障害者専門クラウドソーシングサービスの「サニーバンク」の上濱さんと、アドバイザーの伊敷さんによる、障害者雇用の現状とサニーバンクでおこなっているWebアクセシビリティ診断について、お話いただきました。

まず、障害者の雇用については、法定雇用率のためだけにとりあえず障害者を雇用している会社があるなど、かなり厳しい状況のようで、1年で半分以上が離職しているという現状のようです(それだけに、前述のグリービジネスオペレーションズはかなりすごいという話だと思います)。サニーバンクでは、離職の要因になっている「勤務時間・場所・人間関係」に障害者の方がしばられないように、業務委託というかたちを取っているようです。

そして、面白かったのが、障害者特有のスキルについての事例でした。できないことを克服するために修練した結果、いつの間にか健常者を大きく超えるスキルを持つようになっている人がいたり、発達障害者の方の中には、まれに特殊なスキルを持っている人もいたりするようです。例としては、口紅の微妙な色の違いに気づくことができる人や、たくさんのビー玉を投げたら、一瞬でその数を言い当てる人などが紹介されました。たとえ、普通のサラリーマンのような生活はできなかったとしても、その人が輝けるような場所で仕事をすることができれば、普通の何十倍も輝けることができると思います。

セッション「全盲エンジニアがiOS/Android/WebUIエンジニアにダメ出しした結果」

AccSellを運営されている中根さんとfreeeのエンジニアである阿部さん、松本さん、山本さんのディスカッション形式でセッションがおこなわれました。

話を聞いている中で、当事者との関係があるということが重要だと感じました。中根さんというという障害当事者の方がジョインされたことで、各エンジニアさんのアクセシビリティへの取り組みがはじまったという印象を受けました。やはり、身近にいる人が想定通りの利用ができていないという事実は見逃せないことだと思います。逆に身近に障害当事者がいないと、具体的にどう利用できていないかが見えないので、対応も後手後手になってしまうのかなと感じました。

セッション「私たち障害当事者ですが質問あります? – Ask Us Anything」

各障害を持っている当事者の方に、sli.doを使って、あれやこれや質問する時間でした。

IT技術が向上することによって、できるようになったことは結構多いようです。やはり移動ルートの確認も含めて、情報というものが取得しやすくなっているようでした。また、逆に障害当事者も作るということへのハードルが下がっているようです。

障害者差別解消法の施工については、罰則のない努力義務なので、決定的な効果は見られていないが、会社によっては多少の変化があるということでした。

ウェブサイトについている色反転や文字拡縮機能は、障害当事者は誰も使わない。なぜなら各自が普段から利用している支援技術で対応できるからという話はWebアクセシビリティを勉強していれば常識なのですが、伊敷さんがおっしゃっていた、ルビをふる機能については、ディスレクシア(識字障害)の方にとっては必要かもしれないというのは、新しい視点での意見でした。

障害当事者とそれ以外の人の間のコミュニケーションについては、海外と日本では違いがあるようです。日本では、見えない線引きがされているようという話がありました。英語が花性ない人が困っている外国の方を助けようと声をかけられないのと同様に、困っている障害者の方をどう助けたらいいかわからないので声をかけられないということは往々にしてあると思います。そして、伊敷さんは、なんでも聞いてほしいとおっしゃっていましたが、アクセシビリティを仕事にされている伊敷さんだからこそ、そう思えるだけで、人によってはそもそも障害を受け入れられていない人もいます。一人ひとり障害の捉え方や受け入れ方は当然違うので、人対人ということを意識して、丁寧にコミュニケートする必要があります。

さいごに

今回は、Webの話をほとんど聞かずに、障害当時者の方の話ばかり聞きました。Web界隈での、アクセシビリティの認知に関しては、まだまだ足りない部分もあると思いますが、有識者の方々の頑張りにより、以前と比べるとだいぶ認知されてきている感があります。

WCAGへの準拠やWAI-ARIAの実装など、Web界隈でアクセシブルな実装をする手段は確実に広まってきています。では、次に何をすればいいかというと、当事者の理解だと感じています。手段は充実してきたので、今度は自分のサービスや商品で、どこに重点を置いて対応すればいいのかということを明らかにする必要があると思います。

そのために、提供側は障害当事者の方の声を拾い上げる努力が必要ですし、障害当事者側は「自分が悪いから利用できないんだ」と躊躇せずに、積極的に「ここが使いづらい」と声を上げていくべきだと思います。両者の間にある壁をいかにして乗り越えていくかが、今後のアクセシビリティの課題だと感じました。

参加費1,000円と破格の値段で、このような素晴らしいイベントを開催していただいた実行委員会の方には感謝しております。人が多くて苦手な渋谷なので気が乗らなかったのですが、とても満足できました。次は、渋谷以外で開催されるともっと嬉しいなと思いながら、第3回の Japan Accessibility Conference の開催を心待ちにしています。

WordCamp Tokyo 2018 参加レポート

はじめに

2018年9月14日に新宿グランドタワーで開催されたWordCamp Tokyo 2018 に参加してきました。WordCamp は WordPress にかんするイベントで、私もこれまで何回か参加したことがあります。この記事では、参加したセッションの感想を書いていきます。ちなみに、この記事は WordPress の新しいエディタである Gutenberg を用いて書かれています。

各セッションの感想

State of the Web

こちらは PixelGrid の矢倉眞隆さんによっておこなわれたセッションです。矢倉さんといえば、Web標準のころから私の中では超偉大なお方。公式ブログでも「基調講演」と言われているようなセッションで、Web の現状について話してくださいました。

実務で Web にふれていると、どうしても Web の良さなどについて、忘れがちになってしまう傾向があるので、あらためて現状の Web のいいところと足りないところを知ることができてよかったです。

セッションの中で、一番おっと思ったのは、Google の興味がインドに向いているというところです。ネット人口がまだそんなに多くなく、これから伸びしろのあるインドは、通信環境がとても貧弱なので、AMP や PWA でリーチしていくという話でした。これには納得感しかありませんでした。

WP REST API と React で始めるリモートワークでの有料 Web メディア開発

島田俊介さんのセッション。ブースを回り終わって、少し時間ができたので、本当の終盤だけ飛び込みで参加させていただいた。クーリエジャポンと EXPAT というメディアがあって、両方で WordPress を利用しており、データの受け渡しに REST API を利用しているというざっくりとした話しかわからなかった。

また、おっと思ったのはリモートワークの話。なにか自分がアクションを起こした際は、かならずクライアントの Slack に通知が飛ぶようになっているが、今の所それについてのクレームは出ていないらしい。クライアントいわく、「何をしているかわからないよりいい」とのこと。たしかに、同じ職場の同僚の進捗もいつも気になっているし、顔が見えない環境ならなおさら不安になるのだなあと。共有大事だなとあらためて感じました。

より便利に、効率よく ! WordPress 次期エディター「Gutenberg」の基本的な操作を知って、今日から使い始めよう

Tetsuya Imamuraさんによるセッションで、WordPress の新エディタ Gutenberg に関するセッションです。おそらく、今回注目度の高いセッションのひとつだったのではなかったでしょうか。スライドはこちら

実際の Gutenberg の画面を使って、編集はどのように行うのかや各箇所の動作、これから実用するにあたっての準備を説明してくださいました。15分という短いセッションだったのですが、Gutenberg を全然さわっていなかった私には、概要をつかむには十分な内容でした。

Google 検索最新情報 2018!新しい Search Console の活用法

Google の金谷武明さんによるセッション。金谷さんは有名人なので、色々なところでお見かけします。セッションの中では、Google の取り組みを説明したあとに、新しい Search Console の説明をしてくださいました。

AMP の WordPressプラグインは、本サイトでも導入しています。色々懸念する事項はあるのですが、上述のインドの話なども含め、Web の高速化という点では、かなり重要になってくると思います。また、https については、Google が出している透明性レポートに基づき、他国に比べて日本が遅れていることについて説明していただきました。

新しい Search Console については業務でやっとさわりはじめた段階なので、各レポートの見方と気にするべきポイントを聞けたので、大変有意義でした。

Challenge PWA!! Web の舞台はホーム画面へ進撃する !

進藤龍之介さんによる PWA に関するセッション。最初の矢倉さんのセッションでもふれられていたこの PWA について説明したあとに、実際どうすれば、PWA 化ができるかを実際の画面をもとに説明してくださいました。

PWA の説明自体は先に聞いてしまっていたので、新しく知ることはなかったのですが、実際の PWA 化の手順については、うっすらと知っているだけでちゃんとした知識がなかったので、実際のファイルを拝見することができ、とてもためになりました。

PWA の構成は、コンテンツと Manifest、Service Worker の3点。コンテンツは必ずhttpsでなくてはならない。WordPress であれば、オフライン用の固定ページを作成する。Manifest は、json形式でアイコンなどの設定を記述する。Service Worker では、キャッシュの制御や PUSH 通知の設定を行う。

キャッシュの有効期限の点で悩みどころがあるが、それを解決するための WordPress プラグイン「PWA for WordPress」をスピーカーの進藤さんが作成されているので、WordPress のサイトを PWA にする際は、そのプラグインを使う。

かなり内容盛りだくさんで、時間もいっぱいいっぱいのセッションでしたが、とても満足感がありました。今回、一番ためになったセッションかもしれません。Challenge PWA!! WordCamp Tokyo 2018のスライドもご参照ください。

Gutenberg 解体新書

宇都宮諒さんによる、Gutenberg の技術的な内容に関するセッションです。当日の発表に使われたスライドはこちら

Gutenberg 自体はほぼ JavaScript でできていて、dependencies は React.js、jQueryなどで、devDependencies は、Babel や webpack。React.js で用いられる JSXという形式の書式についてや、ブラウザでそのまま実行できないその形式をトランスパイルする Babelなどについて、それぞれの仕組みや働きを理解することができました。

そのあとに、Gutenberg のブロック API  について説明していただきました。さきほどの、JSX 形式がばんばん出てきたので、学ばないといけないと感じました。私のフロントエンド関連の知識が、2015年ぐらいで止まってしまっているので、早く追いつかなければという気持ちになりました。

そして、スライドの最後で紹介された、”Learn JavaScript, deeply”という WordPress の開発者である Matt Mullenweg の言葉の通り、今後は JavaScript をより学んでいく必要があるとあらためて感じました。SEO 方面でもそういう話がありましたし。 → テクニカルSEOの上級者になりたいならJavaScriptに精通すべし

事例から見る、アクセシブルな WordPress サイトの運用現場の実際

上記のセッションが規定の時間より少し早く終わりましたので、柴田宣史さんのアクセシビリティに関するセッションの部屋に急いで入ったのですが、時すでに遅し最後のスライドが表示されていました。

Gutenberg 解体新書とこのセッションのどちらを受講しようかずっと悩んでいたので、かなり悔しい感じではありましたが、登壇者の柴田さんが以前、アクセシビリティの情報サイト「Accsell」のポッドキャストに出演されていた際に話されていた『JIS X 8341-3:2016, WCAG 2.0早見表/逆引き表』をもらうことができ、それはとても嬉しかったです。

おわりに

今回もとても有意義な会でした。運営にかんしても、開場直後の長蛇の入場列以外、大きな問題はなかったと思います。運営の方々、ありがとうございました。

個人的には、Google の動きをこれまで以上に気にしていく必要性があると感じました。それと同時に、WordPress を含めた Web の仕事をしていくなら、JavaScript をどんどん学んでいかなければという決心を新たにしました。