A11Y 101: 다중 링크가 있는 접근 가능한 카드

auditing my website 동안 내 카드에서 이상한 이중 탭 동작을 발견했습니다.

이는 카드 디자인에서 흔히 발생하는 접근성 문제입니다.
설명을 위해 내 카드 중 하나를 가져 갑시다.



이미지에서 전체 카드를 볼 수 있습니다. 카드 안에는 링크가 있는 이미지로 시작합니다.
그리고 그 아래에는 링크가 포함된 제목이 있습니다.
그 아래에는 링크일 필요가 없는 일반적인 게시물 정보가 있습니다.

접근성 문제

두 링크에서 문제가 발생합니다.
우선 둘 다 같은 항목으로 이동하므로 반복하는 것은 약간 중복됩니다.

둘째, 링크를 반드시 설명하지 않는 다른 설명 대체 텍스트가 있는 이미지를 상상해 보십시오.

스크린 리더는 해당 이미지 대체 텍스트를 읽고 사용자는 다른 곳으로 이동할 것으로 예상할 수 있습니다.

따라서 이 문제를 해결해야 합니다.
그리고 솔직히 이것을 하는 방법은 여러 가지가 있습니다.

탭 인덱스 사용

이런 식으로 두 개의 링크를 유지하지만 이미지의 tab index를 -1로 설정할 수 있습니다.

더욱 강력하게 만들기 위해 이 링크에 aria-hidden을 추가하여 무시되도록 할 수 있습니다.

<a href="/post" tabindex="-1" aria-hidden="true">
  <img src="img.jpg" alt="An image of Remix.run blog article" />
</a>

이 탭 때문에 인덱스 스크린 리더가 이 탭을 탐색합니다.

이것은 지금까지 가장 쉬운 방법이며 이 경우 스크린 리더는 여전히 이미지를 읽을 수 있습니다.

또는 CSS를 사용하여 숨김으로써 전체 링크를 보이지 않게 할 수 있습니다. 그런 다음 이미지 위에 절대적으로 배치할 수 있습니다.

카드 포장

또 다른 옵션은 전체 카드를 감싸고 설명적인 아리아 레이블을 사용하여 사용자에게 무슨 일이 일어나고 있는지 알려주는 것입니다.

제 경우에는 이미지와 제목만 링크 가능하게 하고 싶은데, 궁금하실 수도 있겠지만, 이미 그렇게 할 수 있지 않을까요?

데스크톱에서는 가능하지만 모바일 보기를 보면 텍스트가 실제로 둘 사이에 있음을 알 수 있습니다.
(이것이 탭이 제목에 먼저 표시되고 이미지에 표시되는 이유이기도 합니다.)



전체 카드를 둘러싸려면 콘텐츠 주위에 <a href>를 사용하거나 위에 있는 절대 위치 링크를 추가하여 기본적으로 카드를 덮을 수 있습니다.

나는 시맨틱 방식을 선호하므로 다음과 같이 보일 수 있습니다.

<a href="/post">
  <h3>Title of post</h3>
  <img src="img.jpg" alt="An image of Remix.run blog article" />
</a>

그러나 화면 판독기는 이제 "링크: 게시물 제목 Remix.run 블로그 기사의 이미지"를 읽습니다.

카드에 더 많은 사본을 포함한다면 아마도 더 많을 것입니다.
읽는 내용을 제어하고 싶기 때문에 이상적이지 않습니다.

링크에 aria 레이블을 추가하여 이 문제를 해결할 수 있습니다.

<a href="/post" aria-label="Title of post">
  <h3>Title of post</h3>
  <img src="img.jpg" alt="An image of Remix.run blog article" />
</a>

스크린 리더는 "링크: 게시물 제목"만 읽습니다.

결론

중복 링크는 SEO 관점에서도 더 많은 문제를 제공할 수 있으므로 항상 단일 링크 접근 방식을 시도하고 선택할 수 있습니다.

그러나 링크가 여러 개인 경우에는 화면 판독기에서 특정 링크를 숨기도록 선택할 수 있습니다.

전투를 현명하게 선택하고 잊지 마세요semantic HTML always wins!

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나