테이블 행에 클릭 이벤트 핸들러 붙이지 않기

테이블 UI에서 행 전체를 클릭하여 상세 페이지로 이동하는 패턴은 흔하게 사용돼요. 하지만 이를 접근성 있게 구현하려면 몇 가지 중요한 사항을 고려해야 해요.

테이블 행 클릭 패턴 예시

문제: 키보드로 선택이 되지 않고, 클릭 의미가 전달되지 않음

잘못된 예시

개발자들은 종종 테이블 행(<tr>)에 직접 클릭 이벤트를 추가해서 행 전체를 클릭 가능하게 만들어요.

jsx

<tr onclick="location.assign('/detail/김토스')">
  <td>김토스 <Icon /></td>
  <td>22</td>
  <td>공부</td>
  <td>주식</td>
  <td>-</td>
</tr>

이 방식에는 다음과 같은 접근성 문제가 있어요.

키보드 접근성 부족
- 테이블 행(<tr>)은 기본적으로 키보드로 포커스할 수 없어 키보드 사용자가 접근할 수 없어요.
- 키보드 사용자는 이 행을 선택하거나 클릭할 방법이 없어요.
스크린 리더 사용자에게 정보 부족
- 행이 클릭 가능하다는 정보가 스크린 리더 사용자에게 전달되지 않아요.
- 행이 어디로 연결되는지에 대한 정보가 없어요.

✅ 개선하기

행 전체를 클릭 가능하게 만들면서도 접근성을 유지하려면, 행 내부에 실제 링크 요소를 포함하고, CSS로 링크 영역을 확장하는 방법이 좋아요.

jsx

<style>
  .link::after {
    position: absolute;
    display: block;
    content: '';
    inset: 0;
  }
</style>

<tr style="position: relative;">
  <td>
    김토스
    <IconLink
      label="자세히 보기"
      href="/detail/김토스"
      className="link"
    />
  </td>
  <td>22</td>
  <td>공부</td>
  <td>주식</td>
  <td>-</td>
</tr>

이렇게 개선하면 다음과 같은 장점이 있어요.

키보드 접근성 제공
- 링크 요소는 기본적으로 키보드로 포커스할 수 있어 키보드 사용자도 접근 가능해요.
- Tab 키로 링크에 포커스하고 Enter 키로 활성화할 수 있어요.
스크린 리더 사용자에게 명확한 정보 제공
- 링크 요소는 스크린 리더에서 "링크"로 인식되어 클릭 가능함을 알려줘요.
- label 속성(실제로는 aria-label로 변환됨)을 통해 링크의 목적을 명확히 전달해요.
마우스 사용자를 위한 편의성 유지
- 브라우저의 링크 기능(새 창 열기, 링크 주소 복사)들을 온전히 제공할 수 있어요.
- CSS ::after 가상 요소를 사용해 행 전체를 클릭 가능하게 만들어, 마우스 사용자의 편의성을 유지해요.
- 작은 링크 영역만 클릭해야 하는 불편함을 해소해요.
시맨틱 마크업 준수
- HTML의 의미론적 구조를 유지하면서 접근성을 향상시켜요.
- 링크의 목적이 명확히 표현돼요.

테이블 행에 클릭 이벤트 핸들러 붙이지 않기 ​

문제: 키보드로 선택이 되지 않고, 클릭 의미가 전달되지 않음 ​

잘못된 예시 ​

✅ 개선하기 ​

테이블 행에 클릭 이벤트 핸들러 붙이지 않기

문제: 키보드로 선택이 되지 않고, 클릭 의미가 전달되지 않음

잘못된 예시

✅ 개선하기