🐸

私的アクセシビリティ活動記録 2022

2022/12/18に公開

これはアクセシビリティ Advent Calendar 2022の 18 日目の記事です。


はじめまして、heesaid と申します。フリーランスを経て2022年7月から株式会社ヤマップでフロントエンドエンジニアとして働いています。

本記事ではアクセシビリティに出逢い取り組んだ2022年の振り返りを行います。初学者ゆえ拙い内容ではありますが、まだまだ普及の途上にあるアクセシビリティという分野において、個人がどのような取り組み方をしたかというサンプルは多ければ多いほうがいい、という考え方のもと書いています。「アクセシビリティに取り組みたい!でも何から手を付ければ…」という方のひとつの参考になれれば嬉しく思います。

はじめに:なぜアクセシビリティ?

はじめに、筆者がなぜアクセシビリティに関心を持つようになったのか、その経緯について書きたいと思います。

弱い立場の人たちが生きやすい社会は誰にとっても生きやすい社会

筆者は普段から政治や社会問題に強い関心があり、特に権力や武力、種々の社会的な無配慮によって社会の周縁に押しやられた人々 (社会的少数者) の声に耳を傾けたいと考えながら生活しています。本やラジオでオピニオンに触れたり、災害被災地や社会的イシューのある場所に足を運んで現地の方々から直接お話を聴くという活動をしているうち、「弱い立場の人たちが生きやすい社会は誰にとっても生きやすい社会ではないだろうか」ということを考えるようになりました。そしてその社会の実現に微力でも貢献したいと思うようになります。

技術×社会参加の道すじとしてのアクセシビリティ

その頃の仕事は Unity や WebGL 等によるエンタテインメント分野でのインタラクティブコンテンツ開発がメインでしたが、だんだんと「自分の技術で社会参加がしたい」と考えるようになります。そんなときに出会ったのがアクセシビリティという概念です。価値観と仕事内容の乖離により一時は本気でエンジニアを廃業することを考えましたが、アクセシビリティとの出逢いによって「もしかしたら一生の仕事にできるかもしれない」と考えられるようになりました。

ひとりではじめるアクセシビリティ:個人での取り組み

ここからは個人的に取り組んだ、または取り組んでいるアクセシビリティ関連の活動を紹介します。

WCAG を読む

WCAG を愚直に頭から読み込んでいます。Web アクセシビリティの根幹を知るためには外せない作業と考えて頑張っています。

ウェビナーやトークイベントへの参加

タイトルに「アクセシビリティ」というワードが付くウェビナーやトークイベントには脊髄反射的に参加登録をしました。

  • Webアクセシビリティの学校 2022 秋 特別講座
  • 高まるウェブアクセシビリティの需要〜フロントエンド最前線〜
  • 事例に学ぶ、ウェブアクセシビリティ〜フロントエンド最前線〜
  • アクセシビリティ ゆく年くる年 2022

コミュニティへの参加

いくつかのオンラインコミュニティに参加しています。

「A11YJ」 Slack チーム

言わずとしれた (?) 国内最大級のメンバー数を誇るアクセシビリティのオンラインコミュニティです。

https://a11yj.slack.com/

「ウェブアクセシビリティ」Discord コミュニティ

ME_TKS_ さんが主宰されている Discord コミュニティです。勉強会のほか、日々様々なトピックで活発にやり取りがされています。

https://discord.com/invite/ujJxXQj5Tj

Accessiブランチ

NVDA 日本語チームのメンバーであり現在は SmartHR で活動されている辻勝利さん主宰のコミュニティです。毎月最終木曜日のランチタイムに集まってゆるっとアクセシビリティ関連の雑談をするという会で、立場も経験も関係なくフラットに会話できる雰囲気が魅力です。アクセシビリティの最前線でご活躍されている方々ともカジュアルにお話できることもあり、すでに毎月の一番の楽しみになっています。

https://accessiblunch.connpass.com/

アクセシビリティマインドを養うコンテンツに触れる

アクセシビリティマインドを養うために様々なコンテンツに触れています。

AccSell (ポッドキャスト)

中根雅文さん、植木真さん、山本和泉さんが2012年から主宰されているポッドキャスト番組です。第1回から順を追って聴いているのですが、2022年のいま聴いても普遍性のある内容が多く、アクセシビリティマインドを養うには最高のコンテンツです。

https://open.spotify.com/show/7I30y6NIVe75Cr8EmO1q4K?si=892bc40277b948da

ミツエーテックラジオ (ポッドキャスト)

Web アクセシビリティへの取り組みが眩しすぎるミツエーリンクスさんのポッドキャスト番組です。アクセシビリティに特化した内容ではありませんが、Web 関連のホットなトピックが15分程度にまとまっておりおすすめです。

https://open.spotify.com/show/43J3vrInhooUDY6Vs9AmTS?si=ea22c0ce9c3d4035

TBSラジオ「荻上チキ・Session」(ラジオ)

こちらもアクセシビリティに特化した内容ではありませんが、様々な社会的トピックについて当事者を交えて議論を深めながらフェアな社会の実現について考えるラジオ番組です。直近では『言語学者と考える「手話」とコミュニケーション』という特集が非常におすすめです。

https://open.spotify.com/episode/7zaSoOVP3sz8IoLCoFcGii?si=0665bd844a704048

伊藤亜紗『目の見えない人は世界をどう見ているのか』(書籍)

「目が見えない」ことが「障害」ではなく、「異なる世界を見ている」ということであると気付くことができる本です。晴眼者と視覚障害者がお互いの「見ている」世界を「そっちの世界も面白そうだねぇ!」と面白がり合う様が痛快です。

https://www.amazon.co.jp/目の見えない人は世界をどう見ているのか-光文社新書-伊藤-亜紗/dp/4334038549/ref=sr_1_1?__mk_ja_JP=カタカナ&crid=1GYL79XWRP4PK&keywords=目の見えない人は世界をどう見ているのか&qid=1671372942&sprefix=目の見えない人は世界をどう見ているのか%2Caps%2C180&sr=8-1

『目の見えない白鳥さん、アートを見にいく』(映画)

書籍『目の見えない白鳥さんとアートを見にいく』を「白鳥さん」の物語として作品にしたドキュメンタリー映画です。「障害」を「異なり」と考える上でぜひ観て頂きたい作品です。

https://www.youtube.com/watch?v=Sn9agYo0q1U


個人的に、アクセシビリティの本質は「共感」と「想像力」だと考えています。想像も及ばないような圧倒的な他者への関心は以前から強いのですが、アクセシビリティに取り組むようになってからはこれまで以上にその気持ちが高まっています。

仕事ではじめるアクセシビリティ:職場での取り組み

ここからは職場で取り組んだアクセシビリティ関連活動について紹介します。

『コーディングWebアクセシビリティ』勉強会

週に一度、1時間の枠を取って『コーディングWebアクセシビリティ WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション』を題材とした勉強会を開催しました。

https://www.borndigital.co.jp/book/5318.html

8月初旬~11月中旬まで開催し、おおよそ以下のような段取りで進行しました。

  1. ファシリテーターは持ち回り制
  2. 対象となる範囲を設定し、20~30分程度で黙読
  3. ファシリテーターの主導で内容をおさらいしながら、感じたことをディスカッション
  4. コードがある場合は CodePen 等を利用して動かしながら確認する
  5. 学んだことのまとめを行い、次週の範囲とファシリテーターを決めて終了

本書は Web アクセシビリティと WAI-ARIA について学ぶことができるほぼ唯一の日本語の書籍書名に「WAI-ARIA」を冠した唯一の書籍[1]として間違いなく名著ではあるのですが、原著が出版された2014年から2022年の間には WCAG 2.1 がリリースされたり、開発環境も React や Vue が当たり前となっています。jQuery で書かれたサンプルコードを読み替えたり、リンク切れの参照先ドキュメントを探しに行くという作業はなかなか骨が折れました。

「アクセシビリティやっていき会」の発足

『コーディングWebアクセシビリティ』勉強会での学びを生かしていこうということで、勉強会の枠を転用してアクセシビリティの改善活動を行う「アクセシビリティやっていき会」が発足しました。こちらはまだスタートしたばかりですが、おおむね以下のように流れで開催しています。

  1. お題となるページを選定
  2. axe DevTools で対象のページをスキャン
  3. "Critical" および "Serious" のうち、WCAG レベル A の達成基準をピックアップ
  4. 着手しやすいものを選定し、モブプロとディスカッションを行いながらリアルタイムで改善を行う
  5. 時間内に終わらなかった場合は時間外で継続し PR まで持っていく

お題となるページは、ユーザーペインと改善後のインパクトが大きいであろうという理由でアクセス数の多いものから優先的に選んでいます。実際にユーザーからのフィードバックを募る際のことを考慮したとき、より多くの利用者の声を拾うことができる可能性があるため理にかなっていると思います。また、ステークホルダーへの説明がしやすいというメリットもあります。

改善対象はひとまずレベル A のみとしていますが、徐々に AA の項目にも着手していく予定です。

モブプロには VSCode Live Share を利用しています。ホストとゲスト、双方のカーソル位置をフォローすることができ、コードのどの部分について話しているのかが明確になるため、これはとてもおすすめです。

https://visualstudio.microsoft.com/ja/services/live-share/

デザインシステム検討委員会への参加

ヤマップでは現在「RIDGE DESIGN」という名称でデザインシステムの整備が進められています。そのガイドラインを検討する有志委員会に参加し、アクセシビリティの観点を議論に含めることができるよう活動しています。

https://note.yamap.com/n/n1875c30510f0

職場でのアクセシビリティ活動によって得られた成果

上記のような取り組みを継続する中で以下のような成果が得られた、または得られつつあります。

開発の各段階におけるアクセシビリティ的観点の導入

以下のような開発の各段階でアクセシビリティ的な観点が考慮されるようになってきました。

  • コンポーネントやページの設計段階
  • 設計レビューやコードレビュー時
  • デザインへのフィードバック時

勉強会等を通して 「アクセシビリティを向上させると結果的にユーザビリティが向上する」 という認識が普及してきたのではないかと思います。

アクセシビリティの話題が出るようになった

アクセシビリティ関連の話題やトピックがよく出るようになってきました。

  • Slack でアクセシビリティ関連のトピックをシェアしてもらえるようになった
  • 「これってアクセシビリティ的にはどうなんだろう?」という議論が起こる

余談ですが、私は何かというと二言目には「アクセシビリティ」と言うようにしています。こうすることによって周囲の人にサブリミナル的にアクセシビリティマインドを植え付けることに成功している…と信じています。

まとめとこれから

以上が2022年 (実際は6ヶ月弱) の間、アクセシビリティ初学者である筆者が取り組んできた内容となります。今後、職場では徐々に取り組みの規模を広げ、フロントエンドチームだけでなく社内に広くアクセシビリティの概念を広げていきたいと考えています。また a11y コミュニティへの貢献も行っていきたいところです。

冒頭にも書きましたが、アクセシビリティと出逢ってからというもの、この分野に一生携わりたいという気持ちを日々強めています。まだまだ学ぶべきことばかりですが、少なくない初学者のみなさんとともに頑張っていきたいと思います。

長くなってしまいましたが、ここまでお読みいただきありがとうございました。

Happy a11y-ing!

脚注
  1. タイトルとして明示されてはいないものの、Web アクセシビリティと WAI-ARIA について学ぶことのできる日本語の書籍は他にも多く翻訳・出版されています。ヘイドン・ピカリング『インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン』(ボーンデジタル、2017年)、アダム・シルバー 『Form Design Patterns ―シンプルでインクルーシブなフォーム制作実践ガイド』(ボーンデジタル、2019年)、太田良典・中村 直樹『HTML解体新書-仕様から紐解く本格入門』(ボーンデジタル、2022年) など。 ↩︎

Discussion