ロゴのホームページリンク

各ページの上部にあるロゴは、ユーザーをサイトのホームページに送るべきです。

推奨される関数 the_custom_logo() またはサイトロゴブロックを使用している場合、ロゴはデフォルトでホームページにリンクされています。

ロゴを手動で追加することもできます。ロゴがテーマディレクトリにあると仮定すると、header.php テンプレートファイルに表示する方法は次のとおりです。 

  1. <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/logo.png" alt="<?php esc_attr_e( 'Home Page', 'textdmomain' );?>" /></a>

説明的なアンカーテキスト

アンカーテキストは、ハイパーリンクの可視テキストです。良いリンクテキストは、クリックしたときにどのようなアクションが行われるかを読者に示すべきです。

悪い例: 

  1. The best way to learn WordPress is to start using it. To Download WordPress, .

良い例: 

  1. and start using it. That's the best way to learn.

下線付きリンクのスタイル

デフォルトでは、ブラウザはリンクに下線を引いて、ユーザーにクリック可能であることを知らせます。一部のデザイナーは、CSSを使用してハイパーリンクの下線をオフにします。これにより、周囲のテキストからハイパーリンクを識別するのが難しくなり、使いやすさとアクセシビリティの問題が発生します。

異なるリンクの色

色は、テキストがクリック可能であることを示す別の視覚的手がかりです。周囲のテキストとは異なる色でハイパーリンクをスタイリングすることで、識別しやすくなります。

ハイパーリンクは、状態を持つ数少ないHTML機能の1つです。最も重要な2つの状態は 訪問済み と 未訪問 です。

これら2つの状態に異なる色を持たせることで、ユーザーは以前に訪れたページを識別しやすくなります。訪問済みリンクの色を未訪問リンクよりも10%-20%暗くするのは、推測を減らすための良いトリックです。

リンクが持つことができる他の3つの状態があります:

  • ホバー: マウスが要素の上にあるとき
  • フォーカス: ホバーに似ていますが、キーボードユーザー用
  • アクティブ: ユーザーがリンクをクリックしているとき

ホバーとフォーカスは似た意味を持つため、同じスタイルを与えることが有用です。

ホバーとフォーカスは似た意味を持っていますが、異なるインタラクションパターンがあります。微妙なホバーステートを選択する場合は、より識別しやすいフォーカスステートを持つべきです。リンクの上にホバーすることは、ユーザーがページ内の位置を知っており、その場所がリンクされているかどうかを識別する必要がある指向的な活動です。フォーカスは無指向的な活動であり、ユーザーは前の位置からフォーカスを移動した後、フォーカスがどこに移動したかを発見する必要があります。

色のコントラスト

色のコントラストは、2つの色の違いを指します。ネイビーブルーと黒の間のコントラストは低いです。白と黒の間のコントラストは高いです。非営利のウェブアクセシビリティ組織であるWebAIMは、色のコントラスト計算機を提供しており、ウェブサイトデザインのコントラストを判断するのに役立ちます。WCAG 2.0は、通常のテキストに対して4.5:1の比率をAA準拠とすることを要求しています。

十分なフォントサイズ

テキストを読みやすくしてください。テキストを十分に大きくすることで、サイトの使いやすさが向上し、コンテンツが理解しやすくなります。14pxが最小のテキストサイズです。

ラベルを入力に関連付ける

ラベルは、入力フィールドの目的をユーザーに知らせます。ラベルをfor属性を使用して入力に接続できます。これにより、ユーザーはラベルをクリックして入力フィールドにフォーカスを合わせることができます。 

  1. <label for="username">Username</label>
  2. <input type="text" id="username" name="login" />

ラベルはラジオボタンにも機能します。idフィールドを使用して機能するため、グループの各入力には独自のラベルがあります。 

  1. <input type="radio" id="user_group_blogger" name="user_group" value="blogger" />
  2. <label for="user_group_blogger">Blogger</label>
  4. <input type="radio"  id="user_group_designer" name="user_group" value="designer" />
  5. <label for="user_group_designer">Designer</label>
  7. <input type="radio"  id="user_group_developer" name="user_group" value="developer" />
  8. <label for="user_group_developer">Developer</label>

フォームのプレースホルダーテキスト

プレースホルダーテキストは、ユーザーに入力する内容の例を示します。ユーザーがフィールドにカーソルを置くと、プレースホルダーテキストは消え、ラベルは残ります。 

  1. <label for="name">Name</label>
  2. <input type="text" id="name" name="name" placeholder="John Smith" />

プレースホルダーを使用して、フィールドが必要とするデータの種類を示し、フィールドラベルの代わりに使用しないでください。

説明的なボタン

ウェブには、意味が不明確なボタンがたくさんあります。ログインフォームで「OK」や「送信」を使用した最後のことを思い出してください。ボタンに表示する言葉をより良いものに選ぶことで、ウェブサイトの使いやすさが向上します。パターン [動詞] [名詞] を試してみてください — ユーザーを作成、ファイルを削除、パスワードを更新、メッセージを送信。それぞれが、ユーザーがボタンをクリックしたときに何が起こるかを説明しています。