アイコンリンクのアクセシビリティを確保する

... 小さなクライアント側スクリプトで自動的に

このブログでは徐々にアイコン フォントに別れを告げ、SVG ファイルを使用します。柔軟性を保つために背景画像を使用して統合することを好みます。

修正中に、タイトル付きのアイコンのみのリンクを提供することがありましたが、これらはアクセシビリティの点で何の役割も果たしていないことに気づきました。スクリーン リーダーに依存している人は、これらのリンクが何であるかをまだ認識できません。

これを変更するには、aria-label またはテキストを追加して非表示にする 2 つの方法がありました。前者は基本的に、すべてのブラウザで完全にサポートされていないため、目に見えないテキストだけが残った単なる松葉杖です。 GrahamTheDev の Stack Overflow で、適切で非常にうまく機能するソリューションを見つけました:

<a class="my-icon-link" title="My Link">
  <span class="visually-hidden">My Link</span>
</a>

.my-icon-link {
  background-image: url(/images/icons/my-icon.svg);
}

.visually-hidden { 
  border: 0;
  padding: 0;
  margin: 0;
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
  clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
  clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
  white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

私のタスクは、コード内のすべてのテキストのないアイコン リンクを SPAN で拡張することです... または、これのための 自動化を見つけることでした。なぜなら、これらすべてのリンクにはすでにタイトルがあり、まさに必要なものだからです。リンクテキストに転送されます。 テキストが JavaScript 経由で挿入されてもアクセシビリティは損なわれないため、次の クライアント側 ソリューションを見つけました。これは、スクリプト経由で各ページのフッターに埋め込まれます。

function ensureIconLinkText() {
  let linksWithoutText = document.querySelectorAll("a[href^='http']:empty");
  linksWithoutText.forEach(e => {
    if (window.getComputedStyle(e).display !== "none") {
      if (e.title) {
        let eText = document.createElement("span");
        eText.innerText = e.title;
        eText.classList.add("visually-hidden");
        e.append(eText);
      } else {
        console.error("Link without Text and Title: " + e.outerHTML);
      }
    }
  });
}

ensureIconLinkText();

テキスト形式のコード:
テキストのないすべての A タグを検索し、それらを実行します。要素が意図的に非表示になっておらず、タイトルが定義されている場合は、そのテキスト値を含む新しい SPAN タグを作成し、これをリンクに挿入します。それ以外の場合は、コンソール

このアプローチを使用すると、リンクをそのままにしておくことができ、タイトルをどこかに忘れたかどうかをコンソールで確認できます。

以上がアイコンリンクのアクセシビリティを確保するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。