2

私は、ユーザーには視覚的でありながら、スクリーンリーダーや検索エンジンにはアクセスできるイラストツールに取り組んでいます。私は次のhtmlを持っています：

<span class="card">A new idea is presented to the group. </span>
<span class="spoke userOne active understands">
  <span class="node">
    <span class="label">User one </span>
    <span class="relationship">is engaged in the conversation</span>
    <span class="user"><span class="status"> and understands. </span></span>
  </span>
</span>

これは、cssを使用した場合と使用しない場合のイラストレンダリングへのリンクです。

http://jsfiddle.net/FnBd4/

http://jsfiddle.net/FnBd4/1/

編集：私はいくつかの初期の応答に基づいて質問を少し変更しました。視覚的な表現をテキストで乱雑にしないようにしていますが、スクリーンリーダーと検索エンジンの両方にアクセス可能なコピーがあります。現在、大部分の要素のフォントサイズを0pxに設定してこれを行っていますが、これによりSEOペナルティが発生するのではないかと考えていました。もしそうなら、これを行うための理想的な方法はありますか（alt属性を持つ画像タグを使用する以外に）？

4

3 に答える 3

0

私は、テキストを非表示にするためのゼルドマンの非表示テキストcssのファンです：http：//www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
于 2013-03-15T20:51:40.897 に答える
0

検索エンジンは目に見えるコンテンツのみを分析します。img-Elementsをalt-Attributeとともに使用できますように。

于 2013-03-15T20:51:57.683 に答える
0

このWebAIMアクセシビリティの記事によると、通常、スクリーンリーダーのみのテキストをブラウザウィンドウの外側の左端に移​​動することをお勧めします。スクリーンリーダーは引き続きそれを使用します。

.hidden{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

また、テキストインデントを使用するためのJason Lydonの投稿リンクも特に気に入っていますが、古いマシンとデバイスでのパフォーマンスの違いにすぎないようです。だからあなたの選択をしてください！

于 2013-03-15T21:08:06.630 に答える