画像の交換技術について正直に言うまでの時間です

キーテイクアウト

かつてアクセシビリティを維持しながら芸術的な形でテキストコンテンツを伝えるために人気のある画像置換技術は、カスタムフォントや強力なCSSツールなどの最新のツールが利用可能であるため、しばしば批判されています。
• テキストの代わりにテキストを使用するには、いくつかの利点があります。ユーザーはテキストを簡単にサイズ変更して色を変更できます。スクリーンリーダーや検索エンジンボットがアクセスでき、懸念の分離を尊重します。
ロゴの書体がWebで使用できない場合やグラフィカルアートワークをCSSで再現できない場合など、WebフォントとCSSが望ましい結果を達成するのに十分ではない場合があります。これらの場合、グラフィカル要素の使用が必要になる場合があります。
インラインSVGは、WebフォントとCSSをレバレッジできない場合にWebページにロゴを含めるのに最適な方法です。検索エンジンと支援技術の両方がアクセスでき、スケーラブルで解像度に依存しないものであり、追加のHTTPリクエストを表示する必要はありません。
• 最新のCSS、Webフォント、ベクターグラフィックスの機能により、画像の交換が廃止されています。ただし、エッジケースがまだあり、主にアクセシビリティの考慮事項が含まれており、画像置換技術がまだ限られたアプリケーションを見つけることができます。
• CSS画像置換の歴史に関するSitePointの以前の記事では、Baljeet Rathiは、それぞれが次のものよりも独創的な多くの画像置換技術を調べています。これらの手法はすべて、1つの問題を解決することに焦点を当てていました。テキストコンテンツを、人と検索エンジンの両方で、それをアクセスしやすいままにしながら、ウェブ上の美しく芸術的な形で伝える方法です。すぐに利用できるカスタムフォントと今日の強力なCSSツールなしで、Webデザインの世界でこのような目標を達成することは、かなり偉業でした。
Rathiの記事から私の手がかりを得て、私は次の質問に取り組むことを始めました：

画像置換技術はかつて非常に人気がありました。今日、テキストを背景画像に置き換えるこれらの方法は、多くの場合、Web開発者の間で悪いラップを取得します。この記事の後半で理由のいくつかを調べますが、これが事実であることを考えると、代わりにどのツールとベストプラクティスを使用できますか？ 画像置換技術は、Webデザインのゴーストだけであるか、またはWebをuglierにすることを恐れることなく、今日でも画像交換技術を有意義に使用できますか？

仕事に最適なツールを見てみましょう。

ジョブに最適なツール：Web FontsとCSS

コンテンツがテキストの場合は、テキストを使用して、テキストの画像を使用しないでください。
• 今日のツールを使用して、テキストコンテンツを美しい形で中継するために画像はほとんど必要ありません。

  驚異的な数のカスタムWebフォントへの簡単なアクセス、CSS @font-faceプロパティの優れたブラウザサポート、TypeKitやGoogleフォントなどのフォントストリーミングサービスはすべて、ブランドを伝え、感情を伝え、作る大きな力を与えます。ウェブ上の見事なタイポグラフィに影響を与えます。

  最新のCSSの機能により、透明性レベルを制御し、テキストシャドウを追加し、モードをブレンドし、さらにはテキストにアニメーションを加えることができます。 以下は、WebフォントとCSSでできることの単なる例です。

  スマートデザインウェブサイトは、画像なしで素晴らしいタイポグラフィを表示します。ウェブフォントとCSSのみ。 テキストの画像の代わりにテキストを使用することの重要な利点は次のとおりです。

  

  ユーザーはテキストを簡単にサイズ変更して色を変更して要件を満たすことができます。

  スクリーンリーダーはテキストにアクセスでき、検索エンジンボットはクロールしてインデックスを作成できます。
  それは意味的に正しいアプローチであり、懸念の分離を尊重します。その関連性は、Webコンテンツのアクセシビリティガイドライン（WCAG）の成功基準を満たすためのW3C推奨事項によっても提唱されています。

  カスタムフォントを使用している場合、CSSフォントスタックのフォールバックとしてWebセーフフォントを簡単に提供できます。

  しかし、あなたの多くが知っているように、このアプローチはあらゆる状況では機能しません。だから…
  WebフォントとCSSが常に仕事に至らないとしたら？
  • WebフォントとCSSがあなたが望んでいる結果を達成するのに十分ではない状況があります。 Webサイトのロゴはその一例です。
  • ロゴはブランドに不可欠です。つまり、ブランドアイデンティティを損なうことなく、ロゴをわずかに変更することはできません。 WebフォントとCSSを使用してロゴを正確に再現できない場合があります。おそらく、ロゴの書体はウェブ上で容易に利用できないか、グラフィカルなアートワークをCSSだけで忠実に再現することはできません。グラフィカル要素を使用する方法のようです。ただし、ユーザーにウェブサイトにグラフィカル要素を表示してもらいたいのですが、画面読者とボットにロゴが表すブランド名にアクセスできるようにしたい。 また、テキストをサポートせずにアイコンの使用を検討してください。ここでの本当の問題は、スクリーンリーダーと検索エンジンクローラーがアイコンの意味を理解するのに苦労していることです。アイコンはテキストではなく、
  • テキストを表しています。たとえば、馴染みのあるハンバーガーのアイコンは「メニュー」という言葉を表していますが、それ自体は「メニュー」という言葉ではありません。したがって、ウェブ上でテキストをサポートせずにアイコンのみを表示すると、深刻なアクセシビリティの懸念が高まる可能性があります。上記のどちらの場合も、画像の読者や検索エンジンクローラーによるテキストコンテンツへのアクセスを損なうことなく、画像を使用して情報を伝えることが目標です。画像置換技術により過去にこれをやや可能にしたので、仕事をするために今日より良いものがそこにあるかどうかを調べる価値があります。

    ここにいくつかのオプションがあります。

    インラインsvg

    今日、Webフォントのパワーを活用できず、CSSはインラインSVGです。 SVGは、XMLベースのグラフィック形式であるスケーラブルベクトルグラフィックスの略です。私が興味を持っている手法には、ロゴのSVGグラフィックを作成し、そのコードをHTMLドキュメントに直接ダンプすることが含まれます。 IllustratorやInkscapeなどの編集者からSVGをエクスポートすると、冗長マークアップを取り除くことで、さらに一歩進んで出力を最適化できます。

    インラインSVGは、SitePoint Webサイトでロゴを作成するために使用されています。

    それだけではありません。インラインSVGは、Webページに鮮明なアイコンを追加する方法として使用する場合にも驚異的に機能します。詳細をご覧ください。CSS-TricksのChris CoyerのSVGコースをご覧ください。これには、インラインSVGアイコンに関するいくつかのビデオチュートリアルも含まれています。

    インラインSVGを使用することがクールな理由のいくつかを次に示します：

    

    SVGコードは単なるマークアップであり、意味のあるコンテキストを追加するタイトルとDESC要素を備えているため、検索エンジンと支援技術の両方がアクセスできます。 SitePointでLéonieWatsonとCSS-TricksでHeather Migliorisiのこれらのヒントに従って、インラインSVGグラフィックスのアクセシビリティを強化することができます。

    SVGグラフィックスは、定義と解像度に独立してスケーラブルです。つまり、ユーザーがどれだけズームインしても素晴らしいように見えます。

    インラインSVGグラフィックは、追加のHTTPリクエストを表示する必要はありません。これはWebサイトのパフォーマンスに最適です。

    CSSとJavaScriptを使用して、インラインSVGグラフィックスの外観と動作を微調整することができます。 SVGアニメーションテクニックの詳細については、Jordan WadeによるインラインSVGでアニメーション化することをお読みください。

    アイコンフォントとは対照的に、SVGコードはすでにHTMLドキュメントにあるため、インラインSVGアイコンのロードにWebサイトは決して失敗しません。

    もう1つの良いニュースは、インラインSVGに優れたブラウザのサポートがあることです。 IE8のみがインラインSVGのサポートを欠いています

    アイコンフォント

    ロゴの表示には適していませんが、アイコンフォントはウェブサイトにアイコンを表示する素晴らしい方法として人気を博しています。 GlyphiconsやFont Awesomeなどのオンラインアイコンライブラリによって可能にされた使いやすさは、Web上のアイコンフォントの大きな存在に大きく貢献しました。

    アイコンフォントは単なるテキストであるため、CSSで外観を制御でき、ユーザーは好みに合わせてサイズを変更できます。

    テキストに付随する意味のあるアイコンの場合、WAI-ARIAテクニックを使用してアクセス可能な情報を追加できます。 たとえば、

    フォントを使用してリンクされたハンバーガーアイコンを表示して隠されたメニューを表示しているとします。アイコンのマークアップのみを追加すると、スクリーンリーダーにとっては完全に見えない、または意味がありません：

    リンクにタイトル属性を追加することは、スクリーンリーダー向けに機能しますが、アシスタントテクノロジーなしでウェブサイトをナビゲートするユーザーに時々望ましくないツールチップを表示するという副作用があります。

    <span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span>></span><span><span></a</span>></span></span>

    Aria-Label属性により、ハンバーガーアイコンフォントがスクリーンリーダーがアクセスできるようにし、不要なツールチップを取り除きます。

    しかし、アレックス・ウォーカーとセレン・デイビスが指摘したように、ウェブ上にアイコンフォントを実装するには多くの落とし穴があり、そのことは完全に意識する必要があります。

    アイコンフォントの使用に伴うアクセシビリティの問題に取り組むために必要なものについて詳しく知るには、フィラメントグループのザックレザーマンによる防弾アクセス可能なアイコンフォントは目を見張るものです。

    <span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span> aria-label<span>="Menu"</span>></span><span><span></a</span>></span></span>

    tag

    適切なALT属性を使用してタグを使用してロゴの画像を表示することは、許容可能で広く使用されているアプローチです。

    alt属性にはテキストが含まれているため、アクセシビリティの懸念事項を処理して、要素は、表示のためにテキストの派手なグラフィカルな表現をドキュメントに引き込みます。

    W3C、Webアクセシビリティチュートリアル、Google Webマスターの両方がこの方法を支持しています。

    考慮する必要があるいくつかの小さな欠点は次のとおりです

    もう1つのHTTPリクエスト。これは、Webサイトの読み込み時間に影響を与える可能性があります。これは、HTTP/2が完全に実装されている近い将来、問題になりません。

    懸念の分離は無視されます：テキストの外観を変更することに決めた場合、CSSではなくマークアップを変更することでそうする必要があります。 SVGグラフィックスはこの問題を提示していませんが、ユーザーがサイズを大きくすると、ラスター画像がピクセル化される可能性があります。

    上記のポイントは、過去に広く使用されているさまざまな画像置換技術に至るまでの動機の1つでした。

    しかし、なぜこれらのテクニックは今日眉をひそめているのですか？私たちは本当に彼らと一緒にやっていますか？

    画像交換に対するケース

    2000年代初期または半ばにオンラインデートに出くわした画像置換技術に関する研究資料のほとんど。 2013年11月、HTML5ボイラープレートは、あらゆる種類のCSS画像置換技術を削除しました。これらは、画像の置換が控えめになることを示唆する重要な手がかりです。

    CSSを使用すると、ほんの数年前まで画像編集ソフトウェアでのみできることを行うことができます。これに加えて、Webフォントとベクトルグラフィックスがすぐに利用できるように、なぜ画像の交換などの巧妙なハックに手を差し伸べるのでしょうか？ 画像置換技術の使用に対するその他の重要な考慮事項は、検索エンジンのランキングに対する潜在的なマイナスの影響に関係しています。

    Googleには、Webページにテキストを隠すことに対する明確なガイドラインがあり、それらを無視すると深刻な罰則につながる可能性があります。 Googleのウェブサイトが、この日と年齢でテキストを隠す疑わしい方法をWebで考慮していることは次のとおりです。

    白い背景に白いテキストを使用しています。

    画像の後ろにテキストを見つける。

    CSSを使用してテキストを画面外に配置します

    フォントサイズを0に設定します
    • 上記のリストの
    項目の項目は、人気のある画像置換技術のほとんどになります。
    • しかし、状況は明確ではありません。 Googleは、「Googleの検索ランキングを操作するための隠されたテキスト「…すべての隠されたテキストが欺cept的であるとは考えられていません。たとえば、サイトがJavaScript、画像、フラッシュファイルなどのアクセスが困難なテクノロジーが含まれている場合、これらのアイテムに説明的なテキストを使用すると、サイトのアクセシビリティが向上します。
    • キーワードの詰め物
    または悪意のある意図がない限り、画像の交換
    • は、Googleのガイドラインに準拠して考慮することができます。 Google Botsにあなたの誠実さを伝える方法は簡単ではありませんが、SEOの専門家が提案している良い提案は、あなたが隠しているテキストがあなたのウェブサイトに表示されているテキストとまったく同じであることを確認することです。

    それだけではありません。 確かにSEOの分野にある権威ある声であるYoastのJoost de Valkは、特にWebサイトでスプライトを使用するアクセスしやすい方法として、画像交換の支持者の1つです。

    彼のCSSイメージの交換では、What's Up Matt？、De Valkは、GoogleのソフトウェアエンジニアであるMatt Cuttsに問題を抱えています。 De Valkの作品は、Webデザインの世界の先史時代にさかのぼります。 しかし、少なくとも私の知る限り、その著者は、彼が主題について考えを変えたと思わせることができるものを書いていません。この記事を書いている時点で、Yoast Webサイトのロゴはまだ表示されています画像置換。

    少なくともいくつかの場合、画像の交換はアクセシビリティの観点からも依然として受け入れられます。これらの方法の背後にあるメインドライブは、ウェブ上の審美的に洗練されたが完全にアクセス可能なテキストコンテンツの表示を可能にすることであるため、これは驚くことではありません。

    W3Cワーキンググループによるメモは、ユーザーが実装が予想どおりに機能しない場合に同じコンテンツの代替のテキストのみのプレゼンテーションに簡単に切り替えることができる限り、画像置換技術を明示的に推奨しています。

    ソフトウェア開発者のLogan Frankenは、今日でも画像置換技術を限定的に使用するために合理的なケースを作成し、Webサイトにテキストを添付せずにIMGタグまたはアイコンフォントにSVGを表示するときに参加できると主張しています。

    最後に、今日の最先端のSVGテクノロジーのアクセシビリティを改善するために、画像の交換が依然として関連していることがわかります。

    例5：リンク付きアイコン、ダイナミックテキスト

    アクセス可能なsvgsのセクションでは、ヘザーミグリオリシーは、インラインsvgアイコンに付随するリンクテキストが静的である場合、Aria-label属性の使用が適切であると指摘しています。 、リンクテキストがページに動的に追加されるため、リンクテキストが事前に知られていない状況に対応しません。 Migliorisiは、1日を節約するためにここで画像の交換を実り多い方法で使用する方法を示しています。

    結論

    この記事では、今すぐ使用できるツールとベストプラクティスを、過ぎ去った時代に非常に人気のある画像置換技術の代替としてリストしました。これらには、カスタムフォント、CSS3、およびインラインSVGが含まれます。これらのSVGは、過去のブラウザが容易に利用できなかったか、適切にサポートされていませんでした。

    今日、画像の交換はかなりハッキーに見え、隠されたテキストに対するGoogleの姿勢はその使用を促進しません。ただし、画像置換技術がまだ限られたアプリケーションを見つけることができる場合、主にアクセシビリティの考慮事項を含むエッジケースがあります。

    あなたはそれをどうしますか、画像の交換は死んでいるのですか、それとも生きていますか？コメントであなたから聞いてみましょう！

    画像置換技術に関するよくある質問（FAQ）

    さまざまな種類の画像置換技術は何ですか？

    ​​

    開発者が使用するいくつかの画像置換技術があります。これらには、Fahrner Imageの交換（FIR）、Leahy/Langridge Imageの交換（LLIR）、ファーク画像置換（PIR）、ギルダー/レビン画像置換（GIR）、およびスコットケラム法が含まれます。これらの各手法には独自の利点と短所があり、手法の選択はプロジェクトの特定の要件に依存します。 Fahrner Imageの交換（FIR）手法では、テキストのアクセシビリティに影響を与えることなく、テキスト要素を画像に置き換えることが含まれます。これは、CSSを使用して画面外にテキストを配置することで行われ、画像がその場所に登場することができます。ただし、この手法は、スクリーンリーダーと検索エンジン最適化（SEO）への影響について批判されています。画像置換（LLIR）手法は、FIR技術の変更です。スパン要素を使用してテキストを保持し、CSSを使用して非表示になります。これにより、画像をその場所に表示できます。この手法の利点は、スクリーンリーダーやSEOに影響を与えないことです。

    ファーク画像置換（PIR）手法は他の手法とどのように異なりますか？テクニックは、FIRテクニックのもう1つの変更です。背景と同じ色にすることでテキストを隠すことができ、その場所に画像を表示できるようにします。この手法は他のテクニックよりも簡単ですが、SEOへの影響について批判されています。

    ギルダー/レビン画像置換（GIR）テクニックは何ですか？ （GIR）手法には、背景画像を使用し、CSSを使用してテキストを隠すことが含まれます。この手法は他のテクニックよりもSEOに優しいですが、スクリーンリーダーへの影響について批判されています。

    Scott Kellumメソッドはどのように機能しますか？テキストインデントプロパティはテキストを画面外に押し出し、その場所に画像を表示できるようにします。この手法は他のテクニックよりもアクセスしやすいですが、SEOへの影響について批判されています。

    画像置換技術を使用することの利点と短所は何ですか？テキストのアクセシビリティに影響を与えることなく、テキストの代わりに画像を使用します。ただし、これらの手法は、SEOおよびスクリーンリーダーにマイナスの影響を与える可能性があります。したがって、各プロジェクトに適切な手法を選択することが重要です。

    プロジェクトに適した画像置換手法を選択するにはどうすればよいですか？

    ​​

    画像交換手法の選択は、プロジェクトの特定の要件に依存します。 SEOおよびスクリーンリーダーへの影響、テクニックの複雑さ、さまざまなブラウザとの互換性などの要因を考慮する必要があります。

    画像交換技術に代わるものはありますか？画像置換技術には代替品があります。これらには、Text-ShadowやBox-ShadowなどのCSS3プロパティの使用、SVG画像の使用、Webフォントの使用が含まれます。これらの代替案は、画像置換技術の欠点なしで同様の結果を提供できます。

    画像置換技術について詳しく知るにはどうすればよいですか？これらには、チュートリアル、記事、フォーラムが含まれます。また、これらの手法を使用するWebサイトのソースコードから学ぶこともできます。

以上が画像の交換技術について正直に言うまでの時間ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。