こんにちは！
Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！
今回もウェブアクセシビリティについて、WixLearn 第2回のSet up navigation and pagesではサイト言語の設定やページタイトルの設定など、ナビゲーションページの具体的な設定方法を解説します。
WixLearn 第1回のUnderstand web accessibilityはこちら
アクセシビリティを考慮しながら基本的な設定方法をわかりやすく学べる内容となっています。
SECTION1:Add site language and pages
サイトの言語を設定する重要性
まず、ウェブサイトの言語を正しく設定することが、アクセシビリティ対応において重要です。
特に、スクリーンリーダーなどの支援技術を利用する場合、この設定がユーザーの使いやすさに大きく影響します。
スクリーンリーダーは、画面上のテキストをそのまま読み上げているわけではありません。
実際には、HTMLコードに記載された情報を基にテキストを読み上げています。
そのため、言語が正しく設定されていないと、意図しない発音や読み上げのミスが発生する可能性があります。
HTMLのLang属性とは
HTMLコードには、使用言語を指定するための「Lang属性」があります。
この属性を使って、例えばスペイン語の場合は「lang="es"」のように設定します。
この設定により、スクリーンリーダーはそのウェブページがどの言語で書かれているかを正確に認識し、適切な音声エンジンを使用して読み上げます。
サイトの保存と言語設定の確認
まず、サイトを保存します。
画面右上にある「保存」ボタンをクリックして進めましょう。
その後、ダッシュボードから「設定」→「言語と地域」の順に移動します。
この設定画面で、サイトの言語が英語などの適切な言語にすでに設定されているか確認してください。
必要に応じて言語を変更することも可能です。
ページタイトルの編集
次に、ページタイトルを確認します。
メニューに表示されているメインページの名前と、実際のページタイトルが異なる場合があります。
その場合は、ダッシュボードの「ページを管理」セクションに移動し、編集を行うことで、名前を統一できます。
アクセシビリティ宣言ページの重要性
ウェブサイトの構成はサイトごとに異なりますが、どのサイトにも必ず追加すべきページがあります。
それが「アクセシビリティ宣言」のページです。
アクセシビリティ宣言は、障がいのある人をはじめ、すべての人がサイトを快適に利用できるようにするため、あなたやあなたの会社が実施している取り組みを明確に示すものです。
このページを用意することで、サイトの利用者に安心感を与え、責任ある運営姿勢を伝えることができます。
ただし、アクセシビリティ宣言に関する法律や要件は地域ごとに異なります。
そのため、この説明は法的助言を目的としたものではない点にご注意ください。
具体的な内容を作成する際は、地域の法規や専門家のアドバイスを参考にすることをおすすめします。
アクセシビリティ宣言ページの作成方法
ウェブサイトにアクセシビリティ宣言を追加する手順は以下の通りです。
ページを追加する まず、新しいページを作成し、「アクセシビリティ宣言」と名前を付けます。
宣言内容を入力する ページにテキストボックスを追加し、アクセシビリティ宣言の内容を入力します。
この宣言では、サイトがどのようにアクセシビリティに配慮しているかを具体的に説明しましょう。
リンクを作成する アクセシビリティ宣言ページへのリンクを、テキストやボタンの形式で作成します。 このリンクには「アクセシビリティステートメント」などの明確な表記を使用してください。
リンクの配置を検討する アクセシビリティ宣言の内容は情報量が多くなる場合があります。そのため、メインページには表示せず、すべてのページからアクセスできるリンクを用意することをおすすめします。
リンクをヘッダーまたはフッターに追加する 作成したリンクをサイトのヘッダーやフッターに配置します。これにより、訪問者がどのページにいてもアクセシビリティ宣言を簡単に確認できるようになります。
アクセシビリティステートメントの注意点
アクセシビリティステートメントを作成する際は、以下の点に注意してください。
ステートメント内では複数のテキストボックスを活用し、適切なHTMLタグ（例：<h1>、<h2>、<p>など）を使用してください。
これにより、情報が構造的に整理され、スクリーンリーダーなどの支援技術での読み上げがスムーズになります。
ページタイトルの設定方法
ページタイトルは、ユーザーが検索エンジンであなたのサイトを見つける際に最初に目にする重要な要素です。 以下の手順で設定を行いましょう。
SEO設定にアクセスするWixエディタで「もっと見る」→「SEOベーシック」の順に移動します。
適切なタイトルを入力するページタイトルには、あなたのサイトが何を提供するのかを簡潔に表現した文章を入力します。例えば、ビジネス名や提供するサービス、ターゲットとなるキーワードを含めると効果的です。
ページタイトルはこの先何度も登場します。
必要なのはページの目的を把握して、それをユーザーに伝えることです。
ページタイトルを追加する手順
SEO設定にアクセスする Wixエディタで「もっと見る」→「SEOベーシック」に移動します。
タイトルを設定する 各ページの目的に応じて、ユーザーが内容を理解しやすいタイトルを入力します。例えば、「会社概要」ページなら「会社概要｜[会社名]」のように具体的に記述すると効果的です。
SECTION2:Add navigation options
ウェブサイトのナビゲーションは、訪問者がサイト内をスムーズに移動できるために重要です。
ここでは、メインメニューやフッターメニューなどを追加・編集する手順を説明します。
メインメニューの追加
ヘッダーを選択 Wixエディタで、開いている編集メニューをすべて「✕」で閉じてから、ヘッダーをクリックします。
メニューを追加 「追加」→「メニュー・アンカー」に移動すると、以下のようなオプションが表示されます。
おすすめメニュー
縦型メニュー
模型メニュー
デザイン変更 メニューの外観はカスタマイズ可能です。色やフォント、配置を自由に調整できます。
デザインを変更することも可能です。また、フッターや検索バーなどの要素も簡単に追加できます。
さらに、WCAG（Web Content Accessibility Guidelines）のAA基準に完全に準拠するためには、全てのページで利用できるナビゲーション手段をもう1つ追加することが推奨されます。
これにより、視覚や操作に制限があるユーザーにも優しいサイト構造を提供できます。 例えば、ヘッダーメニューに加えてフッターメニューを設けると、どのページでも簡単にアクセスできるナビゲーションを提供できます。
フッターメニューは、テキストボックスを追加するだけで簡単に作成できます。
操作手順は次の通りです。
メニューから「テキスト」を選択します。
「テキストスタイル」から好きなデザインを選びます。
テキストボックスをフッター位置までドラッグし、「フッターへ移動」を選択します。
これでフッターメニューを追加できます。
ヘッダーメニューと同様に、フッターメニューのデザイン変更も可能です。
リンクの追加も簡単にできます。操作手順は次の通りです
リンクボタンをクリックします。
リンクを設定したいテキストを選択します。
「リンク」アイコンをクリックし、「ページ選択」を選びます。
「テキストを選択」で完了です。
これで、フッターメニューにリンクを追加できます。
多くのホームページでは、リンクが青色などで強調表示され、リンクであることが示されています。
しかし、色が見えない人もいるため、リンクであることが視覚的にわかりやすくなるよう、書式やテキスト記号などの要素を追加することが重要です。
また、検索バーを追加するには、「追加」→「メニュー・アンカー」→「サイト検索」を選択します。
デザインも自由に変更できます。
SECTION3:Make from fierds accessible
プレースホルダーテキスト（情報入力フィールド）は、作成中に消えてしまうことがよくあります。
たとえば、「メールアドレスを入力してください」と書かれていても、入力を始めるとその文字が消えてしまいます。これにより、ユーザーに認知的な負担がかかることがあります。
この問題を解消するには、常に表示されるフィールドラベルを使用し、ユーザーが入力する内容が何であるかを明確に示すことが重要です。
これにより、ユーザーはフィールドが何を入力するためのものか、常に把握できるようになります。
登録フィールドの重要な「送信ボタン」には、2つのオプションがあります。
それは、送信メッセージのポップアップ表示のオプションで、「時刻設定」と「常に表示」です。
Wixでは、時間指定のオプションも選べるようになっていますが、これは特定の状況に適した場合もあります。
しかし、例えばフォームに入力した後、お湯が沸いたり外の騒音で目を離している間に送信メッセージが消えてしまった場合、送信が正常に行われたかどうか確認できません。
このような不安が生じると、再度フォームを入力し直す手間が発生してしまいます。
そのため、送信メッセージは「常に表示」を選択することをおすすめします。
これにより、送信状況を確実に確認でき、ユーザーの不安を減らすことができます。
WixLearn 第1回のUnderstand web accessibilityはこちら
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください！
Wix Tech Salon >>
Comments