確保圖標連結的可訪問性

...使用小型客戶端腳本自動

我在這個部落格中逐漸告別圖標字體，轉而使用 SVG 文件，我更喜歡使用背景圖像進行整合以保持靈活性。

在修改過程中，我注意到雖然我有時提供帶有標題的純圖標鏈接，但這些在可訪問性方面沒有發揮任何作用。依賴螢幕閱讀器的人還無法辨識這些連結是什麼。

有兩種方法可以更改這個：aria-label 或添加文字並使其不可見。前者基本上只是一個拐杖，甚至沒有得到所有瀏覽器的完全支持，因此只保留了不可見的文字。我在 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中文網其他相關文章！