次の 2 つの問題に直面しているようです。
- 背景のテキストの色のコントラスト。
- リンクについて説明していません。
残念ながら、一部のユーザーはタイトルにアクセスできないため (たとえば、キーボードを使用していても画面を見ることができるユーザーなど)、情報を伝達するためにタイトルに依存することはできません。
コントラストの問題には、いくつかの潜在的な調整があります。
- テキストがある部分の画像に効果を適用する (例: 黒にフェードする)。
- コントラストを上げるドロップシャドウなどの効果をテキストに適用します。
- 異なる画像のテキストに異なる色を選択する。
そうしないと、コントラストを高めるためにスタイル スイッチャーまたはパーソナライズ オプションを提供しなければならないという状況に陥ります (WCAG2-AA に準拠したい場合)。
リンクの上にコンテキストを提供する見出しがあるかのように、リンクがターゲットを説明していないかどうかはわかりません。ただし、「続きを読む」リンクは警鐘を鳴らします。
シェブロン画像に、ターゲット ページに固有の代替テキストがある場合、それが役立ちます。例えば:
<a href="#"><img src="file.gif" alt="Specific page title ">Read more</a>
注: 代替テキストはインライン テキストのように読み取られるため、最後にスペースを含めます。
または、順序が逆の場合:
<a href="#">Read more<img src="file.gif" alt=" about specific page title "></a>
全体として、ボックスにターゲット ページを説明する見出しがある場合は、それをリンクにして、スクリプトを使用してボックスの残りの部分をクリックできるようにします。(たとえば、http://ukwindsurfing.com/の中央のボックス)