スクリーンリーダーユーザーの要素の配置

14121 ワード
screen reader Webアクセス性 front end フロントエンド スクリーンリーダ 済州コード大本営 おしゃれなライオンのように CSS html テキストリンク

ユーザーに配慮しながらレイアウトを保護


1.見えないものがある。


🕵🏾‍♂️なぜ見えない要素を使うのですか?
スクリーンリーダーユーザに正確な情報を提供するとともに、スクリーンを見るユーザに混乱をもたらすことはない.
コンテンツは見えませんがhtml上に存在するため、スクリーンリーダーはそのコンテンツに関する説明を読むことができます.
NAVERのホームページを参照すると、スクリーンリーダーのユーザーに検索アイコン(拡大鏡)を説明する要素が見つかります.
.blindというクラスがあり、画面には見えず、内容だけが검색です.
さらにclipを用いて0の値を拡大して全く見えず、1、1 pxで小さな位置を占めた.

2. display:none;どうして使わないのですか。


🤷‍♀️ 意外な死?

  • 2display: none;が付与された要素はページ内に位置を占めず、見えないがhtml内で検出される.しかし、致命的な欠点は、要素を全くないと思っているので、スクリーンリーダーは読まずにスキップしてしまうことです.

    • 🤷‍♀️ ではwidth:0;height:0; やればいいじゃないか。

  • 高さと幅が0の要素がhtml/css上に存在するかどうかは、ドキュメント内のストリームから除外されます.したがって、スクリーンリーダーはこの要素を省略します.
  • のもう一つの問題は、検索エンジンが意味のない不要な要素を悪意のある要素と見なしているため、検索パネルが付与される可能性があるということです.
    • 以下に、アプリケーションdisplay:none;の例を示す.
    iosが提供するスクリーンリーダーで実行してみます.
    <!DOCTYPE html>
<html lang="ko">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>screen reader test</title>

<style>
   h1 {
       display: none;
   }
</style>

</head>
<body>
   
<h1>스크린 리더 테스트입니다.</h1>
<p>안녕하세요 제 말이 들리십니까?</p>
</body>
</html>
    iframeはブロックされているようで、リンクで置き換えられています.
    display:none; 場合



    ご覧の通り、`display:none;`追加された要素はスクリーンから消えますが、スクリーンリーダーも認識してスキップできません.

    3.クリップを使用して内容を説明する


    逆に、上記の例のNAVERを参照して処理を行う.
    元素を非常に小さな箱に閉じ込めればいいです.
    スクリーンリーダーは、レイアウトを破壊しないで見えない文字を読み取ることができます.
    <!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>screen reader test</title>

<style>
  /* h1 {
      display: none;
  } */

  h1 {
  	position:absolute;
  	overflow: hidden;
      padding: 0;
      margin:-1px;
      width: 1px;
      height: 1px;
      clip: rect(0,0,0,0);
  }
</style>

</head>
<body>
  
<h1>스크린 리더 테스트입니다.</h1>
<p>안녕하세요 제 말이 들리십니까?</p>
</body>
</html>

    これもリンクで置き換えられます.

    clip:rect（0,0,0，）



    mount使用
    Linux三大剣客のsed