아이콘 링크에 대한 접근성 보장

... 작은 클라이언트 측 스크립트를 사용하여 자동으로

저는 SVG 파일을 선호하여 이 블로그의 아이콘 글꼴에 점진적으로 작별을 고하고 있습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!