[LAB-7] react-router - <Link>에 대체텍스트 제공

[realldk]

질문 작성자

이동경

문제 상황

react-router를 사용하고 있습니다.

아래 이미지가 사이트의 네비게이션바 (NavBar.jsx) 입니다.

그리고 검은 사각형으로 표시한 부분의 코드가 아래와 같습니다.

<A11yHidden as="h1">로고</A11yHidden>
<Link to="/" aria-label="메인페이지로 이동">
  <Logo className={styles.logo} />
</Link>

---

Light house로 검사를 했을 때 <Link>나 내부의 svg <Logo>에 인식 가능한 이름을 주라고 나와서

1. svg에 아래와 같이 role="img", title, desc 속성을 주었습니다.

   <svg role="img" width="220" height="84" viewBox="0 0 220 84" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <rect width="220" height="83.6234" fill="url(#pattern0)"/>
   <title>DECO 로고</title>
   <desc>DEveloper COmmunity에서 앞 두 글자 DE와 CO를 따와서 DECO</desc>

   title에 홈페이지로 이동이라고 쓰고 사용하는 것을 맨처음으로 생각했는데 밑에서 svg를 한 번 더 사용해서 <Link>에 내용을 주기로 했습니다.

2. <Link aria-label="메인페이지로 이동">

3. 자식으로 a11y-hidden(컴포넌트또는 CSS이용) ``` 로고 메인페이지로 이동 ``` 2번과 3번 두 가지 방법을 생각해봤습니다. 2번과 3번 둘 다 가능한가요? 가능하다면 더 적당한 방법이 무엇인지 궁금합니다.

프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• sign-up-login-web-a11y#130
• deco.zip

환경 정보

• 운영체제 정보 (예: Windows, macOS)
• Node.js 정보 (예: v16.14.0)
• 라이브러리 정보 (예: React v18.0.2)

[realldk]

title은 전역 속성이고 설정을 해준 내용이 마우스를 올리면 툴팁으로 보인다. aria-label은 화면을 볼 수 없는 상태일 때 스크린리더등을 통해서 알려주는 정보이다.

따라서 둘 다 설정하면 되겠다고 생각해서 아래와 같이 했습니다.

<header className={styles.header}>
  <nav className={styles.inner}>
    <h1>
      <Link to="/" title="메인페이지로 이동" aria-label="메인페이지로 이동">
        <Logo className={styles.logo} />
      </Link>
    </h1>