音声、

Question

私は自分のWebページでボイスオーバー機能をサポートしていると私は奇妙な何かに気づきました。要素の周りに見える輪郭は、テキストの長さのために多くの高さを取ります。

<span class="outer-box"> 
    <span class="a11y">Last page updated.</span> 
    2 mins ago 
</span> 

.outer-box { 
    margin: 10px; 
    padding: 5px; 
} 

.a11y { 
    position: absolute !important; 
    height: 1px; 
    width: 1px; 
    overflow: hidden; 
    clip: rect(1px, 1px, 1px, 1px); 
} 

https://codepen.io/anon/pen/oGxWoW

あなたは要素（クラス= a11y）の上に、あなたがより多くの高さを取って、ボイスオーバーの概要を参照してくださいだろうというとき、あなたはMac +ボイスオーバーを使用している場合。

その高さを調整できる方法がある場合は、私は欲しいと思います。

ありがとうございます。

Answer 1

これは、視覚的に隠されたテキストがアクセシビリティを改善しない例です。 「最後のページが更新されました」は、「2分前」のテキストが意味することを全員が理解することが重要ですが、それを隠すと、スクリーンリーダーを使用して人口の一部に役立ちます。

視覚のフォーカスが視覚的に表示されるために、音声のオーバーサイズが定義されます。

最高の解決策は、テキストを見えるようにすることです。これは誰にも役立つでしょう。