SVG 하이퍼링크에 접근성 이름이 없습니다.

SVG hyperlink has no accessible name

 

이 오류는 SVG(이미지의 한 종류) 안에 클릭 가능한 링크가 있지만, 그 링크가 무엇에 대한 것인지 알려주는 텍스트 설명이 없다는 의미입니다. 

이는 접근성에 있어 중요한 문제입니다. 시각적으로는 링크가 걸린 도형이나 아이콘을 보고 클릭할 수 있지만, 시각 장애가 있는 사용자가 이용하는 화면 낭독기(Screen Reader)는 이 링크를 발견해도 무엇이라고 읽어줘야 할지 알 수 없습니다. '라벨 없는 버튼'과 같은 상황입니다.

---

## 해결 방법: <title> 요소 추가하기

이 문제를 해결하는 가장 간단한 방법은 링크를 만드는 <a> 태그 안에 <title> 요소를 추가하여 링크에 대한 설명을 제공하는 것입니다.

예시

아래는 파란색 원 전체에 링크를 건 SVG 코드입니다.

• 오류 예시 (수정 전):이 코드에서 화면 낭독기는 클릭 가능한 영역이 있다는 것은 알지만, 그 목적지는 알려줄 수 없습니다.
• XML

   

  <svg width="100" height="100" viewBox="0 0 100 100">
    <a href="https://example.com">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
    </a>
  </svg>
  

• 수정 예시 (수정 후): ✅이제 <a> 태그 안에 <title> 요소가 추가되었습니다. 화면 낭독기는 이 링크를 만나면 **"Example.com 홈페이지로 이동"**이라고 명확하게 읽어주어 사용자가 링크의 목적을 정확히 알 수 있게 됩니다.
• XML

   

  <svg width="100" height="100" viewBox="0 0 100 100">
    <a href="https://example.com">
      <title>Example.com 홈페이지로 이동</title>
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
    </a>
  </svg>