【デパート流】Web制作会社におけるウェブアクセシビリティへの取り組み事例

デパートでのアクセシビリティへの関心はここ最近で急に出てきたものではなく、以前からエンジニアチームではアクセシビリティ勉強会の開催や、コーディングガイドラインへアクセシビリティの項目を追加するなど、アクセシビリティに関する取り組みを継続的に実施してきました。

しかし、会社全体を見渡すとまだまだアクセシビリティの認知度が低く、アクセシビリティに関する経験や知識には偏りが見られ、アクセシビリティの認知度向上と対応スキル標準化が課題となっていました。

外に目を向ければ、2024年4月に障害者差別解消法の改正法が施行され「合理的配慮の提供が義務化される」と、Web業界で話題になっており、弊社が携わらせていただくプロジェクトにおいてもアクセシビリティ対応が要件に取り込まれるケースが以前より増加しています。

今後ますますアクセシビリティの重要性が注目される業界情勢の変化は、社内でいま一度アクセシビリティに向き合う機運の高まりだと捉え、あらためて会社としてアクセシビリティの取り組みを強化していくことになりました。

勉強会の開催

まず初めに、アクセシビリティへの基本的な理解を促進するため、全社向けの勉強会を開催しました。

勉強会は「アクセシビリティとは？」から始まり、アクセシビリティの重要性を説明するために、「情報設計」「デザイン」「法令遵守」「社会的責任」「マーケティング」それぞれの視点からポイントを解説しました。

そして、社内で進めているアクセシビリティの取り組みや会社が目標にしているレベルについても共有し、会社全体でアクセシビリティに対する認識を合わせました。

また、デザイナー向けにも勉強会を開催し、デザイン作成時に注意すべきポイントや過剰対応にならないようにする考え方のコツなど、デザイナーにフォーカスした具体的なアクセシビリティ対応の事例や改善方法を解説しました。

デザイナー向けの勉強会では特にたくさんの質問が飛び交い、非常に熱量のある時間だった印象があります。エンジニアから他の職種へ熱意が広がっているように感じました。

勉強会の開催を通じて会社全体のベクトルを揃えられたことは、今後アクセシビリティに関する取り組みを進めていくための地盤作りとなりました。

輪読会の実施

エンジニアチームではこれまでもアクセシビリティの取り組みを実施していたものの、メンバーによって前提の経験や知識は様々でした。

そこで、アクセシビリティの理解を体系的に深めるために、エンジニアチームで書籍の輪読会を実施しました。（会社の制度を利用して、1人1冊の書籍を購入しました）

進め方は、各章ごとに担当者を決めて事前に要約をし、毎週の輪読会で共有するという方法です。

題材には『デザイニングWebアクセシビリティ』を選びました。少し古い書籍ですが、いわゆるガイドライン対策のような表面的な対応だけではなく、根本からアクセシビリティに向きあう内容で、今後の応用にもつながる基礎が学べると感じたことが選定理由です。実際に輪読会にて読了しましたが、これから足並み揃えて始めるには最適だと感じました。

輪読会では書籍の内容に関する質問や議論はもちろんですが、そこから派生して出てきた疑問などについても参加者でお互いの考えや知識を共有することができました。

参加者全員が体系的な知識をインプットすることで、アクセシビリティのスキルを一定のレベルまで底上げすることができたと感じています。

アクセシビリティチェックシートの導入

制作物がアクセシビリティを確保できているかどうかを確認するには、WCAG（Web Content Accessibility Guidelines）などのガイドラインを使用する必要があります。しかし、アクセシビリティ対応にまだ慣れていない人にとって、ガイドラインの達成基準に準拠しているかどうかを判断することは簡単ではありません。

アクセシビリティの対応経験に関わらず、まずは簡単に始められることが重要だと考え、ガイドラインをわかりやすい言葉に置き換えたり、補足を追記したデパート独自のアクセシビリティチェックシートを作成しました。

このチェックシートは社内でアクセシビリティの簡易的なチェックをする際のガイドとなるものです。チェックシートを活用した検証を実施することで、アクセシビリティ対応の品質標準化が期待できます。

アクセシビリティチェックシートの作成時は、WCAGに関する知識だけでなく、他企業様のアクセシビリティガイドラインなどの情報も集め、内容を理解・整理しました。複数名で互いの理解を確認したり、議論をしながら進行したため、最終的な成果物をただ作るだけではなく副次的にアクセシビリティに関する知識の整理・アップデートも行うことができました。

アクセシビリティ改善事例集の作成

チェックシートよりもさらに具体的な事例を掲載する場所を社内のNotionワークスペースに作りました。

事例集では、アクセシビリティ対応でよく見られるNGパターンやその改善例などを、ソースコードや画像も含めた詳細な内容で掲載しています。

1つの事例は1つのカードとして登録されており、適合レベルや関連する職種でタグ付けされているほか、「画像」や「フォーム」などのカテゴリでも分類されています。これにより、より簡単に事例を見つけることができます。

また、事例の投稿はNotionのテンプレートボタン機能を使用しており、誰でも同じフォーマットで投稿できる仕組みになっています。そのため、「この事例は投稿しておこう！」と思ったときに、気軽にナレッジを投稿することができます。

現在登録されている事例はまだ少ないですが、今後事例が増えてくるとさらに有益なツールになることを期待しています。

アクセシビリティ対応済み共通パーツの開発

対応スキル標準化の一環として、認識の共通化や効率的な利用・確認が可能な汎用的なUIパーツのアクセシビリティ対応を研究・開発し、エンジニアチーム内でその知見を共有しました。

プロジェクトを横断して利用できるUIを開発することで、効率化と品質の安定化を目指すという意図もありますが、JavaScriptで制御が必要なUIパーツの開発におけるベストプラクティスの研究を優先しながら施策に取り組みました。

現在はReactをベースにして「フレームワークによる効果的な実装」を行っていますが、今後は標準的なHTML、CSS、JavaScriptのみで実装できるパーツや、React以外のフレームワークやフレームワークに依存しないライブラリを使用したパーツなど、さまざまな拡張を行っていく予定です。

実際のプロジェクトでは条件が変わることもあるため、偏りのない考え方が重要です。この施策は、勉強会や輪読会で学んだ内容から一歩進んだ、ソースコードや実際の挙動に関する取り組みのため、調査や検証には苦労がありました。しかし、実装メンバーが相互にレビューすることで気づいたポイントもあり、理解を深めるという意味でもチーム開発を通じて楽しんで取り組むことができました。

アクセシビリティ相談窓口の開設

アクセシビリティに関する疑問や困りごとを誰でも気軽に相談できる窓口が会社にあると良いと考え、社内のコミュニケーションツールにアクセシビリティ専用のチャネルを設けました。

以前は、アクセシビリティに関する疑問や問題はプロジェクトごとのチャネルでやり取りされていましたが、そのやり取り自体が有益な情報であるため、できるだけオープンな場所で行うことが望ましいです。

アクセシビリティ専用のチャネルを活用することで、案件や職種の垣根を超えてアクセシビリティの理解を深めることや、ナレッジを蓄積するコミュニケーションの機会を創出することができます。

チャネルが開設された当初は発言数が多くなかったですが、徐々にやり取りが増え、最近では以前よりも活発なコミュニケーションが生まれています。

取り組みを始めてから、全社的にアクセシビリティへの意識は明らかに高くなっていると感じています。また、お客さまからのご要望も増えています。

情報設計やビジュアルデザインの段階でアクセシビリティの観点を取り入れることが増え、職種に関わらずアクセシビリティを考慮した対応や相談について積極的に会話する場面がよく見られるようになりました。

社内のコミュニケーションツールでもアクセシビリティに関する情報共有が活発になり、セミナーへの参加レポートや、実際にスクリーンリーダー読み上げを試してみた、アクセシビリティ対応に悩んだ・調べてみた、などの投稿が多くなっています。

この取り組み結果は、冒頭に記載した「社内にもっとアクセシビリティを認知してもらいたい」と考えていたときと比較すると、とても大きな変化であり、少なくとも今はアクセシビリティに対する「特定の人だけに必要なもの」「難しそう」「対応コストが高い」などの先入観はほとんど払拭されていると感じています。

私たちデパートが掲げるミッションは「Good Design, Good Experience」です。

私たちにとってのデザインとは、表面だけでなく課題解決に必要なもの・工程のすべてであり、そこにはもちろんアクセシビリティ対応も含まれます。アクセシビリティ対応による課題解決は、より多くの人によい体験を届け、よい社会を実現をしていく、私たちのミッションにも通じるひとつの使命とも言えます。

私たちの取り組みはまだ始まったばかりですが、「イイDesignでイイ社会を実現する」ことを目指し、引き続きアクセシビリティに取り組んでいきます。

株式会社デパートでは、ウェブアクセシビリティに関する深い知見と対応実績を持つエンジニアが在籍し、ご要望に応じてアクセシビリティの達成基準に準拠したWebサイト制作も行っています。

企業としての取り組み内容に関する相談もお受けしておりますので、お気軽にご相談ください。

https://depart-inc.com/download/depart-webaccessibility/

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています