デザイナー✕エンジニアでhow to learn WCAG
お久しぶりです、@emimです。
この記事は、毎年5月の第3木曜日に世界中で開催されているGAAD（Global Accessibility Awareness Day）の関連記事です。
日本で5月16日に開催されるGAAD Japan 2024では、わたしの同僚の釜堀（@kamy0042）が登壇します。限られた時間で詳細を紹介できない内容を、こちらで解説します。
WCAG勉強会の目的
ここで紹介するのは、記事のタイトルの通り、デザイナーとエンジニアが一緒になってWCAG（Web Content Accessibility Guidelines：以降、WCAGと表記）を学ぶ取り組みについてです。
過去にもnoteで、デザイナーが「WCAG」の各達成基準が定義された理由を探る方法を紹介しました（以降、「WCAGのWhy」活動と表記）。
今回はエンジニアも参加し、より実装に意識が向く方法を理解することが求められました。また、デザイナーとエンジニアが「一緒に」学ぶ仕組みを作る必要がありました。
なぜ「一緒に」が必要だったのか？
現在わたしの所属するチームでは、デザインと開発（コード）を並行で調整／再設計を行い、デザインの共通基盤として整備する、という活動をデザイナーとエンジニア協働で行っています。デザイナーと各フロントエンドのエンジニアが専属で付いて自走するチームは、弊社Chatworkでも初の試みです。
開発内容の検討とともにチームビルドも同時並行で行っていますが、チーム結成当初から「アクセシビリティに注力したい」という意思が各メンバーから上がっていました。
（これはわたしが居るチームだから、というわけではなく、集まったメンバーが自発的に表明してくれた意思です。）
ところがWCAGの理解度は「まちまち」で、なんらか皆で足並みを揃えて理解を深める必要がありました。
皆で。一緒に。
デザイナーとエンジニアが協働するチームだからこそ、大事にしたいテーマでした。そこで、ともに学んでいける勉強会の仕組みを作りました。
勉強会の内容
この方法は、わたしが「えいや！」と作成したものですが、できるかどうかを参加者（チームメンバー）に確認をして、現在はルーチンとなったプロセスです。
スコープ
学ぶ対象は、WCAG 2.1のうちまずは「A」から。AからAA、最終的にAAAも網羅する形で、参加者がどう解決すべきかを全体的に把握することを目指します。
対象「外」事項として、あえてWAI-ARIAを利用した「実装方法」を挙げています。特殊な実行方法よりも、ニュートラルなHTMLでの実現方法に注目をすることを重視しています。
また、ネイティブアプリのエンジニアも参加するため、基礎的なHTMLの知識を持った人であれば理解ができるように、標準の実装方法の理解をスコープとしました。
方法
1週ごとにデザイナーパートとエンジニアパートにわかれ、説明のし合いをするだけです。
詳細を記載すると、WCAGのいずれかの項目について、
デザイナーからエンジニアへ
「どうなっていたら」該当項目（達成基準）をクリアできるのかを共有（プレゼン）する
エンジニアからデザイナーへ
「どう実装したら」該当項目（達成基準）を守れるのか、要点をまとめ実装サンプルをもとに解説する
を1セットとして、2週ごとに担当を替えながら繰り返します。
情報ソースは、WCAG 2.1 解説書のみとしています。それ以上も以下も基本的には不要です。
※ 理解促進の足がかりとして、先に紹介した「WCAGのWhy」活動でまとめたドキュメントも利用しています。
また、フォーマットが散らかると理解やルーチン化の妨げになるため、以下の内容をテンプレートとして固定しています。基本的に前半がデザイナーの責任範囲、後半がエンジニアの責任範囲としています。
この達成基準は、どうなっていたらクリアと言えるのか？
重要ワード
例外
どう実装したらこの達成基準を守れるか？
具体的なマークアップ方法例
さらに毎回、勉強会の内容を動画に収め、上の内容を記したドキュメントとともに動画を社内YouTubeに保管し、後からの見返しも可能にしています。
解説書が難しい、へのハック
解説書は、WCAGの理解促進のためにまとめられたものです。
そうは言っても、やっぱりWCAG 2.1 解説書が難しいという人は居るでしょう。その場合には、わたしの同僚の行ったハックを試してみてください。
それは解説書の内容（日本語訳原文）をChatGPTなどのLLMに送って、わかりやすく更なる翻訳をしてもらうことです。
原文なしに問うと安易に嘘をつかれるので、原文を簡素にしてもらうことをオススメします。いくつか問う間に、自身の理解も進むと思います。
勉強会の裏目的
この方式にしたのには、裏目的があります。理由は、よく「WCAGが難しい」という声をよく聞くためです。
ですが解説書を手がかりにWCAGの各項目の深堀りをすれば、難度は下がるとわたしは考えています。ただ難しいと嘆く人は、達成基準を眺めただけで意味がわからない、と言っているように感じます。
であれば、解説書の活用方法がわかれば解決するのではないかと思ったためです。これは「WCAGのWhy」活動でも織り込んでいました。
勉強会を回してみて（2024年5月時点で23項目についての説明し合いが完了しています）解説書が読めない、という意見は今のところ上がっていませんし、聴講参加者からも「理解ができない」という意見は出ていません。
勉強会を通して解説書の読み方を覚えてもらえれば、「WCAGなんもわからん」から、「どう調べたらいいのかが理解可能」になります。一人でも「WCAGは怖くない」という人を増やす試みです。
また、餅は餅屋。専門領域を活かして説明をし合うことで、それだけでもチームビルドに役立ちます。
今回は、デザイナーとエンジニアとで共に取り組むWCAGの学び方を紹介しました。
GAAD Japan 2024ではこの勉強会を一緒に行う釜堀が、これ以外のアクセシビリティの取り組みについて発表予定です。後日アーカイブ動画なども公開されると思いますので、ぜひご覧ください。
この記事が気に入ったらサポートをしてみませんか？