こんにちは。2024年ですね！
(もう3週間ほど経ちますが..、)本年もよろしくお願いします。

今回は初めてウェブアクセシビリティについてしっかり書きました✍🏻

私が昨年4月から働いている株式会社トルクでは
「デザインの力で情報格差をなくす」をミッションとして、ウェブアクセシビリティとデザイン性を両立したウェブサイトの制作を行なっています。
(実績など詳細は下記の弊社HPをご覧ください🌱)

この環境で実際に１年弱働いていると、当然アクセシビリティについて業務時間内外で勉強したり、常にアクセシビリティについて考えたりするようになりました。
今回の記事では、その中で私がアクセシビリティに関して思った・考えたことと、今年もウェブアクセシビリティに取り組んでいく上で今注目しておきたいトピックをまとめました。

補足がてら説明や事例を並べつつ書いていたら5000字を超えてしまったので、目に留まったものからお読みいただければと思います。。🫠

アクセシビリティの達成基準の詳細な内容などは、
以下のガイドや書籍、WCAGの日本語訳のサイトをご参照ください。

(240121追記)"障がい"と表記していた箇所を"障害"と修正しました。認識が遅れており推奨された表記になっておらず、また法律名に関して変換の確認が不足しており誤った表記になっており申し訳ありませんでした。

思ったこと、考えていること

自分が不便に感じていた”よくあるUI”がアクセシビリティ的にも改善が必要なUIだった

ウェブサイトやアプリを利用していて、操作できなくはないけど使いづらいなーと思うことがよくあると思います。
例えば、問い合わせフォームなどでプレースホルダーがラベル代わりに使用されていて、入力し始めると入力する項目名が隠れて分からなくなってしまう事例など。
こういった事例の詳しい問題点は以下の記事がわかりやすいです。(タイトルが少し強めですが)

私自身は今のところ認知機能や視力が十分ある状態なので、「不便だなー」と思いつつも入力できていますが、
状況によってはそのUIのせいで「フォームを送信する」という目的を達成できずに離脱してしまう方もいるということです。
短期的に内容を覚えて入力することが可能なユーザーもいますが、認知機能に障害のある方だと短期記憶で入力項目を覚えておくのは難しい場合があります。
もちろんそういった障害がないユーザーでも状況によっては混乱する可能性も十分ありますよね。

こういった、自分の感覚でも感じていた不便さが、実際アクセシビリティが不十分な点であることもあるので、今後も自分の気づきを見落とさないようにしようと思いました。

色のコントラスト比の実現の難しさと、基準について

テキスト、文字画像については、WCAG2の達成基準1.4.3にて、少なくとも4.5:1以上のコントラスト比が必要とされています。

ロービジョンの方、色覚特性のある方にとってははっきりとコントラストがないと文字を読めないですし、背景色に文字色が馴染んでいると当然誰でも読みにくいので、デザイナーとして常に気をつけるようにしているポイントです。
ですが、デザイン性と両立させながらコントラスト比を担保したり、実際に見た視認性を確保したりするのが難しいこともよくあります。。

例えば、企業のサイトの制作などでコーポレートカラーの色をデザインやUIに取り入れたい場合があると思うのですが、
そのカラーが明るめのオレンジなどの場合、背景にコーポレートカラーを敷いて文字色を白にするとコントラスト比が基準を満たさなくなるのです。

(オレンジは特にコーポレートカラーとして使われていることが多いので、noteでも何名か言及されている方がいます)

また、こちらの方も引用している以下の記事が参考になります。

色覚特性のある方対象にユーザーテストを行なってみると白文字の方が読みやすい、目が疲れにくいと回答する割合が多いとのこと。

実際自分の目で見ていても、オレンジ背景に白文字の方が読みやすいし、デザイン的にも良く感じます。
WCAGの基準はとても有益ではありつつ、現実での感じ方が全て反映されている訳ではないことも頭の片隅で覚えておきたいです。

とはいえ制作時は、まずAAのコントラスト比をクリアすることを念頭におくべきかと思うので、このような条件の時、実際の感覚でも読みやすく、デザイン性も優れた形にいかに落とし込むか引き続き考えていきます🍊

(余談)色のコントラストの新しい基準APCAの話

先述したような課題に関連して、
より人間の知覚に基づいた基準であることから、WCAG3.0ではAPCAという基準の採用が検討されています。
現状のコントラスト比は相対輝度を使って計算していますが、
人間にとっては、より明るい方の色の相対輝度が高い方が視認性が高くなる特性があるそうです。そのため現状のコントラスト比では背景が暗いダークモードの時に適切な視認性が確保できなかったり、先述したオレンジ問題なども生じてしまいます。
詳細は下記のような記事をご覧いただければと思います。

上の記事できちんと説明されている内容の概要ですが、
現状採用されているコントラスト比の基準と比較して、
背景色が明るい場合と暗い場合でそれぞれ正負の方向に値の範囲があります。最大値(最もコントラストがある)の数値も異なりますね。

また同じ２色の配色でも、どちらの色が背景色にあるかによって、Lcの絶対値が変化したりします。
※記事で紹介されている通り、２色で比較してより明るい方の白色が文字色になっている状態の方が、Lcの絶対値が大きくなります(よりコントラストがある状態)。

基準ウェイトやサイズなどもより詳細に分類されています。
ウェイトとサイズの区分が細かくなったことで考えることも増えそうですが、より現実に即した基準になっています。

先ほど引用した記事のシリーズの第３回では、
既存のコントラスト比では基準を満たせない比較的明るいオレンジの配色でも、APCAでは適合になるケースなどが紹介されています🟠

デザイン的な可能性が広がりそうですが、日本語への適用など課題もあるようです。
自分自身がきちんと理解するのにも時間がかかりそうなので、今後の動向も注目したいと思っています。

基準を満たすことは大事だけど、それだけに終始しない

まずはデジタル庁のガイドブックを理解したり、『Webアプリケーションアクセシビリティ』の書籍を参考に知識を増やしたりと基本の部分を優先的に学んでいますが、
日々アクセシビリティを意識する中で、

といったことを考えてしまうこともありました。

先述した色のコントラストの項目と似た話ですが、達成基準を満たしていたとしても見にくさ、わかりにくさを感じる人がいたり、全ての人に対して完全にアクセシブルにするのは当然難しいです。

また基準として含まれていなくても、
もっと理解しやすく、もっとアクセシブルにできる要素もあります。(後で少し触れる「やさしい日本語」などもその一例かもしれません)

まず基準達成を目標に取り組むことが利用可能なユーザーを増やすための大きな一歩になるし、それだけで思考を止めず、よりアクセシブルにできる部分は変えていく意識が大事かな〜と最近は思っています。

今注目したいトピック

障害者差別解消法の改正(2024年4月)

この改正があることをきっかけに、昨年から「ウェブアクセシビリティ」に関心を持った方も多いかもしれません。
情報が錯綜しているので先に補足をしておくと、ウェブアクセシビリティ向上に取り組むことが
今年の障害者差別解消法の改正で義務化する訳ではないです。

改正内容については、内閣府の資料に書いてある通りです。

障害者差別解消法の改正について(内閣府)

義務化されるのは合理的配慮で、環境の整備は努力義務ですので、ウェブアクセシビリティの基準を達成してなければ違法、とはなりません。

とはいっても努力義務なので、
「合理的配慮を都度提供するより環境の整備に着手した方が、長い目で見てユーザーにとっても自社にとっても有益だよね」などと考えたうえでアクセシビリティ向上するのはもちろん理想的で、
これをきっかけに一層アクセシビリティが重視されるようになるのはいいことだと思います。

WCAG2.2が勧告になった(2023年10月)

WCAG2.2ではより幅広いユーザーにとって有益になりそうな項目が多くあるので、いくつか取り上げます。

• ターゲットサイズの基準
  WCAG2.1までは、レベルAAAとして44x44ピクセルを求めていたが、WCAG 2.2の2.5.8ではレベルAAとして24x24ピクセルを求めるように
  
  手が震えやすい、上肢が不自由な方にとってターゲットエリアが小さいと非常に使いづらく、目的を達成できない原因になりますが、
  
  そうでなくても、主にタッチで操作するスマートフォンを使っている際、ボタンが小さすぎて押し間違えてしまう、ということは誰でも経験したことがあると思います。
  最低限のサイズをレベルAAの基準として設けることで、誰もが使いやすいと感じる状態が実現されやすくなりそうですね📱
  

• 入力支援の項目に新たな基準が追加
  冗長な入力(一度入力したものの再入力など)をさせない(3.3.7)、複雑な認証を要求しない(3.3.8)など、フォームやログイン、サインアップ時の入力を容易にするという達成基準が追加されました。
  
  ユーザーの認証で、パズルの操作や提示された画像の文字の入力など、複雑な操作や認知機能が必要なテストを行うことがあると思いますが、そういった認証方法は避けるか、代替の方法を用意することを求めています。
  
  状況によっては誰でも間違え得るようなテストも多いと思うのでこれも全てのユーザーにとって有益になりそうですね。

やさしい日本語

webに限った話ではないので聞いたことがある方もいると思うのですが、必要なサイトには取り入れていくべきだなと改めて思ったので挙げました。

「やさしい日本語」とは普通の日本語よりも簡単で、外国人にもわかりやすい日本語のことです。

阪神淡路大震災で被災した外国人の方にで、日本語も英語も十分に理解できず必要な情報を受け取れなかった人がいたことから、そのような方々が災害発生時に適切な行動を取れるように考えられたことが始まり。

日本に住む外国人にとって、母語の次に使う第二言語が日本語であることが多く、
そういった方全ての母語に対応して情報を伝達するのは現実的でないため、理解しやすい「やさしい日本語」が大きな助けになるそうです。

NHKのやさしい日本語で書かれたニュースサイトもありますし、私は最近中学受験の入試問題の事例として電車の広告で見かけることも増え、注目が高まっているのかと思いつつ、取り入れるために詳しく調べることなどはしていませんでした。

ちょうど先日社内で「やさしい日本語」を話題にあげてくださった方がいて、
やさしい日本語で表示される自治体のサイトの事例を見たり、やさしい日本語の翻訳のルールなどが明確に書かれている手引きを共有していただきました。それをきっかけにここ数日ですが改めて情報収集をしています。

「やさしい日本語」の手引き(静岡県庁)

まさに今年の元旦にも震災が発生しましたが、そういった際に情報を得るための自治体の緊急時用ウェブページなどは、より優先的にやさしい日本語に対応すべきだなと感じます。

が、「やさしい日本語」は緊急時以外にも日常のさまざまな場面で役に立つものです。
例えば日本で働く外国人にとって、年末調整や会社の規則など、「難解だけど理解できないと困るもの」がたくさんあると思います。就労関係だけでなく役所の手続きなども同様です。
また、日々の身の安全に関する情報など、小さい子供も理解できるようにすべき情報はやさしい日本語で説明する必要があると思います。

SmartHRさんの、やさしい日本語の概要や取り組みをまとめているnotionがわかりやすかったので見てみてください。

長くなりましたが、私がアクセシビリティについて今考えていること、注目していることは以上です🔍

今年は引き続きデザイン面のスキルアップに加えて、アクセシビリティについてもより深く幅広く理解していきます📍

こちらのギャラリーサイト(弊社が運営しています)にも、引き続きアクセシビリティとデザインの両面で参考になるサイトをたくさん掲載していきたいです🪺

ここまでお読みいただきありがとうございました！