組み込みのWebサイト アクセシビリティ機能を活用し、無料ツールを使ってサイトをテストしましょう。

障害を持つ訪問者を含め、すべての人が利用しやすいインクルーシブなWebサイトをデザインできます。見出しや箇条書きリストなどの明確かつ構造的なレイアウトを使用すると、スクリーン リーダーがページを効率的にスキャンできるため、顧客が必要な情報をすばやく見つけられます。

こちらもご覧ください: インクルーシブ デザインのプラクティスでサイトのアクセシビリティを高める

注: このガイドは資料であり、法的アドバイスではありません。Squarespaceでは、サービス利用規約に記載されているとおり、お客様のサイトまたはビジネスに適用される特定のアクセシビリティ法や基準に関するアドバイスは提供しておりません。

スクリーン リーダー向けにサイトのテキスト、レイアウト、見出しを構造化する

ナビゲーション メニュー、リンク、テキストなど、サイトの様々な要素をカスタマイズすることで、コンテンツをすべての訪問者にとってアクセシブルでナビゲートしやすいものにすることができます。Squarespaceには、いくつかの組み込み機能とカスタマイズ オプションが用意されています。

• カラー コントラスト オプション: カスタムCSSを使用しなくても、[カラー] パネルで背景色とフォントの色を調整することで、WCAGガイドラインに準拠することができます。
• キーボード フォーカスのアウトライン: 訪問者がリンクやフォーム フィールドをTabキーで移動すると、ページ内の現在位置を視覚的に把握できるように明確な境界線が自動的に表示されます。
• 「スキップしてコンテンツに移動」リンク: 訪問者は、ヘッダー ナビゲーション メニューをスクロールすることなく、ページのメイン レイアウトへ直接移動できます。このリンクは、訪問者がTabキーを押すと自動的に表示されます。
• セマンティックなページ構造: テキスト読み上げソフトウェアがたどりやすい整理されたレイアウトを作成できます。見出しを使用してテキストを構造化すると、スクリーン リーダーなどの支援技術で予測可能な読み上げ順序を維持することができます。

オンライン精算フローのアクセシビリティを高める

すべてのSquarespaceテンプレートには、顧客がオンラインストアをスムーズに利用できるよう支援する組み込み機能が含まれています。精算ページでは、ページ エレメントがスクリーン リーダーやその他の支援ソフトウェアで正しく動作するよう、特定の設定が既定で適用されています。


以下の組み込み機能により、顧客にとってわかりやすいレイアウトを維持できます。

• 事前にラベル付けされたフォーム フィールド: 安全な精算フィールドには、わかりやすいテキスト ラベルが設定されています。このテキストにより、スクリーン リーダーは各ボックスに入力すべき情報を正確に読み上げることができます。
• 明確なコール トゥ アクション ボタン: 支払いボタンなどの主要なボタンには、明確でわかりやすいラベルが付けられています。これらのラベルは、訪問者がページ内の主要な手順を見つけ、取引を完了するのに役立ちます。

こちらもご覧ください: アクセスしやすいコマース サイトを作成する

アクセスしやすい画像、動画、メディア コントロールを設定する

訪問者が画像や動画を利用しやすくするため、以下のような組み込みのメディア コントロールと説明機能を使用できます。

• 代替テキスト フィールド: すべての画像にわかりやすい説明を追加しましょう。代替テキストは、画像を見ることができない顧客に対して、スクリーン リーダーが画像の内容を説明するのに役立ちます。SEOレポート ツールを実行することで、代替テキストが設定されていないサイト上の画像にフラグを立てることができます。
• メディアのキャプションと文字起こし: 動画にキャプションを追加したり、音声ファイル用に文字起こしテキストをアップロードしたりできます。
• 再生コントロール: 動画やアニメーションに視覚的な動きを抑えた形式を選択できます。自動再生される動画ループやスライドショー アニメーションに、一時停止、スキップ、停止のボタンを含めましょう。

サイトのアクセシビリティ証明としてSquarespaceのVPATまたはアクセシビリティ ステートメントにアクセスする

組織、企業、学校からサイトのアクセシビリティに関する証明を求められた場合は、サイトの基本的なレイアウト機能の説明に役立つ以下のリソースをご利用ください。

• Squarespaceのアクセシビリティ ステートメント:「Squarespaceのアクセシビリティ」で、当社のアクセシビリティへの取り組みをご確認ください。
• VPATレポート: Voluntary Product Accessibility Template (VPAT) を使用すると、サイト構造がアクセシビリティ ガイドラインにどのように準拠しているかを明確に示すことができます。

私のサイトにはどのアクセシビリティ規則が適用されますか？

ご自分のサイトが事業に適用されるすべての法的要件に準拠していることを確認する責任はお客様にあります。アクセシビリティ ガイドラインの詳細については、Web Accessibility Initiativeをご覧ください。

Webアクセシビリティ要件は国や地域によって異なります。

• 米国: 障害を持つアメリカ人法 (ADA) の基準を読み、アクセスしやすいWebサイト設計に関する要件をご確認ください。
• 欧州連合: 欧州アクセシビリティ法 (EAA) をご覧ください。障害を持つ人々がアクセスしやすいオンラインストアやデジタル サービスの提供に関する要件について確認できます。

サイトがアクセシビリティ要件に準拠しているかをテストするにはどうすればよいですか？

画像の説明が不足している箇所を見つけたり、さまざまな利用者にとってWebサイトがどのように機能するかを確認したりするには、無料のオンライン テスト ツールを使用して公開中のページをスキャンできます。

• キーボード ショートカットを確認し、The A11y Projectのツールを使用してサイトをテストできます。
• WAVE Web Accessibility Evaluation Toolを使用して、色のコントラストの問題や見出し構造の不備を見つけることができます。

Webサイトをより詳細に監査する場合は、アクセシビリティまたはコンプライアンスの専門家にご相談ください。