IR技術は何を使うべきですか.


このドキュメントは更新を続行します.
❗間違った情報や間違いがあればコメントにご自由に!🥰

👉 WebアクセスとIRテクノロジー


The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.
- Tim Berners - Lee , W3C Director and inventor of the World Wide Web
WorldwideWebの創始者ティム・バーナスリーが言ったように、Webの力はすべての人が平等に使える時に発揮されます.ユーザの身体的・環境的条件にかかわらず,Webアクセス能力の設計・開発をWebアクセス性と呼ぶ.
画像置換(Image Replacement,IR)技術は、Webアクセス性を守る方法の一つであり、画像を表示できないユーザに代替テキストを提供する方法である.このため、通常、imgラベルのalt属性に画像の代替テキストを入力します.
しかし、性能向上のために画像フラッシュ技術を使用する場合が多く、imgタグを使用しない場合がある.また、imgタグalt属性に書き込みが長すぎる場合は、テキストタグを分離する必要がある場合があります.この場合、スクリーンに対応する代替テキストを非表示にし、スクリーンリーダーによって識別される点に注意してください.この条件を守らないと、意味のない要素になります.
通常、私たちが使用する方法は次のとおりです.visibility:hidden , display:none , overflow:hiddenこの3つの方法を代表的に使用します.
この3つの方法の中で、overflow:hiddenが最も適切と言える.
▶NAVER:.blind
ちなみに、盲人という類名は攻撃的かもしれないので使わないほうがいいです.
   position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
▶次:.screen_out
 overflow: hidden; 
 position: absolute; 
 width: 0; 
 height: 0; 
 line-height: 0; 
 text-indent: -9999px;
開発者ツールでクラス名を検索することで、どの要素でクラス名が使用されているかを決定できます.
NAVERと次のウェブサイトでは、ウェブページのアクセス性のためにスクリーンリーダーが読まなければならない情報(商標、メニュー、検索ウィンドウ、人気検索語など)がクラス名を指定し、overflow:hidden属性で画像代替テキストを提供する.この属性は、スクリーンリーダーを読み取ることもできるし、性能に影響を及ぼさないため、広く採用されている.しかし、この方法は副作用があるかもしれないので、参考記事を読んでみましょう.display:noneは、ブラウザがこれらの要素をまったく認識せず、アシストデバイスも情報を伝達しないため、IR技術として使用するのに適していない.visibility:hiddenは可視性だけを隠し、この分野が一席を占めている.また、スクリーンリーダーはこれらの情報をユーザーに渡さない.

心得


👉 overflow:hiddenの方法しか使わないのが真理だと思いますが、この方法も一番ではないことに気づきました.また,Webアクセス性とIR技術を自ら閲覧し,多くの開発者がより良いWeb環境と検索エンジンを提供するための様々な方法を研究していることを認識した.私もWebの普遍性と性能を考慮した部分に成長し、問題に近づいてきた開発者になりたいと思っています.
👉 ネットを学べば学ぶほど、フロントは視覚的なことだけを考えているわけではないことに気づく.もちろん、細部を考慮することは重要ですが、よりよく発展すれば、建設的で構造的な視点を持つ先端開発者になることが重要です.

次はやってみたい


👉 Webアクセス機能を考慮したサイト構築:
👉 さらに、実際のスクリーンリーダーユーザーにユーザー体験を調べてみたいと思います.
[推奨とコメント]
アクセス可能な非表示テキスト
アクセス性と可用性の記述