질문 및 알아볼 것

프리온보딩 챌린지

svg

title

aria-labelledby와 연결된다?

<aside> ❕ svg 1.1과의 역호환성을 위해 <title> 요소는 상위 요소의 첫 번째 하위 요소여야 한다.

</aside>

<svg viewBox="0 0 20 10" xmlns="<http://www.w3.org/2000/svg>">
  <circle cx="5" cy="5" r="4">
    <title>I'm a circle</title>  // 이렇게
  </circle>

  <rect x="11" y="1" width="8" height="8">
    <title>I'm a square</title>
  </rect>
</svg>

aria-labelledby

작성자가 페이지의 다른 요소를 참조하여 액세스 가능한 이름을 정의할 수 있다. 액세스 가능한 이름을 제공하기 위해 요소 연결을 기본적으로 지원하지 않는 요소를 사용할 때 유용하다.

❗접근 가능한 이름을 생성하기 위해 참조할 수 있는 콘텐츠가 없으면 aria-label 속성을 대신 사용해야 한다. 요소에 두 속성이 모두 설정되어 있으면 aria-labelledby 가 사용된다.

❗svg를 여러군데 쓸 경우는…

상위 <Link>태그에 걸어주는 게 맞겠다.

<Link> 자식요소로 a11y-hidden 컴포넌트를 사용해서 span요소로 링크에 제공할 텍스트를 입력

React-router <Link>에 대체 텍스트는

페이지가 논리적인 탭 순서를 가지도록

focus시