理解と品質向上のために、デザイナーとエンジニアが今から取り組むべきウェブアクセシビリティ社内浸透施策
法改正や、コロナ禍を契機にデジタル化が進んだことにより、ソフトウェアやサービスなどはよりウェブアクセシビリティに配慮した品質基準が求められるようになりました。
その反面、Sun*社内ではプロジェクトの中でウェブアクセシビリティに触れる機会はまだ少ないのが現状です。社員それぞれの興味関心や理解度も異なるため、まずはウェブアクセシビリティの基本的な知識を知ってもらい、ライトな浸透を図ることが大切だと考えていました。
そこで、私たちはエンジニアやデザイナーを対象に「ウェブアクセシビリティを知ってもらう」ことをゴールに定め勉強会を設計していきました。
今回は、勉強会の企画に携わったDesignerの村松 享、エンジニアの岡藤 裕太、Designerの岡崎 拓也に、勉強会を通して社内でのナレッジ共有を行った背景や、ウェブアクセシビリティの重要性について話を聞きました。
勉強会の開催で理解できた「デザイナーとエンジニアが実装で重要視していること」
── はじめに、社内でウェブアクセシビリティの勉強会を開催するに至った経緯について教えてください。
村松：2024年4月の法改正で「民間事業者の合理的配慮の提供義務化」が施行されたこともあり、ウェブアクセシビリティの基礎知識や重要性について、社内でも学んでもらいたいと考えていたことから勉強会を実施しました。
また、日々の業務ではウェブアクセシビリティに触れる機会は少ないと感じており、エンジニアやデザイナーといったプロダクト開発に携わるメンバーに、ウェブアクセシビリティを知るきっかけを与えたいという思いもありました。
ウェブアクセシビリティを理解しておくことで、プロダクトのユーザビリティやUI/UXの品質が上がるため、モノづくりに関わるメンバーは知っておくべき知識だと捉えています。
── ウェブアクセシビリティを知るためのきっかけづくりとして実施した勉強会ですが、デザイナーとエンジニア合同で開催した背景や意味についても教えてください
村松：ウェブアクセシビリティに興味がある人もそうでない人も、まずは知る機会を設けることが大事だと考えていましたね。
Sun*でメニュー化しているウェブアクセシビリティ診断を行う上で、ウェブアクセシビリティを理解していた方が今後の備えになりますし、「気づくべきところで気づける」ようになると思います。
例えば、スクリーンリーダーで画像を読み上げる際に、imgタグのalt属性を使用すれば、その画像の説明が読み上げられることがわかります。この理解をもとに、画像をどの位置に、どのように配置するのが最適かを判断できるようになります。こうした判断力を身につけることで、ウェブアクセシビリティにも配慮したデザインが可能になると思います。
岡藤：意図としては村松さんが仰った通りで、合同勉強会にしたことによって、「エンジニアから見たデザイナーの仕事は何に重きを置いているか」を知ることができたのは非常に良かったと感じています。
エンジニアが見落としがちなスタイルの部分も、デザイナーが意図を持ってそのスタイルにしていることが伝わることで、デザイン通りにマークアップしてもらえるような意識の醸成にもつながったと思いますね。
逆にデザイナー視点で見ると、ウェブアクセシビリティとHTMLのマークアップは切っても切れない関係であり、HTMLの前提知識がないと、少し理解しづらいかもしれません。
どうしても職種が違えば、「デザイナーが実装の上で重要だと考えること」と「エンジニアが実装の上で重要だと考えること」が違うので、お互いに大事にしていることを生かし合うのが、良いプロダクトを作る上では欠かせないポイントだと思います。
そういう意味でも、デザイナーとエンジニアのお互いの領域を知るのは、非常に重要なことだと思います。
── 実際にウェブアクセシビリティ勉強会をどのように設計していきましたか？
村松：勉強会を開催するにあたり、社内のデザイナーやエンジニアがウェブアクセシビリティに対してどのような認識を持っているのかを擦り合わせするところから始め、そこからどういう方向性で勉強会を行えばいいかを決めていきました。
岡藤：「ウェブアクセシビリティを知ってもらう」ことを勉強会のゴールに定め、最初は体験型のコンテンツをやろうと準備を進めていきました。
例えばスクリーンリーダーで、あらかじめ用意したコンテンツを読み込んでもらう体験を考えていました。しかし、それをやろうとすると時間がかかってしまうのがネックでした。
なので、その部分は動画を撮って勉強会の参加者に見せるように工夫しました。
コントラストの部分も、一からデザインを作らずに既存のものを転用するなど、時間制限があるなかでいかにウェブアクセシビリティを知ってもらえるかというのを意識しました。
最終的には、「座学でウェブアクセシビリティを知ってもらう」ように勉強会の方針を定めつつ、村松さんにはワークショップの内容も考えてもらい、全3回に分けて開催することを決めていきました。
初回は、過去に勉強会を開催した経験がある村松さんに、ウェブアクセシビリティの概要や全体像を最初に話してもらい、次にデザイナー視点の勉強会とエンジニア視点の勉強会をそれぞれ実施しました。
勉強会で学んだことを「インプットの材料」として持ち帰ってもらう
── デザイナーとエンジニアの事例を取り上げたと思いますが、それらはどういう基準で選んだのでしょうか？
岡藤：事例については岡崎さんと協力しながら、ウェブアクセシビリティの中で必須レベル（A）のものを選定し、「デザイナー観点から見た方がいい事例」と「エンジニア観点から見た方がいい事例」のグループ分けを行いました。
加えて、エンジニアにおいてはフォーム周りの知識もウェブアクセシビリティと合わせて抑えておくべき内容だったため、その観点からも事例を選びました。
岡崎：私の担当したプロジェクトでは、実際にウェブアクセシビリティ診断を行っていたのですが、そのなかで引っかかるポイントが多かったものを事例としてピックアップしました。
── 全3回の勉強会を開催してみての感想や所感をお聞かせください。
村松：参加者の方からは「ウェブアクセシビリティを理解するのは難しい」という感想を多くいただきました。
やはり、プロジェクトで取り組む機会は少ないですし、取り組むことでどんな効果があるのかが、少しわかりにくいかもしれません。
そういう意味では、全3回の勉強会でウェブアクセシビリティの知識やポイントを全て腹落ちしてもらうのは難しく、「理解が難しかった」という反応についてはある程度予想していました。
ウェブアクセシビリティの理解が難しいからこそ、今回の勉強会が最初の一歩を踏み出すきっかけにはなったのではと考えています。
岡崎：勉強会の参加者からは、積極的に質問をいただき、インタラクティブに議論することができたのは良かった点でした。
岡藤：ウェブアクセシビリティに必要なエンジニア周りの知識は、踏み込めば踏み込むほど理解が難しくなっていきます。同様に、ウェブアクセシビリティを専門にやっている人も、WAI-ARIA（ウェイアリア）を全て覚えていないと思うんです。
私の狙いとしては、勉強会で学んだことを持ち帰ってもらい、後から「こんなのやったな」と思い出してもらうことでした。
ある種、インプットの材料として使ってもらえるように、配布資料には参考となるURLを記載し、後で振り返ることができるように留意しました。
「使えるものかどうか」や「誰が使うのか」を意識すること
── ウェブアクセシビリティの観点で、実際に心がけていることや大事にしていることはありますか？
岡藤：ボタンはボタンらしく、リンクはリンクらしくといった「要素の振る舞い」を重視していますね。ボタンが押せる/押せないをはっきりさせたりと、誰が見てもボタンだとわかるようなUIを作るように意識しています。
デフォルトの時であればボタンが押せる状態を作る。エラーが出ていればその状態がわかるように作るなど、あらゆるパターンの状態を想定した上で、それに基づいた実装ができればいいと考えています。
村松：ウェブアクセシビリティに配慮していくためには、アクセシブルなプロダクトであるのが前提で、「使えるものかどうか」が基準になってきます。
どのデザインに対してもそうした基準を意識しつつ、視認性や可読性にも留意しながら設計していますね。
岡崎：コントラストを特に意識しながら制作していますね。例えばエラー表示に関しては、赤色だけで表現しがちですが、ユーザーに最適なコントラストになるように心がけています。
── ウェブアクセシビリティへの理解を深めるにはどうすればいいのでしょうか？
岡藤：普段から制作するときに、ウェブアクセシビリティの目的である「それは本当に誰でも使えるUIになっているか」というのを意識するのが大事だと思いますね。
一方で、 ウェブアクセシビリティは全部に適用する必要はないと考えています。
ターゲットが明確になっているプロダクトでは、ウェブアクセシビリティの向上に努めても、一定のユーザーしか使わないのであまり効果がないかもしれません。
「誰が使うのか」というペルソナを捉えた上で、ウェブアクセシビリティを意識していくことが大切になるのではないでしょうか。
あとは、一つひとつのUIに対してもなんとなく実装するのではなく、ユーザビリティを考えて、「誰に向けてこういう配置にしたのか」というのを言語化できるようにしておくのも大切です。
デザイナーとエンジニアが垣根を超えて仕事をする機会を増やしたい
── 最後に、デザイナーやエンジニアが勉強会を通してナレッジシェアする意義や価値について教えてください。
村松：デザイナーやエンジニアと交わって、勉強会の設計から実施に至ったのは、私にとって初めての試みでした。
実際に取り組んでみて、デザイナーとして働いているだけでは得られないエンジニアの考え方や視点を学ぶことができ、新たな気づきにつながったと感じています。
Sun*の特徴であるBTC（ビジネス、テック、クリエイティブ）人材のコラボレーションは、プロジェクト単位では行われていると思いますが、全体を通しての横のつながりはまだまだ少なく、ウェブアクセシビリティの取り組み以外にもBTCそれぞれのメンバーがコラボレーションしていくカルチャーが作れたらいいなと思っています。
岡藤：今回の勉強会で扱ったウェブアクセシビリティは、使いどころが限られるテーマだったと思いますが、コンポーネントレベルからデザイナーとエンジニアが協働してプロダクトを作り上げていく取り組みもやっていければと思っています。
そこができれば、Sun*のデジタライゼーションで採用しているアジャイル開発手法とも相性がよく、今後うまく取り入れていきたいですね。
岡崎：岡藤さんの話したことは、デザインチームとしてもやっていくべきことだと認識しており、今回の勉強会をきっかけにデザイナーとエンジニアが垣根を超えて、一緒に仕事をしていく機会が増やせればいいなと考えています。
ウェブアクセシビリティについてはこちらの記事もあるので、ぜひご覧ください。
ウェブアクセシビリティ対応を進める必要があるけれど、知見や対応のリソースが不足している、進め方に不安がある、またウェブアクセシビリティを起点にプロダクトのUIUXを見直したい、といった場合は下記フォームからお気軽にご相談ください。