Web サイト推奨事項の提供

第 1 レベルのヘッダを入力するには、以下の点を考慮してください。

• 第 1 レベルのヘッダには、ページの内容を伝えるためにページの最も重要なヘッダ (通常は文書タイトル) が含まれている必要があります。

• Career Site Builder では、ページタイトルからページごとに <h1> タグが自動的に追加されますが、通常は表示されません。サイトはアクセシビリティガイドラインを満たしています。

• キャリアサイトビルダーサイトのホームページは、設定→サイト設定サイト→情報からページタイトルを取得しますが、ページには表示されません。

  

• その他のページタイプの場合、タグはそのページのページタイトルから取得され、デフォルトでは非表示になっています。

• ただし、[カテゴリ] ページでは、タグを表示または非表示にすることができます。

空のヘッダをチェックするには、以下の点を考慮してください。

• スクリーンリーダとキーボードのユーザは、ヘッダエレメントによってナビゲートすることがよくあります。空の見出しは情報を表示せず、混乱を招く可能性があります。

• 基本的に、ヘッダがある要素にはそれが入力されている必要がありますが、非表示にすることができます。

イメージを選択する際には、以下の点を考慮してください。

• イメージはユーザの注意を引くため、焦点が強い画像を使用します。
• イメージスライダには、一貫して配置されたフォーカスポイントを使用します。
• 多様な画像を使用して、ユーザーのエンゲージメントを維持します。
• バックグラウンド/フォアグラウンド、場所、主題の多様性を考慮します。

コンポーネントごとに焦点 "セーフゾーン" を特定します。

• コンポーネントごとの「セーフゾーン」は、デスクトップ/タブレット/モバイルで表示するように設定されている高さや幅によって異なります。

• 各デバイスタイプでコンポーネントの最終的な次元を表示して、"セーフゾーン" を特定します。

幅の広いトリミング画像により、以下の方法で汎用性が確保されます。

• レイアウトで要素をさらにトリミングおよびオーバーレイするための柔軟性の向上

• イメージは、さまざまなコンポーネントおよびレイアウトで簡単に変更することができます。 

Large Image コンポーネントを使用する場合は、モバイル用にイメージを最適化し、コンポーネントを 2 回 (デスクトップ/タブレット用に 1 回、モバイル用に 1 回) 追加することを検討してください。これは、イメージにテキストがある場合に特に役立ちます。ただし、ページに多数のコンポーネントがある場合は、ページのロード時間が長くなるのを防ぐために、画像コンポーネントの重複を制限します。 

画像は、画像ライブラリーへのアクセス権の付与、写真サイトへのログオン、または画像の zip ファイルにより、お客様に提供されます。

• お客様は、ガイドラインに準拠した画像を提供する責任を負います。SAP Help Portal の Setting Up and Maintaining SAP SuccessFactors Recruiting ガイドのイメージ推奨事項に移動します。

• 少なくとも 15～20 の高解像度雇用ブランド画像が必要です。

• キャリアサイトビルダーで使用できるメディアタイプは、GIF、ICO、JPG、JPEG、PNG、SVG です。
  • SVG (Scalable Vector Graphics) イメージは、表示サイズやレイアウトサイズに関係なく正しくレンダリングされます。このため、キャリアサイトのデスクトップレイアウトとモバイルレイアウトの両方に、お客様のロゴの単一の SVG 画像を使用することができます。
  • イメージのサイズを変更する必要がある場合、カスタマはアプリケーションを使用して、大きな SVG ファイルのサイズを希望のサイズに変更することができます。

• すべての Career Site Builder 画像は、縦向きではなく横向きにする必要があります。

• 各画像に Alt テキストを含めて、サイトのアクセシビリティを改善します。詳細については、アクセシビリティセクションを参照してください。

• 背景イメージの場合は、微妙なパターンと色を選択します。

• 画像上のテキストは日付指定の Web プラクティスであり、推奨されません。

• 画像スライダーは推奨されている慣習ではありません。

代替テキスト (代替テキストまたは Alt タグとも呼ばれます) は、Web ページ上の画像を説明するために使用されます。以下の主な理由により、Web サイトの写真に代替テキストを追加することが重要です。

• 画像のロードに失敗した場合: 何らかの理由で画像が Web ページにレンダリングされない場合は、Alt タグがその場所に表示されます。つまり、その Web ページの訪問者は、画像を見ることができない場合でも、どの画像があるべきかを理解します。

• 検索エンジンの場合: Google や Bing などの検索エンジンは、Web ページを定期的にクロールします。ページ上のテキストコピーを理解するのは簡単だが、画像は読みにくい。ここで、代替テキストが役に立ちます。Alt text は、画像の表示内容を検索エンジンに記述するために使用され、画像検索の実行時により良い結果がユーザーに提供されます。代替テキストにより、サイトの SEO 値も改善されます。

• スクリーンリーダーの場合: 一部のユーザーは、Web ページを参照するためにスクリーンリーダーを使用します。これらのスクリーンリーダーにより、画面に表示される内容が識別および解釈されます。このため、画像をより詳細に説明する代替テキストでコンテキスト情報を伝えることが重要です。

すべてのイメージの代替テキストをすべての言語で入力する必要があります。イメージごとに一意な代替テキストを入力します。イメージに関する一意なコンテンツまたは関連するコンテンツを含めます。イメージセレクタウィンドウから代替テキストを追加します。画像をアップロードするときに追加することも、後で追加することもできます。

ロゴの代替テキストも必ず指定してください。

同じ代替テキストを持つ近くのイメージをチェックするには、以下の点を考慮してください。

• 2 つの画像の Alt テキストが同じ場合、冗長性が生じたり、代替テキストが正しくないことを示したりすることがよくあります。

• 不要な冗長性を取り除き、各画像の代替テキストが適切であることを確認してください。

• alt テキストを含める必要がないのは、画像が装飾的な背景画像として使用される場合のみです。

画像の埋め込みテキストに関する考慮事項は以下のとおりです。

• 埋め込みテキストをスクリーンリーダーまたは検索エンジンで読み取ることはできません。

• リーディングプラクティスは、イメージに埋め込みテキストを使用しないことです。

• 顧客が埋め込みテキストを含む画像を保持する場合は、画像に代替テキストを追加します。

• WAVE などの Web アクセシビリティツールでは、画像上の埋め込みテキストを検出できないことに注意してください。

空のリンクをチェックするには、以下の点を考慮してください。

• リンクにテキストが含まれていない場合、リンクの機能または目的がユーザーに表示されないため、スクリーンリーダーユーザーに混乱が生じる可能性があります。

• 最も一般的な問題は、画像の埋め込みテキストをリンクとして活用することです。

• 空のリンクを削除するか、リンクの機能またはターゲット (もしくはその両方) を説明するリンク内のタイトルテキストを入力します。または、画像に代替テキストを追加します。

冗長なタイトルテキストを置換または削除するには、以下の点を考慮してください。

• リンクがあるものには、タイトルタグも必要です。通常、タイトルテキストは、ユーザがリンクにマウスポインタを合わせると表示されます。

• タイトルテキストは、アドバイザリ情報を提供するために使用されます。特に、リンクの実際の動作を示す必要があります。特に、そのページにあるのは何ですか? そこで何を学習しますか。

• リーディングプラクティスとして、タイトルテキストはリンク名と異なる必要がありますが、入力しないよりも冗長なタイトルテキストを使用することをお奨めします。

一部の領域では、製品がリンクテキストをタイトルテキストとしてバックグラウンドで複製するため、アクセシビリティエラーとしてマークされません。これを変更する方法はありません。

冗長なリンクを削除する際には、以下の点を考慮してください。

• 隣接するリンクが同じ場所 (製品ページなど) に移動すると、スクリーンリーダおよびキーボードユーザに対して追加のナビゲーションと繰り返しが発生します。
• 同じ場所に移動する隣接リンクを組み合わせるか、1 つを削除する必要があります。
• 図に示すように、3 つの列コンポーネントで同じリンクがヘッダ、リンク、およびイメージに使用されます。これは変更できません。図の 2 番目の図に示すように、イメージからリンクを削除するか、ヘッダや個別のリンクを削除することができます。

元の検索グリッド形式はアクセシビリティガイドラインを満たしておらず、視覚障害のあるユーザーがキャリアサイトで求人を見つけることが困難になります。

候補者が拡張されたアクセス可能な検索機能を使用できるように、顧客と協力して統合データモデルを有効化します。

Google 求人マップは外部で更新され、すべてのアクセシビリティガイドラインに準拠しているわけではありません。

お客様は、スクリーンリーダーからのみ読み取り可能であった以前に非表示であったメッセージが表示されるようにマップを設定できるようになりました。Google マップコンポーネントから、ヘッダを表示を有効化します。ツール→翻訳から、指定されたテキストを変更します。リンクをクリックすると、検索バーと検索結果が入力されたページが開きます。

SAP ではビデオをホストしていません。キャリアサイトのビデオを最初にYouTube、Wistia、または Vimeo に投稿するように顧客に指示します。お客様は、動画がオンラインでホストされている場所への直接パスを提供する必要があります。

• 自動再生をオンにするオプションが提供されますが、これはベストプラクティスではないことに注意してください。
• ビデオは短くしてください。推奨される長さは 30 ～ 60 秒です。
• ビデオの情報的なタイトルと簡単な説明を含めます。