こんにちは。弁護士ドットコムの太田です。
毎年、5月の第3木曜日は "Global Accessibility Awareness Day (GAAD)" とされています。世界的にデジタル分野のアクセシビリティを考える日ということで、アクセシビリティ関連のイベントが盛り上がります。日本でもさまざまな発表がなされたり、イベントが開催されたりします。
そんなわけで、今年2022年の第三木曜日である5月19日に、GAAD Japan 2022 というイベントが開催されました。このイベントで「大変だ アクセシビリティ なにすれば 〜川柳で見るアクセシビリティ再入門〜」と題してお話ししてきましたので、その様子や裏話をご紹介します。
このセッションのコンセプト
GAAD Japan 2022にはさまざまなセッションがあります (参考: GAAD Japan 2022 登壇者・セッション)。企業や組織によるWebアクセシビリティへの取り組み事例の紹介、新しい技術やツールの紹介、障害当事者による取り組みの紹介など、実践的で参考になる内容が数多くあります。
その一方、Webアクセシビリティの初心者、入門者に向けたセッションは不足していました。そこで、アクセシビリティ初心者向けのナビゲーターとして著名な山本和泉(やまもと いずみ)さん(@izuizu)と一緒に、「Webアクセシビリティ再入門」をテーマにセッションを行うことになりました。
事前の打ち合わせで、事務局・司会を担当されるインフォアクシアの植木さんと話していたところ、植木さんから川柳が飛び出し、川柳でまとめたら面白いのでは、という話になりました。川柳だけで間がもつのかという懸念もありましたが、すこし考えてみていくつか川柳を作ることができましたので、川柳で突き進むことにしました。
紹介した川柳と解説
実際にセッションでとりあげた川柳をご紹介します。
大丈夫 ガイドラインが ちゃんとある
まずは最初の句。何から始めたら良いのか全くわからない、という方に向けての1句です。
Webアクセシビリティへの取り組みには、道標があります。事実上の標準となっているガイドライン (Web Content Accessibility Guidelines / WCAG) があり、日本語訳もあります。
- Web Content Accessibility Guidelines (WCAG) 2.1
- Web Content Accessibility Guidelines (WCAG) 2.1 日本語訳
ガイドラインそのものはそれなりに難解なのですが、解説、早見表、書籍などなど、理解の手がかりにできるものもたくさんあります。簡単なところから少しずつでも触れていけると良いでしょう。セッションでは以下をご紹介しました。
まず欲しい 代替テキスト あと見出し
次の句では、最初のステップとしておすすめする取り組みを詠っています。
画像に代替テキストを指定すること。Webアクセシビリティの基本中の基本ですが、これが、意外にできていないことがあります。これを確実に設定するだけで、アクセシビリティが大幅に向上します。
並行して実践したいのが、見出しを設けることです。見出しがあると、スクリーンリーダーではそこにジャンプできます。スクリーンリーダーを利用していない人でも、見出しを頼りに読みたいところを探すことができ、とても有益です。
代替テキストと見出し、この2つをまず確実に設定するようにしましょう。
いつだって 忘れちゃいけない キーボード
先の句に続き、基本的かつ重要な取り組みの紹介です。
マウスを使わず、キーボード操作だけですべての機能を利用できるようにしましょう。ボタンやリンクがキーボードで操作できるか、マウス操作でしか開かないメニューのようなものがないか、といった観点で検証してみます。
特に最近では、キーボードフォーカスが絶対に当たらないボタンなどがあって問題になることが多いようです。JavaScriptフレームワークを利用すると簡単にボタンなどを作ることができますが、クリック操作だけでなくキーボードでも利用できることを確認しましょう。基本的にはHTMLのbutton要素を利用すれば問題ありません。
これは何? ここをクリック 何起きる
ボタンがキーボードで操作できればそれだけで良いというわけでもなく、もうひとつ注意したいことがあります。それが次の句です。
よくみられるのは「ここをクリック」の「ここ」だけがリンクになっているパターンです。英語では"click here"の"here"がリンクになることから「here症候群」とも呼ばれます。
スクリーンリーダーには、リンクだけを次々辿っていく機能があります。そのような機能を使ったとき、「ここ リンク」「こちら リンク」などと読み上げられてもリンク先が何なのか全く予想できません。
似た例で、ボタンにラベルがないというケースもよくあります。特に最近よくあるのは、アイコンかボタンになっていて、テキスト情報がないというケースです。スクリーンリーダーは単に「ボタン」とだけ読みますが、押した時に何が起きるのかわかりません。
干渉は ダメよ絶対 四兄弟
アクセシビリティガイドラインでは、やってはいけないアンチパターンも取り上げられています。特に絶対にやってはいけない「干渉」とされるものが4つあり、私はそれらを「干渉4兄弟」と呼んでいます。
「干渉」とは、そのコンテンツだけでなく、他のコンテンツにも干渉してアクセスを妨げる問題のことです。
たとえば、画像に代替テキストがないとアクセシビリティの問題を起こしますが、その問題は該当の画像だけにとどまります。画像の内容は理解できず、アクセスできませんが、画像の周囲にあるテキストが読めなくなったりすることはありません。
しかし、干渉と呼ばれる問題は、そのコンテンツだけでなく、周囲のコンテンツもアクセスできなくします。干渉を起こすとされる問題は以下の4つです。
- 音の自動再生
- キーボードトラップ
- 動き続けるコンテンツ
- 閃光
以下、順に簡単に説明します。
音の自動再生
音が自動再生されると、スクリーンリーダーの音声をかき消してしまい、操作を妨げることがあります。こうなると、スクリーンリーダーの利用者は何もできなくなってしまいます。
キーボードトラップ
キーボードトラップは、キーボードフォーカスの移動を閉じ込めてしまうパターンです。キーボード操作時は、通常、Tabキーでキーボードフォーカスを移動し、目的の場所でEnterキーを押して操作します。このフォーカスの移動をJavaScriptなどで制御している場合、やり方によっては、Tabキーをいくら押しても同じところをぐるぐる移動し、外に出られなくなってしまうことがあります。
動き続けるコンテンツ
コンテンツが動いたり、点滅したり、スクロールする場合があります。このようなコンテンツは人の目をひきつけます。多くの人は、動くコンテンツに目を引かれても無視して他の場所を見ることができますが、中にはそうでない人もいます。動き続けるコンテンツによって他の箇所が読めなくなることがあるのです。
動き続けることが問題なので、止められれば問題ありません。数秒程度で自動的に止まるようにするか、何らかの方法で停止できるようにする必要があります。
閃光
画面が激しく明滅、フラッシュすると、気持ち悪く感じることがあります。人によっては、気分が悪くなって倒れてしまうこともあります。日本ではポケモンショックという事件がよく知られています。
こうなってしまうと、他の箇所を読んでいる余裕などないということになります。
アクセシビリティの問題を体験できるサイト
以上が干渉4兄弟でしたが、説明されてもピンとこないという方も多いでしょう。そんな方におすすめなのが、アクセシビリティの問題を体験できるサイトです。
紹介した4兄弟のうち、閃光は問題が大きすぎるため再現していませんが、他の3つは体験できます。他にもさまざまな問題を体験できますので、ぜひ一度試してみてください。
アクセシビリティ みんなでやれば こわくない
そして、このセッション最後の句です。
アクセシビリティへの取り組みは、決して孤独な戦いではありません。さまざまな人やさまざまな組織が、さまざまな取り組みを発表しています。質問できるコミュニティもあります。
セッションでは以下のサイトや記事をご紹介しました。
- ウェブアクセシビリティ基盤委員会 問い合わせ
- accrefs - Webアクセシビリティの参考資料まとめ
- Join A11YJ on Slack
- サイボウズ アクセシビリティ
- freeeアクセシビリティー・ガイドライン
- アクセシビリティ | SmartHR Design System
- 弁護士ドットコム、アクセシビリティ対応でブランドカラーを変更
これらのコミュニティや他社事例を参考に、手軽にできるところから取り組みを進めていけると良いでしょう。
みんなが応援しています!!
番外編
実際にご紹介した川柳は以上なのですが、番外編として、ご紹介できなかった川柳を2つ解説します。
読めないよ コントラストと 文字サイズ
アクセシビリティ向上のための施策として、多くの人が真っ先に思いつくものです。
文字と背景色のカラーコントラストが低いと読めない、文字が小さいと読めない、という問題です。問題点が非常にわかりやすく、取り組みもしやすいため、真っ先に紹介されることも多いでしょう。
このセッションでも取り上げようと思っていたのですが、どう考えても時間に収まらないため、何かをカットする必要がありました。
先に紹介してきた川柳の多くは、WCAGでレベルA (シングルA) の基準とされているもので、すべてのサイトが対応しなくてはならない、必須のものです。それに対して、文字サイズとカラーコントラストはレベルAA (ダブルA) の基準とされており、優先度が一段低くなっています。
これは、文字の色やサイズは変更できるためです。文字が読みづらいことは望ましくありませんが、最悪、ブラウザやOSの設定を変更すれば読めるようになります。
そのため、文字のサイズやコントラストの問題については、このセッションでは取り上げないことにしました。とはいえ、やらなくて良いとか、意味がないという話ではありません。手始めとしてわかりやすく、効果も出しやすい施策です。特に、ビジュアルデザイナーの方が取り組みを始める際は、ここから始めるのもおすすめです。
気をつけよう 甘い言葉と オーバーレイ
最後にもう1句。これは、このセッションの企画段階で植木さんが詠まれていた句です。セッションの終了時にも植木さんが自ら詠まれていましたが、内容の説明をする時間がとれませんでした。
ここでいう「オーバーレイ」とは、「アクセシビリティオーバーレイ」と呼ばれるものです。既存のウェブサイトに対して、文字の拡大、色の変更、読み上げといった機能を後から追加し、それによってアクセシビリティの問題を解決しようとするツールを指します。詳しくは以下の記事が参考になります。
このようなツールは、一見するとアクセシビリティの向上に役立ちそうですが、普段から支援技術 (スクリーンリーダー、画面拡大ソフトなど) を利用している障害当事者にはあまり恩恵がないものです。また、場合によっては、これらのツール自体が問題を抱えているケース、ツールによって逆にアクセスしにくくなるケースもあるとされ、批判がなされています。英語ですが、Overlay Fact Sheet というサイトに情報がまとまっていますので、気になる方は参考にしてみてください (日本語訳の動きもあるようです)。
日本にもこの手のツールは昔からありましたが、特に最近、官公庁や自治体を中心にアクセシビリティオーバーレイツールの導入が進んでおり、専門家からは問題視されている状況です。この句は、そんな状況に一石を投じたい、少し立ち止まって考えてみてほしいという気持ちが表れたものになっています。
まとめ
セッションで紹介した川柳6句と、番外編2句をご紹介しました。セッションタイトル自体も川柳ですので、それも含めると9句を詠んだことになります。
アクセシビリティへの取り組みを川柳で紹介するのは、やってみるとなかなか面白く、取り組むことや注意点などを身近なものとして感じやすいように思いました。逆に、困ったことや悩んだことなどを川柳にしてみるのも面白いのではないでしょうか。
Twitterの#a11y川柳というハッシュタグで、川柳をいくつか投稿していただいています。皆さんも、アクセシビリティ関連で何か気になったとき、川柳を詠んでみてはいかがでしょうか。
