デジタル・アクセシビリティ

Tilda ウェブサイトにおけるブロック・アクセシビリティの概要と、それを改善するためのブロック内の機能。
Tilda のブロックライブラリにあるブロックのほとんどは、常に、一時的に、あるいは状況に応じて障害を持つ人々が使用できるように最適化されています。この記事では、あなたのウェブサイトのアクセシビリティを向上させるために、どのような可能性が存在し、どのような設定を行うとよいかを説明します。
ウェブサイトのアクセシビリティ向上のための簡単なチェックリスト
  • 1
    見出しブロックにSEOタイトルが設定されているかチェックする
    詳細はこちら
  • 2
    画像にaltテキストを設定し、画像の内容を明らかにする。
    詳しくはこちら
  • 3
    メニューブロックがヘッダーページにあり、フッターがフッターページにあるかどうかをチェックする。
    詳しくはこちら
  • 4
    オンライン・フォームを持つブロックのコンテンツ設定で、各フィールドにフィールド見出しがあるかどうか、フォーム送信後の成功メッセージが指定されているかどうかをチェックする。
    詳しくはこちら
  • 5
    ウェブサイトのフォントのコントラストをチェックし、同じような色やイメージの背景にテキストがないことを確認する。
    詳しくはこちら
  • 6
    プロジェクトの言語がサイト設定で設定されているか確認する。
    セットアップ方法
  • 7
    の要素のアクセシビリティ・ガイドラインを確認してください。Zero Block
    詳しくはこちら

スクリーン・リーダーの最適化

スクリーン・リーダーは、画面に表示された内容を音声で読み上げるソフトウェアです。多くの場合、スクリーン・リーダーはすでにプリインストールされており、オペレーティング・システムのアクセシビリティ設定を通じて使用されます。

Tilda ブロックは、スクリーン・リーダーで動作するように自動的に最適化されているか、スクリーン・リーダーによって適切に音声化されるようにコンテンツをマークアップするために必要な設定が含まれています。

H1-H6タイトルタグ

ウェブサイトのコンテンツに明確な構造がある場合、見出しにH1、H2、H3タグを設定できます。異なるレベルの見出しは、スクリーン・リーダーがページの構造をよりよく解釈し、キーボードを使ってコンテンツを切り替えるのに役立ちます。

H1-H3タグは、「SEO：タイトルタグ"その他のブロック、例えばカードの小見出しでは、H6までの他のレベルの見出しを設定できます。
重要H1タグは各ページに1つだけです。階層が守られている限り、他のレベルのタグはいくつでも使用できます（例：H3の中にH2のタイトルを入れることはできません）。

画像の代替（Alt）テキスト

画像の代替テキストはスクリーンリーダーで読むことができるので、視覚障害者が画像の内容を理解できるように設定する価値があります。

画像のaltテキストを設定するには、ブロックの「コンテンツ」タブを開き、アップロードした画像の横にある3つの点をクリックしてください。
画像がページ上の要素の背景のような単なる装飾であれば、代替テキストは必要ないかもしれません。
ギャラリー」カテゴリーのブロック内の画像にaltタグを追加するには、「コンテンツ」タブを開き、アップロードされた画像の横にある「テキスト」をクリックします。そして、"Image alt for SEO "フィールドで画像の説明を指定します。
УказываемальтернативныйтекстдляизображениявКонтентеблока
のブロックのコンテンツタブで画像のaltテキストを指定する方法は以下の通りです。Tilda
アクセシビリティを高めるために、代替テキストは画像の内容を正確に伝え、何らかの理由で画像を見ることができない訪問者に対応する必要があります。


altテキストの悪い例：
"Dog"
"Poodle."

altテキストの良い例：
"An poodle puppy is sitting on grass in a backyard of a brick house."
Щенокабрикосового пуделя сидит на траве на заднем дворе кирпичного дома
a11yプロジェクトによる画像のaltテキスト作成ガイド

フッターとヘッダーをデザインするためのヒント

ヘッダーとフッターのブロックは、訪問者が現在そのようなブロックにいることをスクリーンリーダーが認識できるように、自動的にマークされます。たとえば、ヘッダーでは、すべてのメニュー・アイテムを読み飛ばして、ページのメイン・コンテンツに直行することができます。

ヘッダーとフッターを含むブロックは、適切なマークアップのために、必然的に別々のヘッダーとフッターのページになければなりません。
正しく設定するには、このビデオチュートリアルをご覧になるか、ヘルプセンターの「ヘッダーとフッター」の記事をご覧ください。

オンラインフォーム記入のヒント

フォーム」カテゴリのブロックの入力フィールドのほとんどは、スクリーン・リーダーがアクセスできます。成功またはエラー・メッセージは、スクリーン・リーダーによって音声で表示されます。

また、入力フィールドのタイトルを必ず指定して、各フィールドに何を入力する必要があるかが明確になるようにしてください。
フォームフィールドのカスタマイズや、フォームが正常に完了したことを知らせるポップアップメッセージの作成方法については、オンラインフォームの設定に関するビデオチュートリアルをご覧ください。

コントラストとフォントサイズのヒント

十分なフォントのコントラストは、訪問者がウェブサイト上のテキストをより簡単に認識するのに役立ちます。コントラストのガイドラインに従うことが重要なのは、視覚障害のある訪問者がいるかもしれないからだけではなく、適切なコントラストは一般的にユーザーエクスペリエンスを向上させます。

背景とテキストのコントラストを決定するためのウェブ上の標準があり、これはWCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）に基づいています。この基準によると、コントラストは最も明るい色と最も暗い色の明るさが何倍違うかで定義され、その比率で表記されます：3:1, 4.5:1, 10:1.値が低いほどコントラストは低くなります（最大コントラスト比は21:1）。

視覚障害者がアクセスしやすいウェブサイトを作るには、フォントのコントラストを上げる必要があります。要素の具体的な値の範囲を以下にいくつか説明します。

背景のコントラストとフォントの色ツールを使ってコントラスト値を導き出し、以下の値と照らし合わせることができます。これを行うには、あらかじめデザインされたブロックやZero Block から背景と色の値をコピーし、以下で指定するサービスに追加してコントラスト比を取得するだけです。
色のコントラストを測定するオンラインツール
通常のテキストの場合、テキストを区別できるようにするために必要な最小コントラスト値は4.5:1です。7:1以上の値は、すでにテキストがコントラストを高めていることを意味します（標準カテゴリ - AAA）。

（見出しなど）より大きなテキストの場合、最小コントラスト値は3:1です。4.5:1の時点で、テキストは強調されている、すなわち視覚障害者の使用に適していると見なされます。

非テキスト要素（ボタン、ナビゲーションコントロールなど）については、3:1以上のコントラスト比を維持することが必要かつ十分です。
また、Wave（ウェブアクセシビリティ評価ツール）のオンラインサービスを利用して、ページのコントラストとアクセシビリティをチェックすることもできます。これは、ウェブサイトの要素のコントラストとアクセシビリティに問題がある可能性を視覚的に表示します。ただし、このサービスが提供する推奨事項がすべて適切で正しいとは限りません。特に、すべての要素に代替テキストが必要とは限りません。

ウェブサイト言語の指定方法

アクセシビリティを向上させるために、サイト設定→その他でウェブサイトの言語を指定してください。そうすることで、サードパーティのソフトウェアがウェブサイトとうまくやり取りできるようになります。

キーボードを使ったウェブサイト・ブロック間の移動

Tilda ブロックは、特にキーボードナビゲーションを支援するために設計されています：

  • キーボードでナビゲートする場合、どの要素が現在操作されているかを理解するために、色のついたフォーカス・フレームがある。
  • メニュー、サブメニュー、フォーム、タイル、ビデオプレーヤー、タブ、スライダーを持つブロックは、キーボードで操作できるように自動的にラベル付けされます。

アクセシビリティのヒントZero Block

現在、Zero Block の全要素のアクセシビリティに関する作業はまだ進行中である。しかし、以下に説明する一般的なガイドラインに従うことが重要です。
レイヤーを正しい順序に保つキーボードを使ってページを操作する訪問者にとって、フォーカスポイントの正しい順序は不可欠です。

Tabキーを使って要素を移動する場合、要素はページレイアウトに表示されている順番で選択されます。この順序が正しいことを確認するには、要素を正しい順序で配置してください。ナビゲーションは、レイヤーで指定された順序とは逆に、最後の要素から最初の要素へと行われます。
特にH1タグのようにセマンティックな役割がある場合は、要素を空のままにしない。リンク、SEOタグ、テキストを要素内に含める。装飾的でない画像には、代替（alt）テキストを使いましょう。

ブロック空き状況表

製造元
Tilda