こんにちは！
Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！
今回もウェブアクセシビリティについて発信いたします。
WixLearn 第4回のAdd content and heading tagsではタグについて詳しく解説いたします。
コンピュータープログラム（例えば、検索エンジンやスクリーンリーダー）は、ウェブページを解析する際に、画面に表示されているデザインや見た目を直接見ているわけではありません。
実際には、ウェブページの裏側にあるHTMLコードを読み取って、その構造を理解しています。
どれが見出しで、どれが段落で、引用なのかをコンピュータープログラムに知らせるためには、タグを追加する必要があります。
そうしないとコンピュータープログラムは構造を理解できないからです。
このことをしっかり理解した上でサイトを構築することはアクセシビリティだけでなく、あなたのサイトがより多くの人々の目に止まるチャンスにもつながるので、非常に重要です！
それでは早速本題に進みましょう！
今までのWix Learn アクセシビリティ講座要約
SECTION1Understand heading tags
サイトの階層（つまりその構造）は、ウェブブラウザやスクリーンリーダーがサイトの構成やコンテンツの表示方法を理解するのに役立ちます。
見出しにタグを追加して、第1レベルの見出し（H1）、第2レベルの見出し（H2）などを示すことができます。
見出しタグは、ページの見出しを表すサイトの HTML コード内の要素で、(H1) から (H6) までの階層構造があります。
見出しは、サイト訪問者が各ページの概要を理解するために重要なだけでなく、サイトの検索エンジンの最適化（SEO）にも役立ちます。
異なるレベルの見出しタグをタイトルとして使用し、ページのコンテンツをセクションやサブセクションで構成することができます。
たとえば、Wix ブログ記事のセクションタイトルには H2 タグを、サブセクションタイトルには H3 タグを使用することができます。
テキストを準備する際は以下の推奨事項に従ってください。
テキストに見出しタグを使用する すべてのページには H1 見出しがあり、それに続いて各ページの見出しタグは連続している必要があります。 たとえば、ページのメインの見出しが H1 タグの場合、サブタイトルは H2 となります。 これは、視覚障がいのある訪問者が論理的な順序でコンテンツを切り替えることができるようにするためです。
わかりやすい見出しを設定する
見出しは「その後の内容を説明するラベル」として考えましょう。
わかりやすく簡潔な見出しは、訪問者にとって便利で、SEO（検索エンジン最適化）にも役立ちます。
改行方法に注意する 見出しのテキストを複数行に分けたい場合は、普通の改行（Enter）ではなく、Shift + Enter を使いましょう。
(Enter を使うと、各行が別の見出しタグとして扱われてしまい、構造が崩れる可能性があるためです。)
ページ本文に見出しを追加する サイトヘッダーに追加された H1 は、ヘッダーが表示されているすべてのページに表示されます。 そのため、ページ本文に見出しを追加することをおすすめします。
※追加ページのない 1ページサイトの場合は、この推奨事項は無視してください。
エディタでサイトのページに見出しタグを追加することができます。
たとえば、ページの上部に H1 タグを追加できます。
H1 見出しタグは、各ページのタイトルとして機能します。
このタグは、新聞の見出しに似た、ページの見出しとなります。
「Henry’sBakery」を選択→強調→「SEO・アクセシビリティ」まで下にスクロールすると、「HTMLタグを選択」さらにドロップダウンすると「h1」「h2」「h3」…「h６」というオプションが表示されます。 これらが見出しです。
「P」は段落でその次に引用があります。
これらのタグをページに追加してコンテンツを構造化し、ページに何が書いているかをユーザーとコンピュータープログラムの両方に伝えます。
構造は数字が進むにしたがってドリルダウンしていく構造です。
これがアクセシビリティにおいて特に重要な理由は、スクリーンリーダーやその他アクセシティブテクノロジーを利用する多くの人が見出しを使うだけでホームページを移動できるからです。
例えばスクリーンリーダーの利用者が「2」を入力すると、h2見出しに直接ジャンプすることができます。
これは視覚障害のない人がインターネットを流し読みする時の感覚とあまり変わらないですよね。
重要
Shift + Enter キーを押して改行することで、見出しタグを複数行のテキストに割り当てる（または単語間に改行を入れる）ことができます。
空白の H1 タグが生成されないよう、H1 テキストスタイルに空白の改行がないことを確認してください。
コンテンツやデザインに影響を与えることなく、テキストの見出しタグの階層を変更することができます。 たとえば、タイトルの見出しタグを H1 から H4 に変更できます。 これは、テキストの見た目を変えずにページを再構成する必要がある場合に役立ちます。
Wix エディタ
エディタでテキストパーツをクリックします。
「テキストを編集」をクリックします。
「SEO・アクセシビリティ」をクリックします。
ドロップダウンメニューから新しい見出しタグを選択します。
Wix Studio
サイトでテキストパーツをクリックします。
「テキストを編集」をクリックします。
「見出しタグ」ドロップダウンをクリックしてオプションを選択します。
ブログの場合
ブログの記事タイトルは常に自動的にh1に設定されています。
段落は「段落」に設定されています。
「段落」の設定も自由にカスタマイズできます。
エディタでは、見出しタグのフォント、色とフォントサイズ、テキストスタイルを変更することができます。
保存すると、変更がサイト全体に適用されます。
カスタマイズしたテキストスタイルは、「追加」メニューと「スタイル」下のドロップダウンにあります。
見出しタグをカスタマイズする方法：
ページのタイトルとして使用されているテキストボックスをクリックします。
「テキストを編集」をクリックします。
「見出し 1」のテキストスタイルを編集します。
ヒント
「テキスト設定」下にある「変更をリセット」をクリックして、テキストのテーマを最後に保存したバージョンに戻します。
Wix エディタ
1.「スタイル」ドロップダウンをクリックし、「見出し 1」を選択します。
2.オプションを使用して見出しのスタイルをカスタマイズします。 3.フォント、色、文字サイズ、テキストの太字と斜体を変更できます。
テキスト設定」上部にある「スタイルを保存」をクリックします。
Wix Studio
1.「スタイル」ドロップダウンをクリックします。
2.「編集」をクリックします。
3.オプションを使用して見出しのスタイルをカスタマイズします。フォント、色、文字サイズ、テキストの太字と斜体を変更できます。
4.「適用」をクリックします。
引用について
最後に引用についてお話します。
引用は引用タグを用いて引用部分とメインテキストを分けます。
引用したい部分を選択して「”」引用符アイコンをタッチすればできます。
メインエディタはもちろんブログにも使用できます。
WixでHTMLを使ってコンテンツに見出と構造化タグを追加することに似ていますね。
今までのWix Learn アクセシビリティ講座要約
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください！
Wix Tech Salon >>
Comments