#2「WCAG 2.2 作業草案の気になるポイント」

加藤

こんにちは！

古川

こんにちはー！

加藤

ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのポッドキャストです。本日の司会は設計チームの加藤が務めさせていただきます。お相手は同じく設計チームの古川さんをお呼びして、先日ドラフトが公開されたWCAG 2.2について何が変わったのか、どういう対応が必要なのかを古川さんにお聞きしたいと思います。
古川さんよろしくお願いします！

古川

よろしくお願いします！

加藤

はい、ではさっそくですが、最初にWCAGとは何かについて簡単に教えていただけますか。

古川

はい。WCAG、Web Content Accessibility Guidelinesの略なんですけど、これはどんな状況だったり、境遇だったり、どんな特徴を持っている人でも、Webのコンテンツを使いやすいようにするためのガイドラインです。
具体的に一体何にしたらいいのっていう項目が定められていて、その項目それぞれのことを達成基準と呼びます。この達成基準の難易度が、A（シングルエー）、AA（ダブルエー）、AAA（トリプルエー）、と呼ばれる三段階になっていて、とてもアクセシブルなサイトに近づけるのがトリプルエーまでを満たした時です。ただ、トリプルエーというか、レベルが高くなるにつれて対応がどんどん難しくなっていくものになっています。ミツエーリンクスではWCAG 2.1ですね、2.1のシングルエーを標準対応としています。

加藤

はい、ありがとうございます
先日公開されたWCAG 2.2は、まあまだドラフトの段階なのでミツエーリンクスの標準対応は2.1にしたがっているという感じですね。

古川

そうですね。

加藤

はい。ではこのWCAG 2.2でどういう変更があったのかについて簡単に教えていただけますか。

古川

はい。まずは達成基準が全体を通して9つ増えました。あとは WCAG 2.1ではダブルエーのレベルだった項目「Focus Visible」がレベルAに移動しました。全体的な達成基準の特徴としては、認知障害を持つユーザーの方だったりとか、モバイルデバイスおよび電子ブックのユーザーの方がよりサイトを使いやすくなるための基準が追加されてます。
これなんですけど、WCAG2.2についてこれ以降新しい達成基準はないって、追加予定はないっていう風にアナウンスをされていて、あとはWCAG 2系では、現段階ではこれでバージョンのアップデートの予定は最後ですという風にW3Cがアナウンスをしてます。

加藤

ちなみにWCAG 2.1が勧告なったのっていつ頃でしたっけ？

古川

えーと2018年6月でしたね。さらにその1つ前のWCAG 2.0は2008年12月の勧告でWCAG 2.0から2.1の勧告までは大体9年半くらいのスパンがありました。2.1からWCAG 2.2が2021年半ばまでに勧告予定とアナウンスされてるので、次の勧告までは大体3年くらいかなっていう感じですね。

加藤

なるほど。2.0から2.1のアップデート期間に比べるとかなり早いペースで勧告まで進んでいるっていう感じですね

古川

そうですね。

加藤

はい、ありがとうございます。基本情報を教えてもらったところでWCAG 2.2のアップデートについて、フロントエンド界隈などでとくに注意すべき点とかあれば古川さん目線で教えてもらえますか。

古川

そうですね、まあ自分が一番気になってるのがやっぱり見た目にまつわる項目が追加されている点ですかね。その追加された項目の中で見た目にまつわる項目が、「Pointer Target Spacing」と「Focus Appearance (Minimum)」と「Focus Appearance (Enhanced)」っていう3項目なんですけど、「Pointer Target Spacing」についてざっくり言うと、クリックするターゲットとの幅の間隔が44ピクセル以上あることっていう基準になってます。
で、「Focus Appearance」に関してはフォーカスのスタイルのコントラスト比だったりとか大きさだったりとか、フォーカスされた要素とそれ以外の要素の間隔などについて具体的な指定がされてます。
この見た目周りなんですけど、フロントエンドだけじゃなくてデザインデザイナーさんとも連携が必要で、コーディングする前にデザイナーさんとのすり合わせが必要なあたりかなと思ってます。

加藤

ダブルエーに準拠しようとするとレイアウトかなり気を使わなきゃいけないなーっていう印象ですね。

古川

そうですね。

加藤

はい、他に何かありますか？

古川

ほかには、あとはさっきの追加された見た目の達成基準に関連して、おそらくその「Focus Visible」の移動がやっぱり大きなポイントかなって思ってます。この「Focus Visible」、フォーカスの可視化っていうのが、キーボード操作が可能なあらゆるUIにはそのフォーカスの効果が見えるようにするっていう項目なんですけど、これが「Focus Appearance」がダブルエー以上に比べて、これがシングルエーの達成基準になっているので、まずはそのフォーカスが見えるというもの達成してから、まぁ見た目の、より、なんていうんですかね、難しい達成基準になっていくのかなっていう風に思います。

加藤

まず「フォーカスが可視化されているかどうか」っていう基準点と、その「可視化のされ方がどうなっているか」っていう基準点が別々に定義されているっていう感じですよね。

古川

そうですね。

加藤

どちらもその見た目に影響がある達成基準だと思うので、エンジニアだけではなくてデザイナーさんとコミュニケーションが必要になってくるという感じですね。

古川

そうですね。

加藤

はい、ありがとうございます。個人的にはですね、「Single page Web Applications」って言葉がこのWCAG、まあガイドラインに載ったってことは個人的にちょっと注目している点ですね。具体的に言うと「Findable Help」の項目なんですけども、この「Findable Help」が何かって言うと、たとえばWebサイト上にサイト内検索よくあると思うんですけど、そのサイト内検索を設けるのであれば、Webサイトすべてのページで同じ位置、たとえばページの右上にある場合は全ページで右上にあるべきという指摘があるんですけども、その文言の中に「シングルページアプリケーションにおいても」という言葉が入っていて、 こうやっぱりSPAだと通常のWebサイトよりもアクセシビリティの確保が難しい時があるなぁと個人的に思っていて、その辺りの整備がそのガイドライン上でもどんどん進んでいくのかななんていうことを考えています。

加藤

はい、そんなところですかね。

古川

そうですね。

加藤

はい、ありがとうございました。WCAG 2.2はまだドラフトという立ち位置なんですけども、この後どういうプロセスを経て勧告まで行くのかっていうところを簡単に教えてもらえますか

古川

はい。WCAGに限らないんですけどW3Cで作成している仕様書は段階を経て勧告されます。段階をざっくり言うとまあ4段階あって、まず始めに作業草案、次に勧告候補、えー次に勧告案で、最後にW3C勧告となります。
この各工程をざっくりお話しますと、WCAG 2.2はさっきも話があった通りその現段階でワーキングドラフト、作業草案の段階で、これから勧告に向けてレビューが重ねられていきます。まず1つめのその作業草案の段階は、そのW3Cのコミュニティでのレビューが行われて、何回もその修正作業を重ねていく段階になります。でまあそれらがある要件を満たすと勧告候補に移行します。
でこの勧告の段階でもレビューが開催されるんですけど、重要な部分で変更が起きることはないようです。で、それらでレビューが行なってそれが完了したら次に勧告案に進みます。ここではその間、できあがった文章が勧告まで進めてもいいかどうかっていうのを議論する段階になります。ここで議論をされて可決がしなかった場合は作業草案まで戻されることがあります。この勧告案の段階でもう勧告してもオッケーだよってなったら、最後に勧告となりますね。
勧告したらまあその内容が確定しているって言うことで、その、世の中に正式な引用規格として提供されるようになります。

加藤

かなりたくさんのステップを踏んでいるんですね。

古川

そうです。

加藤

我々が普段、こう目にしている仕様書ってのは、すべてこのステップを踏んでいるってことですよね。

古川

そうですね。

加藤

まあそのWCAG 2.2も2021年半ば、あとまあ1年くらいでこのステップを踏んで最終的には勧告まで行きますよとアナウンスしてるわけですね。

古川

そうですねやっぱりその、標準となる文書なので、たくさんの人がたくさんの時間をかけて完成されるものになるんだろうなあと思いますね。

加藤

そういう意味で言うとその今のドラフトという段階は、GitHubのIssuesとかでこう、誰でもパブリックコメントを残せる段階だと思いますので、ぜひ意見がある方がいらっしゃれば、GitHub上にコメントするといいのではないかと思います。

古川

はい。

加藤

はい、というわけで今回のミツエーリンクスポッドキャストでは、WCAG 2.2のドラフトから、どういうところに注意すべきなのかについてお話いただきました。ものによっては大きくウェブサイトを変更する必要がある場合もあるため、勧告を待たずにワーキングドラフトの内容を見ておくとよさそうです。弊社のアクセシビリティBlogでもWCAGに関する情報を発信していますので、ぜひご覧ください。

最後にミツエーリンクスでは、スマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行なっていますのでチェックしてみてください。
またこのポッドキャストは Apple Podcast、Google Podcast、Spotify で配信していますのでお好みのプラットフォームでフォローいただけると最新のエピソードをすぐ視聴できます。ぜひご活用ください。
それでは今日はこの辺で。ありがとうございました！

古川

ありがとうございました！