エンタープライズで使用される画像置換テクノロジー

中に入る。

Image Replacement - IR技法は、スクリーンリーダー利用者に代替画像の代替テキストを提供する技法である.
スクリーンリーダーのフレンドリーな環境のために、htmlドキュメントに保存する要素もありますが、設計上は非表示にする必要があります.主にヘディング(h 1,h 2,...)主に、ラベルやinputのlabelなどの情報を伝えるテキストです.
このIR技術はスクリーンリーダーの可用性を向上させるだけでなく、検索エンジンの最適化にも役立つ.
要素を非表示にするには、さまざまな方法が考えられます.

color: transparent;

opacity: 0;

visiblity: hidden;

display: none;など…

しかしながら、これらの属性は、上記のIR技術の目的には適していない可能性がある.なぜなら、それらは、独自の空間を占有しているか、または寸法自体を識別することができないからである.
どうやって隠すの?😫
私たちのこれらの悩みは、幸いなことに、わが国の代表的なIT企業が先行して考えており、企業内部ごとに統一的な方法があります.
この記事では、各企業がIRをどのように処理しているかを見てみましょう.

1.ココア（次）

1.1画像に意味のあるテキストを含む代替テキスト

次のマカオではPCとMobile Web上でIRを処理する方法が少し異なります.

/* pc용 */
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

/* mobile용 */
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent; 
}

PC用のIrcssを確認すると、元々はインデント用text-indent属性を利用して遠くへテキストを送信していた.
逆に,移動に用いるcssでは,テキストの色に透明な値を与え,可視にしない.これはtrnaspantキーワードがインターネットExplore 9からサポートされているためです.
しかし最近は公式サイトでなければインターネットExplore 10版がサポートされる可能性がありモバイル版になっています.
この方法により、コンテンツ幅、高さは制御されないが、line-height: 0・color: transpert(またはtext-indent)属性でコンテンツを非表示にし、スクリーンリーダーに非常に友好的である.
(+次ページではir pmの使用は確認されていませんが、1.3のir waクラスに取って代わられた可能性があります.)

1.2スクリーンリーダーは読み取る必要がない

スクリーンリーダーは、コンテンツを読み取る必要はないが、Web規格に準拠して使用されるタイトル等の表記構造上、必要とされる場合がある.

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

この場合使用.screen_out class一般的なスクリーンリーダーではwidthやheightの要素がないコンテンツは読み込まれません.(例外)

1.3重要画像の代替テキスト

重要な画像がロードされていないか紛失していない場合、代替テキストを表示したい場合は、次の.ir_waクラスを使用します.

.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

他の技法とは異なり,幅と高さに100%を与え,元の要素の位置を占めている.しかし、z-indexプロパティに負の値を与え、テキストを画像の後ろに隠す.
私の質問
「じゃあ、この方法はimgラベルのalt値にalt値を置き換えると言ってもいいですか?」
に答える
「はい、画像のalt値のように使用されるバックグラウンド版altと理解してください.」-にいる
アクセス次のホームページ開発者ツールを開き、Ctrl(またはコマンド)+Fでir waを検索すると、大量に使用されていることがわかります.
ホームページのみ、ir waクラスは78回使用された.
カテゴリリストはテキストで構成されているように見えますが、実際には画像があり、下には「カレンダー」の文字が隠されています.

2.NAVER

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

私は主にNAVERの技法を使っています.clip属性はIE 4バージョンをサポートしているので、ブラウザ間での問題を回避しやすい.widthとheightはそれぞれ1 pxあり、スクリーンリーダーはコンテンツを読み取ることもできますが、clipにカットして逆マージンを与えることができ、コンテンツが領域外に現れないようにします.

NAVERではIR技術を使用しており,1つのブラインドクラスしか使用できない.

3.クーボン

Kupangは特定の状態のクラスではなく、ウィンドウの画像を検索するために使用されます.

.product-search a.search {
    overflow: hidden;
    position: absolute;
    right: 0;
    width: 50px;
    height: 39px;
    background-position: -112px -71px;
    text-indent: -9em;
}

overflow: hidden過text-indent文字飛び.position: absoluteレイアウトに影響しない

結び目。

企業によって方法が異なり、結果は似ているが、使用状況はやや異なる.また,スクリーンリーダーを考慮するか,考慮しないかにも差がある.
IRテクノロジーを使用する場合は、私のプロジェクトサポートブラウザをどの程度使用するか、スクリーンリーダーを考慮するかを選択できます.
あるいは、Webアクセス性やSEOを考慮して、独自のIR技術を作成してコードを簡略化してみることもできます.