次世代 Web カンファレンス A11y セッションの感想

1月13日に開催された次世代 Web カンファレンス(nextwebconf.connpass.com)に行ってきました。「発表」をせず「議論」に特化したカンファレンスです。

2回目のセッション(11:10-12:30)は3つの教室で同時開催されるテーマが A11y, CSS, Security という個人的にどれも興味のあるもので、会場ではいくつかの理由から Security を拝聴したのですが、この記事では A11y のセッションについて録画された動画を見つつ、気になったいくつかの話題について感想を述べてみます。

A11y - 次世代Webカンファレンス #nwc_a11y(YouTube)

WCAG 2.1(コントラスト比)

§

まずは2018年6月に勧告されたWCAG 2.1(W3C)に関する話題として、色の扱いについての話題。動画 4:18〜(YouTube)

これまでは文字色と背景色のコントラスト比のみが議論されていたが、ボタンの罫線なども注意しなければならなくなったというところから話が始まりましたが、これは達成基準 1.4.3 コントラスト(最低限)(W3C)、および 2.1 で新たに追加された達成基準 1.4.11 非テキストのコントラスト(W3C)に関する話ですね。

従来の基準では、文字色と背景色に最低 4.5:1 のコントラスト比が求められていましたが、これがなかなか難しいわけです。

  • デザインのテイストに合わせると 4.5:1 を満たせないケース
  • 注釈などを 4.5:1 の基準に合わせると、見出しなどが目立ちすぎてしまう

個人的には、中根さんから本質的な目標はアクセシビリティの高いサービスを提供することであって、基準を満たすことではない(YouTube)という発言があったように、 4.5:1 という数値的基準は参考情報としては有用ですし、満たせるならそれに越したことがないのはもちろんですが、その数字だけにこだわりすぎる必要はないと考えます。

アクセシビリティ・サポーテッド

§

アクセシビリティ・サポーテッド(AS)の話題、あるいは技術によって恩恵を受けるのは人間か機械か的な。動画 23:16〜(YouTube)

HTMLに関係する具体的なキーワードは以下の2つが挙がりました。

  • aria-live属性: この属性自体は WAI-ARIA 1.0 時代から定義されていたものですが、確かに最近登録フォームのソースコードを眺めていたら複数のサービスで使われているのを見ました。個人的にも入力欄のエラー表示などで使うようにしています。ブラウザや支援技術の実装状況は追っていないのですが、最近になって実装が進んできたのでしょうか。
  • longdesc属性: 完全に忘却の彼方だったのですが、そういえば2013年に Firefox 25 で対応しており(bugzilla.mozilla.org)、画像を右クリックするとコンテキストメニューに「画像の詳細情報を表示」が出現します。 Firefox への実装当時、あるいは遙か昔に Opera で実装されていた当時は情報を追いかけていたのですが、longdesc 属性など普段使わないものですから、このキーワード自体久々に耳にしました。

AIによる自動代替テキスト

§

Facebook や Instagram で実用化されている、AIによる自動代替テキストの話題。動画 1:00:38〜(YouTube)

個人的なことで恐縮ですが、自動代替テキスト機能がどんなものか試してみたくて Instagramのアカウントを作ってみたばかりなので、タイムリーな話題だったり。

「次世代 Web」と言うと新技術に目が向かれがちですが、とくにアクセシビリティの面においてはテクニカルなことだけではなく、ユーザーによる既存サービスの新しい使われ方にも注目する必要があると感じています。伊原さんが挙げられていた、ウェブページを読み上げるだけの YouTube 動画や長文スクショツイートのように、技術者目線では(悪い意味で)思いも付かないような使われ方もありますが、そういう流れに向き合うのもウェブアクセシビリティでは必要なことかなあと。

こういう現状からすれば、AIによる自動代替テキストも(Facebook や Instagram で実装されたような)写真から「食べ物」や「空」の存在を検知するだけでなく、OCRの実装も望まれるところです。ちなみに Google のサービスを活用すればOCR的なことはユーザーの手動操作により既に実現可能で、以下の手順でテキストデータを取得することができます。

  1. 画像をGoogleドライブにアップロードする
  2. Googleドライブのウェブページ(マイドライブ)から、当該画像をGoogleドキュメントで開く(ファイルを右クリック→「アプリで開く」→「Googleドキュメント」)
  3. 開かれたGoogleドキュメントの中にテキストデータが入っているのでコピペする

私の場合、海外サイトの画像や外国人の画像ツイートを翻訳する際にこの手順でテキストデータを抜き出し、さらにGoogle翻訳に掛けて日本語化するということをやっています。アルファベットはもちろんですが、中国語や韓国語もかなり精度が良くて、文脈が理解できないことはほとんど無いほどです。

要するにOCR、翻訳といった個々の技術は既に実用上問題ないレベルにあるので、あとは Twitter や Instagram などの各著名サービスがこれを自動的に代替テキストに落とし込む機能を組み込んでいただければ、多くの人にとってアクセシブルになると思います。