フリーランスエンジニアに役立つ情報をお届けする、フリーランスジョブ編集部です。
近年、WebサイトやWebサービスの要件定義・リニューアル提案の中で、「アクセシビリティ対応」という項目を目にする機会が増えています。2024年4月には改正障害者差別解消法が施行され、民間事業者による合理的配慮の提供が義務化されました。Webサイトへの対応が一律に義務化されたわけではありませんが、企業でも利用者が情報や機能へアクセスしやすい環境を整える重要性が意識されています。
Webアクセシビリティは、デザインや設計だけでなく、実装の品質にも大きく関わる領域です。見出し構造・フォームのラベル・キーボード操作・フォーカス管理・代替テキスト・色のコントラストなど、フロントエンドエンジニアが対応すべきポイントは少なくありません。
フリーランスエンジニアがアクセシビリティの知識を身につけておけば、要件を正しく理解し、実装方法や改善点をクライアントへ説明しやすくなります。本記事では、学習や案件対応に役立つ企業メディア・診断サービス・ツールをカテゴリ別に紹介します。Webアクセシビリティに関わる案件を探している方は、当サイトの案件情報やお問い合わせ窓口もあわせてご確認ください。
※本記事の内容は2026年7月時点の公開情報をもとに作成しています。各サイト・サービス・ツール・規格・法令の内容や更新状況・URLなどは変更となる場合がありますので、最新情報は各公式サイトにてご確認ください。
目次
ここでは、Webアクセシビリティの基本的な考え方と、2024年の法改正に関する正しい理解、そしてフロントエンド実装で意識したいポイントを確認します。
Webアクセシビリティとは、年齢や障害の有無、利用環境にかかわらず、誰もがWebサイトやWebサービスで提供される情報・機能を利用できるようにする取り組みのことです。
視覚や聴覚に障害のある人だけでなく、加齢で小さな文字が見えにくい人、ケガで片手しか使えない人、画面が見えにくい屋外でスマートフォンを操作している人なども対象に含まれます。一時的・状況的な「使いにくさ」も含めて、できるだけ多くの人がアクセスできる状態を目指す考え方です。
技術系の記事やライブラリ名では「a11y」という略記を見かけることもあります。これは、「accessibility」の先頭の「a」と末尾の「y」の間に11文字あることに由来する略記です。
案件で話題になりやすいのが、2024年4月1日に施行された改正障害者差別解消法です。ここは誤解が多いため、エンジニアも正確に押さえておきたいポイントです。
この改正で民間事業者にも義務化されたのは「合理的配慮の提供」であり、すべての民間事業者のWebサイトに、Webアクセシビリティ対応が一律の義務として課されたわけではありません。Webアクセシビリティの確保は、合理的配慮を行うための事前準備にあたる「環境の整備」に分類され、これは2016年の法施行時から努力義務とされています。
「義務化されたから、すべてのWebサイトをすぐにJIS規格へ完全準拠させなければならない」といった表現は正確ではありません。一方で、努力義務だから対応しなくてよい、という話でもありません。問い合わせフォームが使いづらい、画面読み上げで内容が理解できない、キーボードで操作できないといった状態は、ユーザーの機会損失につながります。
フリーランスエンジニアに求められるのは、クライアントの不安をあおるのではなく、法改正の内容を正しく説明し、サイトの状況に応じた改善方法を提案することです。要件の確認や説明を丁寧に行えるエンジニアは、継続して相談を受けやすくなります。
アクセシビリティの品質は、最終的にHTML・CSS・JavaScriptの書き方に大きく左右されます。
たとえば、見出しを正しい順序で構造化する、フォーム要素にラベルを紐づける、ボタンをdivではなくbuttonで実装する、キーボードだけで操作できるようにする、フォーカス位置を視覚的に分かるようにする。これらは、実装するエンジニアの判断と手によって実現される部分です。
要件に「JIS X 8341-3のレベルAA準拠」と書かれていても慌てず調べられる。デザイナーから上がってきたカンプのコントラスト不足に気づき、数値をもとに相談できる。モーダルやタブUIを、キーボード操作やスクリーンリーダーの利用も想定して実装できる。
実装だけでなく、問題点の指摘や改善方法の説明まで行えるエンジニアは、設計やレビューの段階から相談されやすくなります。常駐・受託を問わず、対応できる範囲を広げることは、継続案件や次の依頼を得るうえでも役立ちます。
アクセシビリティ対応を含むフロントエンド案件への参画を検討している方は、希望する業務内容やこれまでの経験を添えてお問い合わせください。
情報源やサービスの紹介に入る前に、フロントエンド実装の目線で、確認されやすいポイントを見ておきます。
見出しは <h1>〜<h6> を階層どおりに、ボタンは <button>、ナビゲーションは <nav> というように、要素本来の意味に沿ってマークアップします。スクリーンリーダーはHTMLの構造を手がかりにページを読み上げるため、見た目を整えるためだけに <div> や <span> を多用すると、支援技術に正しく情報が伝わらないことがあります。アクセシビリティ対応の土台は、まず正しいHTMLを書くことです。
WAI-ARIAは、ネイティブのHTML要素だけでは表現しきれない、動的なUIの役割や状態を補足する仕組みです。モーダル・タブ・アコーディオンなどで使われます。ただし、ARIAは使えば使うほど良いものではなく、ネイティブのHTML要素で表現できるならそちらを優先するのが基本です。誤った付与は、かえってスクリーンリーダー利用者を混乱させることがあります。
マウスを使わず、Tabキー・Enterキー・Escキーなどで操作できるかは重要な確認ポイントです。リンクやボタンに順番どおりフォーカスが移動するか、フォーカス中の要素が視覚的に分かるか、モーダルを開いたときにフォーカスがモーダル内に移動し、閉じた後に元の位置へ戻るか。こうした挙動は、JavaScriptの実装品質がそのまま出る部分です。
文字色と背景色のコントラスト比を一定以上に保つことも大切です。WCAG 2.2では、レベルAAの達成基準として、通常のテキストは4.5:1以上、大きな文字は3:1以上のコントラスト比が求められます。 色の見え方を感覚だけで判断せず、チェックツールで数値を確認したうえで、デザイナーやクライアントと修正内容を相談することが大切です。
画像が何を意味するのかをテキストで補うのが代替テキストです。情報を伝える画像には内容が分かるaltを設定し、装飾目的の画像には空のalt（alt=””）を設定するなど、画像の役割に応じた判断が必要です。自動チェックツールでは「altがあるか」は確認できても、「その内容が適切か」までは判断できません。ここは人の確認が欠かせない領域です。
Webアクセシビリティの代表的な拠り所が、WCAG（Web Content Accessibility Guidelines）です。WCAG 2.2は2023年10月5日にW3C勧告として公開され、2024年12月12日に定義や表記などを一部更新した版が公開されました。 日本国内では、JIS X 8341-3:2016がWebアクセシビリティの規格として参照されることがあります。
JIS X 8341-3:2016の規格本文は、国際規格ISO/IEC 40500:2012およびWCAG 2.0と一致した内容です。 なお、WCAG 2.2は、2025年にISO/IEC 40500:2025として国際規格化されています。案件で準拠規格を確認する際は、JIS X 8341-3:2016とWCAG 2.2／ISO/IEC 40500:2025を混同せず、発注元が求める基準と対象範囲を確認しましょう。
規格やガイドラインの一次情報としては、デジタル庁「ウェブアクセシビリティ導入ガイドブック」・政府広報オンライン・ウェブアクセシビリティ基盤委員会（WAIC）によるWCAG日本語訳などが公開されています。法令や規格についてクライアントへ説明する際は、これらの公的情報を参照し、公開時点や対象範囲も含めて確認してください。
ここからは、学習や案件対応に役立つ企業のメディア・サービス・ツールを、カテゴリ別に紹介します。
まずは、アクセシビリティの考え方や法令・規格の動向をキャッチアップできる、制作・開発会社が運営するメディアです。
画像引用元：リベロジック株式会社「トピックス」
リベロジック株式会社は、フロントエンド開発・ヘッドレスCMS構築・UIデザイン・ウェブアクセシビリティ対応などを手がけるWeb制作・開発会社です。Next.js・Astro・React・Vue.jsといったモダンな技術を活用した実装にも対応しており、会社情報では「ウェブアクセシビリティ対応 / 試験」も事業内容として掲げています。
公式サイトの「トピックス」では、アクセシビリティの実装・検査で迷いがちなポイントを解説した記事の紹介をはじめ、カード型コンポーネントのアクセシブルな実装パターン・WCAG 3.0・VPAT / ACRと日本の検査・JIS準拠の違いなど、フロントエンドエンジニアが案件で参考にしやすい記事が公開されています。IAAPのアクセシビリティ資格「WAS（Web Accessibility Specialist）」の取得体験記も掲載されており、専門的な知見を継続的に発信している点も特徴です。
また、ページ構造を確認する「A11y Navigation Auditor」やドラッグした範囲のコントラストを判定できる「Area Contrast Checker」、やさしい日本語への変換や読みやすさを確認できる支援ツールなど、アクセシビリティ関連ツールの開発・公開にも取り組んでいます。
実装例だけでなく、検査方法や支援ツールも確認できるため、UIコンポーネントの改修やJIS準拠の確認を担当する際に活用できます。特に、アクセシビリティ対応をどの順序で進めるか迷ったときに確認しやすい情報源です。
| 運営・発信元 | リベロジック株式会社 |
|---|---|
| ブログURL | https://www.liberogic.jp/topics/ |
画像引用元：西川コミュニケーションズ株式会社「Webアクセシビリティの現在地 〜よりアクセシブルなWebサイトであるために～【第1回】」
西川コミュニケーションズ株式会社は、マーケティング・AI・プロモーション・ICT・クリエイティブ・3DCG・印刷・BPOなど、幅広い事業領域で企業の情報伝達を支援している会社です。創業から100年以上にわたり、情報を「伝える」ことに関わる事業を展開してきた企業として、公式ブログでもDX・AI・BPO・3DCGなど多様なテーマを発信しています。
その中で、Webアクセシビリティに関する記事では、アクセシビリティの基本的な考え方や関連用語、2024年4月に施行された改正障害者差別解消法との関係、具体的な対応例について紹介されています。 対話形式で読み進められる構成のため、専門的な内容に初めて触れる人でも概要をつかみやすいのが特徴です。
「アクセシビリティとユーザビリティはどう違うのか」「障害のある人だけでなく、一時的・状況的に使いにくさを感じる人も対象になる」といった、初学者がつまずきやすい前提を確認したいときに参考になります。専門用語をかみ砕いて説明しているため、アクセシビリティに詳しくないクライアントや制作メンバーへ、対応の必要性を説明する際にも引用しやすい記事です。
| 運営・発信元 | 西川コミュニケーションズ株式会社 |
|---|---|
| ブログURL | https://www.nishikawa.jp/topics/blog/cat64/web-web1.php |
「JIS準拠」や「第三者診断」が要件に含まれる案件では、専門企業への依頼が必要になる場合があります。ここでは、診断・改修・方針策定などを提供する企業を紹介します。自分だけでは対応が難しい範囲を把握し、必要に応じてクライアントへ専門企業との連携を提案する際にご確認ください。
画像引用元：株式会社ミツエーリンクス「アクセシビリティ」
株式会社ミツエーリンクスは、Webサイトの構築・運用を中心に、コンテンツ制作・UIの企画・設計・実装・システム開発・アプリケーション開発・アクセシビリティ／ユーザビリティの向上・アクセス解析などを幅広く手がけるコミュニケーション・デザイン・カンパニーです。
同社の「アクセシビリティ」サービスでは、JIS X 8341-3やWCAGといったガイドラインを踏まえつつ、企業の目的やサイト規模・コスト・スケジュールに応じた対応方法を提案しています。現状把握や問題点の発見から、設計・構築・運用時の品質保持まで、Webサイト運営の各段階を支援している点が特徴です。
サービス内容としては、Webアクセシビリティ診断・スクリーンリーダー検証・EPUBアクセシビリティ診断・Webアクセシビリティ構築支援・コンサルティング・運用支援・アクセシビリティチェックツール「Axe Monitor」・社内教育支援などが用意されています。専門家による診断だけでなく、社内の運用体制づくりや継続的な品質維持まで見据えた支援を行っている点も参考になります。
また、同社は「アクセシビリティBlog」も公開しており、Webサイトのアクセシビリティを高める方法や国内外の関連情報を継続的に発信しています。JIS準拠の試験や第三者診断が必要な案件で、専門企業へ依頼できる範囲を確認する際に参考になります。
| 運営・発信元 | 株式会社ミツエーリンクス |
|---|---|
| サービスURL | https://www.mitsue.co.jp/service/accessibility/ |
画像引用元：株式会社インフォアクシア「JIS X 8341-3への対応サポート」
株式会社インフォアクシアは、Webアクセシビリティの診断・評価・JIS X 8341-3への対応サポート・教育・研修などを提供している専門企業です。JIS X 8341-3:2016の原案作成や、W3C勧告であるWCAG 2.0の策定に関わった専門家が、企業や制作会社のアクセシビリティ対応を支援しています。
同社の「JIS X 8341-3への対応サポート」では、既存コンテンツの改修・新規構築やリニューアル時の支援・Webアクセシビリティ方針の検討・デザインガイドラインやコーディングガイドラインのレビュー・関係者へのレクチャー・JIS X 8341-3:2016やWCAG 2.0に基づく試験・試験結果公開ページの原稿案作成など、幅広いサポートを行っています。なお、制作業務そのものは行っていませんが、Webコンテンツの制作・開発・運用を含めた相談にも対応しています。
教育・研修では、Webアクセシビリティの基礎知識・JIS X 8341-3:2016の概要・文書構造のマークアップ・画像の代替テキスト・アクセシブルなフォームやテーブルの作成方法・各種ツールの活用方法など、案件で扱う機会が多いテーマを扱っています。チーム内でアクセシビリティの理解度にばらつきがある場合や、JIS準拠に向けて関係者の認識をそろえたい場合にも参考になります。
同社は、Webアクセシビリティ専門の情報提供サイト「エー イレブン ワイ」も運営しています。既存サイトの改修方針の検討から、制作途中の確認、試験結果ページの公開まで、どの段階で専門家へ相談できるかを確認できます。
| 運営・発信元 | 株式会社インフォアクシア |
|---|---|
| サービスURL | https://infoaxia.co.jp/conformance/index.html |
画像引用元：KDDIアイレット株式会社「アクセシビリティ対応のウェブサイト制作」
KDDIアイレット株式会社は、クラウドを活用したシステム開発・運用・スマートフォンアプリ開発・UI/UXデザイン制作・クラウド設計・構築・運用保守などを手がける会社です。アクセシビリティ対応を検討する企業向けに、新規Webサイト制作や既存サイト改善のサポートも提供しています。
「アクセシビリティ対応のWebサイト制作」では、現行サイトの主要ページや優先度の高いページを診断する「サイト診断プラン」・一部ページから改善を進める「ライト対応プラン」・既存サイト全体を対象にする「フル対応プラン」・新規サイトの立ち上げやフルリニューアル時に、アクセシビリティ対応を組み込む「新規制作プラン」が用意されています。 診断では、WCAG 2.2やJIS X 8341-3:2016に基づき、現状や改善点をまとめたレポートを作成する内容になっています。
新規サイト制作では、目的やゴール・配慮すべきユーザー・準拠すべき規格や対応範囲を明確にしたうえで、デザイン・実装・アクセシビリティチェックへ進む流れが示されています。既存サイト改修でも、簡易診断・方針検討・正式診断・デザイン・実装・再チェックという段階を踏むため、現状把握から計画的に改善していく流れをイメージしやすいのが特徴です。
同ページでは、ページタイトル・代替テキスト・色や形だけに依存しない情報伝達・リンクテキスト・コントラスト比・見出し構造・読み上げ順・テキストの拡大縮小・キーボード操作・フォーム設計など、実装時に確認したい基本項目も紹介されています。診断のみ、一部ページの改修、サイト全体の対応などに分かれているため、予算や期間に応じた対応範囲をクライアントと相談する際に確認しやすいサービスです。
| 運営・発信元 | KDDIアイレット株式会社 |
|---|---|
| サービスURL | https://cloudpack.jp/lp/a11y/ |
画像引用元：BAsixs（ベーシックス）「アクセシビリティはじめの一歩 アクセシビリティ簡易診断サービス」
株式会社ビジネス・アーキテクツは、Webサービスの企画・設計・デザイン・開発・運営にかかる総合サービスを提供している会社です。同社が運営する「BAsixs（ベーシックス）」は、「あたりまえ」をアップデートしつづけるメディアとして、Web活用・UX・アクセシビリティ・BtoBマーケティング・情報設計・プロジェクトマネジメントなど、企業のWeb活用に関する情報を発信しています。
同社の「アクセシビリティはじめの一歩 アクセシビリティ簡易診断サービス」は、Webサイトのアクセシビリティ上の主な課題を短期間で洗い出し、改善の方向性をレポートにまとめるサービスです。 専門家による簡易診断を通じて、ウェブアクセシビリティ上の主な課題を洗い出し、改善の方向性をまとめたレポートとして提供しています。
このサービスは、フロントエンドの実装方法を深く学ぶための情報源というより、企業サイトの現状を把握し、改修前の優先度を決めるための入口として参考になります。「まずは自社サイトの現状を知りたい」「法改正をきっかけに対応を検討し始めた」「社内理解を深めるために、客観的なレポートがほしい」といった企業に向けた内容で、最短1週間で現状把握から社内共有まで進められる点が特徴です。
BAsixs内では、アクセシビリティ簡易診断サービスのほか、「うちのWebサイトはどうなってる？診断から始めるウェブアクセシビリティ対応」や「ウェブアクセシビリティのチェック結果から、構築・運用でできる対応例を紹介」など、アクセシビリティ対応の考え方や進め方を解説する記事も公開されています。簡易診断から社内共有、改修範囲の検討へ進む流れが紹介されているため、クライアントへ初回診断を提案する際に確認できます。
| 運営・発信元 | 株式会社ビジネス・アーキテクツ |
|---|---|
| サービスURL | https://basixs.com/tools/materials/web-accessibility-simple-check/ |
画像引用元：株式会社LYZON「Webアクセシビリティ対応 本気で検討できてますか？」
株式会社LYZONは、Webサイト構築・運用・Webコンサルティング・システム導入・Webデザインなどを手がける会社です。大規模サイトの構築・運用・UI/UX設計・デジタルデザインなどを強みとしており、Webアクセシビリティ対応についても、既存サイトの改修や構築・運用時の実装支援を行っています。
同社の「Webアクセシビリティ対応」サービスでは、コントラスト比の調整・スクリーンリーダーやキーボード操作への対応・適切なマークアップへの修正・カルーセルや動画の自動再生停止ボタンの設置・WAI-ARIAを利用した対応など、実装に踏み込んだ改善例が紹介されています。単なる診断にとどまらず、具体的な改善策の提案と実行まで支援している点が特徴です。
また、LYZONではデザインからコーディング・フロントエンドまでを見据えた制作体制を掲げており、デザイン段階からアクセシビリティを考慮した設計を行うことで、見た目の美しさと使いやすさの両立を目指しています。
診断だけでなく、デザインやHTML構造、JavaScriptの挙動まで含めた改修例を確認できます。既存サイトの改修やリニューアルで、エンジニアが担当する範囲を洗い出す際に利用しやすいサービスです。
| 運営・発信元 | 株式会社LYZON |
|---|---|
| サービスURL | https://design.lyzon.co.jp/lp/accessibility.html |
画像引用元：株式会社U’eyes Design「アクセシビリティ対応支援」
株式会社U’eyes Designは、生活者視点のデザインコンサルティングを手がける会社です。人間中心デザインの考え方を軸に、ユーザー調査・UX/UIデザイン・製品やサービスの評価・事業開発支援などを行っています。
同社の「アクセシビリティ対応支援」では、ウェブサイト・スマートフォンアプリ・業務用ソフトウェア・公共インターフェース・自治体サービスなど、幅広いプロダクト・サービスを対象に、アクセシビリティ対応を支援しています。JIS X 8341-3やWCAGへの対応・既存サービスの改修・企画・設計・デザイン・開発・実装まで、各フェーズに応じた支援が可能です。
特徴は、障害当事者や障害者研究に精通した専門スタッフが、実際の利用者の視点を踏まえて検証していることです。自動チェックだけでは見つけにくい使いにくさや、規格への適合だけでは判断しきれない体験上の課題も、多角的に確認できます。
また、同社はウェブアクセシビリティ評価ツール「WAIV2」も提供しています。Webページを自動分析し、アクセシビリティ対応度や問題点、修正ポイントを提示するツールです。JIS X 8341-3:2016やWCAG 2.1／2.2に対応し、PDFの評価も行えます。 規格の適合状況だけでなく、実際の利用者が操作したときの使いにくさも確認する必要があることを理解できる事例です。
| 運営・発信元 | 株式会社U’eyes Design |
|---|---|
| サービスURL | https://www.ueyesdesign.co.jp/service/accessibility.html |
画像引用元：コニカミノルタジャパン株式会社「ウェブアクセシビリティ対応ならコニカミノルタへ」
コニカミノルタジャパン株式会社は、WCAG 2.0／2.1／2.2・JIS X 8341-3:2016に基づくウェブアクセシビリティ対応を支援しています。診断チェック・改修・方針策定などを、専門家が伴走する形で提供している点が特徴です。
同社は2024年11月に、ウェブアクセシビリティ対応ツールの提供開始を発表しました。対応ツールはサイト上にメニューを表示し、文字サイズの変更・コントラスト調整・音声読み上げなど、利用者の見やすさ・使いやすさを補助する仕組みです。大規模なサイト改修に入る前に、外部ツールを活用した対応例を知るうえで参考になります。
一方で、こうしたツールはすべてのアクセシビリティ課題を自動的に解決するものではありません。HTML構造・フォーム設計・キーボード操作・フォーカス管理など、実装そのものの改善が必要になる場面もあります。コニカミノルタジャパンでは、ツール提供に加えて、診断チェック・改修・方針策定などの支援も行っています。
大規模サイトで外部ツールの導入を検討する際に、ツールで補助できる範囲と、コードやUIの修正が必要な範囲を区別するための参考になります。
| 運営・発信元 | コニカミノルタジャパン株式会社 |
|---|---|
| サービスURL | https://kmj-webaccessibility.konicaminolta.jp/ |
画像引用元：株式会社コンセント「コンセントのウェブアクセシビリティサービス」
株式会社コンセントは、サービスデザイン・UX/UIデザイン・ブランディング・クリエイティブ開発などを手がけるデザイン会社です。同社は、企業や行政のWebサイトに向けた「ウェブアクセシビリティサービス」を提供しています。
同サービスでは、「ウェブアクセシビリティ対応状況調査」「ウェブアクセシビリティ方針策定」「ウェブアクセシビリティ構築支援」「ウェブアクセシビリティトレーニング」の4つを提供しています。 WCAGをはじめとしたガイドラインへの準拠状況を調査し、必要に応じて改善案の説明や方針策定、構築支援まで行う点が特徴です。
また、トレーニングではサンプルコンテンツではなく、実際の企業サイトを対象に実施するため、自社サイトの課題に即して理解を深めやすい内容になっています。調査から方針策定、構築、社内トレーニングまでを一貫して支援しているため、アクセシビリティ対応を組織内へ定着させる方法を確認できます。
| 運営・発信元 | 株式会社コンセント |
|---|---|
| サービスURL | https://www.concentinc.jp/solution/id/ |
画像引用元：スパイラル アイギス株式会社「Webアクセシビリティ診断サービス」
スパイラル アイギス株式会社は、Webアクセシビリティ診断サービスを提供している会社です。大規模サイトにも対応しやすい自動検証と、専門員による目視検査を組み合わせ、JIS X 8341-3:2016やWCAG 2.1／2.2に基づいた診断を行っています。
同サービスでは、Webアクセシビリティ適合検査とWebアクセシビリティデザイン診断のプランが用意されています。適合検査では、不適合箇所報告書・適合性検査票・検査証明書などを納品物として提供し、デザイン診断では、コーディング前のデザイン段階で懸念点を確認できます。
特徴は、自動検証ツール「SPIRAL ISSO」を活用し、大規模サイトの全ページを自動検証できる点です。 エラー数のスコア化・頻出する課題の集計・修正アドバイスにも対応しているため、現状把握から改善方針の検討まで進めやすいサービスです。
JIS準拠の検査や証明書の提出が要件に含まれる場合に、必要な検査内容や納品物を確認できます。デザイン段階での診断にも対応しているため、公開後の手戻りを減らしたい案件でも検討できます。
| 運営・発信元 | スパイラル アイギス株式会社 |
|---|---|
| サービスURL | https://spiral-aigis.co.jp/service/accessibilityservice.html |
画像引用元：NTT ExCパートナー株式会社「ウェブアクセシビリティ診断」
NTT ExCパートナー株式会社は、Web制作・Webソリューション・研修・コンサルティングなどを提供する会社です。同社では、企業のWebサイトに向けた「ウェブアクセシビリティ診断」を提供しています。
同サービスでは、障がい当事者や専門家がWebサイトをチェックし、アクセシビリティ対応状況を診断します。チェックツールだけに頼るのではなく、障がい当事者によるスクリーンリーダーを用いた確認と、専門家によるカラーコントラストなどの確認を組み合わせ、利用者の視点を踏まえて診断している点が特徴です。
診断結果は、スクリーンショットを用いた視覚的にわかりやすいレポートとして提示されます。課題の把握だけでなく、改善案の提示やウェブアクセシビリティ方針文案の作成まで支援しているため、現状把握から社内共有・方針策定まで進めやすいサービスです。
自動チェックでは見つけにくい問題を、障がい当事者や専門家がどのように確認するかを把握できます。公共性の高いサイトや企業サイトで、診断結果をもとに修正項目を決める際にも確認したいサービスです。
自分で対応できる範囲と専門企業へ依頼すべき範囲を判断できると、クライアントへの説明や見積もりも行いやすくなります。アクセシビリティ診断や改修に関わる案件を探している方、これまでのフロントエンド経験を生かせる案件について相談したい方は、お問い合わせフォームからご連絡ください。
| 運営・発信元 | NTT ExCパートナー株式会社 |
|---|---|
| サービスURL | https://www.nttexc.co.jp/solution/web/accessibility/ |
最後に、自社プロダクトでアクセシビリティ改善に取り組み、ガイドラインやデザインシステムを公開している事業会社を紹介します。実際の開発体制やコンポーネント設計を確認できるため、チーム開発に取り入れやすい事例です。
画像引用元：株式会社SmartHR「SmartHR Design System」
株式会社SmartHRは、クラウド人事労務ソフト「SmartHR」を提供する会社です。同社は、誰もが障壁なくサービスを利用できる状態を目指し、プロダクト開発におけるアクセシビリティ向上に継続して取り組んでいます。
同社が公開している「SmartHR Design System」では、プロダクトのアクセシビリティを保つための品質基準やプロセス、アクセシビリティガイドライン、確認項目などが掲載されています。 画像の代替テキスト・リンクテキスト・フォーム・キーボード操作・フォーカス管理など、設計・実装時に確認したい観点を学べる点が特徴です。
また、SmartHRの技術ブログでは、コンポーネントライブラリ「SmartHR UI」で提供しているUIコンポーネントについて、アクセシビリティを考慮した実装の考え方も紹介されています。複雑なフォームUIやコンポーネント設計において、実際のプロダクトでどのようにアクセシビリティを保っているかを知ることができます。
Reactなどを用いたUI開発や、デザインシステムを利用する案件で確認しやすい情報源です。アクセシビリティ対応を個々のエンジニアに任せるのではなく、ガイドラインや共通コンポーネントへ反映する方法を確認できます。
| 運営・発信元 | 株式会社SmartHR |
|---|---|
| サービスURL | https://smarthr.design/accessibility/ |
画像引用元：「freee Developers Hub」
フリー株式会社は、会計ソフトや人事労務ソフトなど、スモールビジネス向けのクラウドサービスを提供する会社です。同社はプロダクト開発の中でアクセシビリティ向上に継続して取り組んでおり、その知見を「freee Developers Hub」などで発信しています。
freee Developers Hubでは、「freeeアクセシビリティー・ガイドライン」の更新情報をはじめ、スクリーンリーダーを使ったワークショップ、社内研修、QAの視点からアクセシビリティを扱った記事などが公開されています。 アクセシビリティを一部の担当者だけで扱うのではなく、デザイナー・エンジニア・QAなど複数の職種で取り組んでいる様子が分かります。
また、freeeではデザインシステム「Vibes」が開発・運用されており、UIコンポーネントやガイドラインを通じて、プロダクト全体の一貫性を保つ取り組みも紹介されています。 アクセシビリティを意識したUI設計や、チーム開発の中で品質を保つ仕組みを知りたいときにも参考になるでしょう。
アクセシビリティを開発フローへ組み込む方法や、デザイナー・エンジニア・QAがどのように分担しているかを確認できます。Reactを用いたUI開発やデザインシステムの運用に関わる際にも参考にできます。
| 運営・発信元 | フリー株式会社 |
|---|---|
| サービスURL | https://developers.freee.co.jp/ |
画像引用元：株式会社サイバーエージェント（Ameba）「Spindle」
株式会社サイバーエージェントが運営するAmebaでは、デザインシステム「Spindle」を公開しています。Spindleは、Amebaらしさを一貫してユーザーに届けるための仕組みとして整備されており、2023年度にはグッドデザイン賞を受賞しています。
Spindleでは、ブランド・原則・スタイル・コンポーネントなどが体系的に公開されています。Amebaを作る人たちが共通の前提でデザインや実装に取り組めるよう、デザイン原則やカラー・タイポグラフィ・ボタン・チェックボックス・モーダル・テキストフィールドなどのコンポーネントが公開されています。
アクセシビリティについても、「誰もがいつでも、迷わず『書く』『読む』『応える』ができる状態を目指す」という考え方のもと、Amebaのミッションを支える重要な原則として位置づけられています。アクセシブルに設計・実装されたコンポーネントを整備することで、個人の経験や判断だけに依存せず、一定の品質を保ちやすい仕組みを作っている点が特徴です。
大規模サービスで、アクセシビリティやデザインのルールを共通コンポーネントへ反映している事例です。UIの共通化やコンポーネント設計を担当する際に、個人の判断へ依存しない運用方法を確認できます。
| 運営・発信元 | 株式会社サイバーエージェント |
|---|---|
| サービスURL | https://spindle.ameba.design/ |
画像引用元：サイボウズ株式会社「アクセシビリティへの取り組み」
サイボウズ株式会社は、kintoneやGaroonなどのグループウェアを提供する会社です。同社では、「チームに入りたいと願うすべての方がチームにアクセスできる」ことを目指し、製品のアクセシビリティ向上に取り組んでいます。
公式ページ「アクセシビリティへの取り組み」では、弱視の社員による製品のユーザビリティテストをきっかけに、アクセシビリティ改善を進めてきた経緯が紹介されています。自社のチームメンバーが製品を十分に扱えないという気づきから、社内の開発チームへアクセシビリティの考え方を広げていった点が特徴です。
取り組み例としては、アクセシビリティ書籍の勉強会・外部講師による講演会・障害のある方が製品を操作する様子の観察・音声読み上げソフトを使ったWebページのテスト・アクセシビリティに配慮したコーディングルールの作成・発見した問題点のデータベース化などが紹介されています。チームごとの改善だけでなく、知見や課題を社内で共有する仕組みづくりにも取り組んでいます。
複雑なWebアプリケーションで、当事者による操作確認や問題点の共有をどのように行っているかが分かる事例です。業務系SaaS・管理画面・社内システムの開発で、テスト方法やコーディングルールを検討する際に確認できます。
| 運営・発信元 | サイボウズ株式会社 |
|---|---|
| サービスURL | https://cybozu.co.jp/efforts/accessibility/ |
画像引用元：株式会社グッドパッチ「アクセシビリティ｜Goodpatch Blog」
株式会社グッドパッチは、UI/UXデザインやプロダクト開発支援を手がけるデザインカンパニーです。同社が運営するGoodpatch Blogでは、アクセシビリティに関する知見や具体的な事例が多数公開されています。
アクセシビリティタグのページでは、改正障害者差別解消法とウェブアクセシビリティの関係を解説した記事や、WCAG 2.2をデザイナー向けに解説した記事、デザインシステムや社内での取り組みを扱った記事などが掲載されています。 アクセシビリティを、デザイン・実装・組織づくりのそれぞれから考えられる点が特徴です。
また、フロントエンドエンジニアへのインタビュー記事では、見た目だけでなくコードやアクセシビリティまで含めて良いデザインを捉える考え方にも触れられています。デザイン会社ならではの視点から、使いやすさと実装品質をどうつなげるかを学べる情報源です。
デザイナーとエンジニアが、アクセシビリティの要件をどのように共有するかを確認できます。UI改善やデザインシステム導入をクライアントへ提案する際に、具体例として紹介しやすい記事がそろっています。
| 運営・発信元 | 株式会社グッドパッチ |
|---|---|
| サービスURL | https://goodpatch.com/blog/tag/accessibility |
Webアクセシビリティは、法令や規格への対応だけでなく、フロントエンドエンジニアの実装品質に直結するテーマです。意味のあるHTML・キーボード操作・フォーカス管理・代替テキスト・コントラストなどの基本を押さえることで、誰にとっても使いやすいWebサイトづくりにつながります。
まずは企業メディアや解説記事で基礎を確認し、デザインシステムや事業会社の事例から、実装方法やチーム内での進め方を学びましょう。JIS準拠の試験や第三者診断が必要な場合は、自分だけで対応しようとせず、専門企業との連携も検討してください。
Webアクセシビリティ対応は、より多くの人が情報やサービスを利用できるようにするための改善です。見出し構造やフォーム、キーボード操作など、日頃の実装から見直せる項目も少なくありません。
Webアクセシビリティ対応を含むフロントエンド案件を探している方は、気になる案件の募集状況をお問い合わせください。エージェントがこれまでの経験や希望条件を伺い、条件に合う案件をご紹介します。