アクセシビリティとパフォーマンス

Tenoraは、誰もが使いやすく、スマートフォンでもすばやく表示されるように作られています。このページでは、テーマが自動で行っていることと、ストアを使いやすく高速に保つためにできることを説明します。

テーマが行うアクセシビリティ対応

Tenoraは、Webコンテンツ・アクセシビリティ・ガイドライン（WCAG）2.2のレベルAAを基準に、すべてのテンプレートで自動チェックとキーボード操作のテストを行っています。

キーボード操作

• すべてのリンク、ボタン、メニュー、ドロワー、フォームは、キーボードだけで操作できます。
• ドロワー（メニュー、カート、フィルター、受取場所、国と言語）は、開いている間キーボードのフォーカスをドロワー内に保ちます。Escキーで閉じると、フォーカスは元の位置に戻ります。
• お部屋から選ぶのポイント、「サイズは合いますか？」フォーム、画像ズーム、cm/inの切り替えは、すべてキーボードで操作できます。
• お客様がカートから商品を削除すると、フォーカスは次の商品またはカートの見出しに移動します。

見やすいフォーカス表示

お客様がTabキーでページ内を移動すると、フォーカスのある要素にはっきりとした枠線が表示されます。フォーカスの順序はページの順序に従います。

スキップリンク

お客様が最初にTabキーを押すと、コンテンツにスキップリンクが表示されます。ヘッダーを飛ばして、ページのメインコンテンツに移動できます。

視差効果を減らす

デバイスで「視差効果を減らす」設定をオンにしている方もいます。こうしたお客様には、テーマは次のように対応します。

• セクションのフェードインなど、アニメーションとトランジションをオフにします
• お知らせバーの自動切り替えを停止します
• スムーズスクロールをオフにします

色のコントラスト

• Tenora、Terrace、Lanternの各プリセットのすべての文字色と背景色は、4.5:1以上のコントラスト比（WCAG AA）を満たしています。枠線とアイコンは3:1以上を満たしています。
• エラーメッセージと成功メッセージは、配色のテキストの色と色付きのアイコンで表示されます。どの配色でも読みやすさが保たれます。
• 色を変更する場合は、テキストと背景のコントラスト比を4.5:1以上に保ってください。色の組み合わせは、オンラインのコントラストチェッカーで確認できます。

スクリーンリーダー

• ページには、ヘッダー、メインコンテンツ、フッターなど、正しい見出しとランドマークが使われています。
• 価格、単価、セール価格、在庫状況には、スクリーンリーダー向けのわかりやすいラベルがあります。
• 「サイズは合いますか？」の結果と、国の検索で見つかった国の数が読み上げられます。
• ボタンとフォームの入力欄には、翻訳済みの30言語を含め、ラベルが付いています。
• タッチターゲットは24 x 24ピクセル以上です。

文字の方向と言語

ページの言語と文字の方向は、ストアフロントの言語で決まります。右から左に書く言語では、レイアウトが自動で左右反転します。海外への販売をご覧ください。

できること：代替テキスト

代替テキスト（alt text）は、画像を見ることができない人のために画像の内容を説明するテキストです。スクリーンリーダーが読み上げ、検索エンジンも利用します。

代替テキストを追加する場所

• 商品画像：Shopify管理画面で商品を開き、画像を選択して代替テキストを追加を選択します。
• セクションやファイルの画像：コンテンツ → ファイルに移動し、画像を選択して代替テキストを編集します。
• コレクション画像：Shopify管理画面でコレクションを開き、画像を編集します。

わかりやすい代替テキストの書き方

• 画像に何が写っているか、なぜそれが重要かを説明します。例：「明るい部屋にある、オーク材のダイニングテーブルとリネンの椅子6脚」。
• 短く、通常は1文にまとめます。
• 「〜の画像」や「〜の写真」で始めないでください。
• 色、素材、サイズなど、お客様が選ぶときに役立つ詳細を含めます。
• 画像に新しい情報がない場合は、商品タイトルを繰り返さないでください。代わりに見え方を説明します。例：「細いオーク材の脚がわかる側面」。

テーマが自動で行うこと

• 代替テキストのない商品画像には、商品ギャラリーで商品タイトルが使われます。
• 素材とお手入れのカードの素材画像や、タイトルの横のサンプル画像など、装飾目的の画像もあります。すぐ横のテキストで名前がわかるため、テーマはこれらの画像をスクリーンリーダーから隠します。
• ロゴ画像に代替テキストがない場合、ロゴにはストア名が使われます。

テーマが行う高速化

• ページはサーバー側で生成されます。テーマが使うJavaScriptは少量で、各セクションは、そのセクションがページにある場合にのみ独自のスクリプトを読み込みます。たとえば、「サイズは合いますか？」のスクリプトは、寸法のある商品でのみ読み込まれます。
• 商品ページやフィルターのスタイルなど、特定のページ用のスタイルは、それを使うページでのみ読み込まれます。
• 画像は複数のサイズで用意されるため、各デバイスは必要なサイズだけをダウンロードします。最初の画面より下にある画像は、お客様がその近くまでスクロールしたときに読み込まれます。
• ページ内の最初の大きな画像（画像バナーなど）が最初に読み込まれるため、ページが早く表示されたように見えます。
• YouTubeとVimeoの動画は、お客様が再生したときにのみ読み込まれます。
• 関連商品は、お客様がその近くまでスクロールしたときに読み込まれます。
• フォントはShopifyのフォントライブラリから読み込まれ、フォントの読み込み中もテキストがすぐに表示されます。

できること：ストアを高速に保つ

適切な画像サイズを使う

Shopifyはデバイスごとに画像のサイズを調整しますが、元の画像の品質も重要です。次のサイズを使ってください。

場所	推奨サイズ
画像バナー	2400 x 1350pxの.jpg
画像バナーのモバイル用画像（任意）	1080 x 1350pxの.jpg
テキスト付き画像	1500 x 1875pxの.jpg
お部屋から選ぶ	比率3:2。例：2400 x 1600pxの.jpg
メガメニューのプロモーション	比率4:3
動画のカバー画像	比率16:9
商品画像	長辺2000px以上。すべて同じ形に揃える
ロゴリスト	背景が透明な.pngまたは.svg
ファビコン	32 x 32pxの.png

ヒント

• 写真には.jpg、ロゴには.pngまたは.svgを使います。
• 写真はアップロード前に圧縮します。1枚あたり500 KB未満を目安にしてください。
• 重要な画像にはフォーカルポイントを設定します。テーマエディターで画像を選択し、フォーカルポイントを選びます。Tenoraは画像をトリミングするときにこの位置を使います。

アプリを減らす

多くのアプリは、目に見えなくても、すべてのページに独自のスクリプトとスタイルを追加します。これにより、ストアが遅くなることがあります。

• Tenoraには、サイズ、「サイズは合いますか？」、素材、サンプル、配送の詳細、お部屋から選ぶの機能がすでに含まれています。これらの機能のためにアプリは必要ありません。
• 使っていないアプリは削除してください。アプリをアンインストールしたら、テーマにコードが残っていないか確認してください。残っている場合は、アプリの開発者に連絡してください。
• アプリをインストールする前に、ストアの速度を確認してください。インストール後にも、もう一度確認してください。

動画は慎重に使う

• 動画セクションにカバー画像を追加します。カバー画像はお客様が動画を再生するまで表示され、プレーヤーは再生時にのみ読み込まれます。
• Shopifyでホストする動画は短くし、ファイルサイズを適度に抑えてください。
• 画像で同じ役割を果たせる場合は、ホームページの最初の要素に動画を使わないでください。画像のほうが速く読み込まれます。

ホームページの内容を絞る

セクションを追加するたびに、ダウンロードするコンテンツが増えます。お客様にとって最も役立つセクションを使い、不要なセクションは削除してください。

速度を確認する

Shopify管理画面でオンラインストア → テーマに移動し、ストアの速度レポートを確認します。新しいアプリやホームページのセクションの追加など、大きな変更を加えた後に確認してください。