HTML/CSS에서 tabindex와 시맨틱 태그 활용: 이론과 실전 예시
1. 시맨틱 태그와 웹 접근성
웹 개발에서 시맨틱 태그를 사용하는 것은 구조적 의미를 명확히 하고, 웹 접근성을 향상시키는 데 중요한 역할을 합니다. 시맨틱 태그는 콘텐츠의 목적을 명확히 하여 검색 엔진 최적화(SEO)와 접근성 도구(스크린 리더 등)의 효율성을 높입니다.
예를 들어, ul과 li는 목록 데이터를 표현할 때 사용되며, div는 구조적 의미가 없는 컨테이너로 사용됩니다. 과도한 div 태그 남발은 코드 가독성을 낮추고 접근성을 저해할 수 있습니다.
2. tabindex 속성의 정의와 사용법
tabindex는 HTML 요소의 키보드 포커스 탐색 순서를 제어하는 속성입니다. 기본적으로 대화형 요소(예: a, button, input)는 tabindex="0"을 가지며, 키보드로 탐색할 수 있습니다.
계속 놓친 부분이
1. a 태그 속성에 자식요소로 tabindex 가질 수 있는 인터랙티브한 요소를 삽입한 것(tabindex 사용 포함)
2. img 태그로 변경 후에도 span 태그가 아닌 button 태그로 또 자식 요소로 삽입해서 오류가 뜬 것
tabindex 값의 의미
tabindex="0": 요소를 기본 탐색 순서에 포함.- 양의 정수(
tabindex="1"이상): 탐색 순서를 명시적으로 지정하지만, 접근성을 저해할 수 있어 권장하지 않음[3]. tabindex="-1": 요소를 키보드 포커스에서 제외하지만 프로그래밍적으로 포커스 가능[5].
사용 사례
- 비대화형 콘텐츠에 키보드 이벤트를 추가하려면
tabindex="0"을 설정합니다. - 특정 요소를 탐색 순서에서 제외하려면
tabindex="-1"을 사용합니다.
3. 실전 예제: 카드 컴포넌트 개선
문제점
초기 코드에서 다음과 같은 문제가 있었습니다:
1. 과도한 `태그 사용으로 시맨틱 구조가 부족. 2.tabindex속성 남용으로 키보드 탐색이 비정상적으로 작동. 3.button태그를a` 태그 내부에 삽입하여 HTML 구조 오류 발생.
수정 과정
수정 전 코드:
<div class="card-link">
<div class="card-link-column">
<a href="/">
<div class="card-content" tabindex="0">
<img src="./assets/image.jpg" alt="상품 이미지" class="product-card-image" />
<div class="arrow-icon-container" tabindex="0">
<img src="./assets/icon.svg" alt="아이콘" />
</div>
</div>
</a>
</div>
</div>최종 수정 코드:
<ul class="card-link">
<li class="card-link-item">
<a href="/" class="card-content">
<img src="./assets/image.jpg" alt="상품 이미지" class="product-card-image" />
<span class="purchase-icon-container" aria-label="구매하기">
<img src="./assets/icon.svg" alt="구매하기 아이콘" />
</span>
</a>
</li>
</ul>개선 사항
- 시맨틱 태그 활용:
ul과li를 사용해 목록 구조를 명확히 함. - HTML 구조 오류 제거:
button대신span을 사용하여 구조적 문제 해결. - 웹 접근성 향상: 키보드 탐색은 기본적인 HTML 마크업 순서에 따라 자연스럽게 이루어지도록 설계.
4. tabindex 활용 시 주의사항
- 남용 금지:
tabindex값을 0보다 큰 값으로 설정하면 접근성 도구의 탐색 흐름을 방해할 수 있습니다[3]. - 자연스러운 탐색 보장: 마크업 순서를 논리적으로 구성하여 추가적인
tabindex설정 없이도 키보드 탐색이 원활하도록 작성합니다. - 비대화형 콘텐츠에 이벤트 추가: 필요할 경우만
tabindex를 사용해 키보드 이벤트를 활성화합니다.
5. 요약
웹 개발에서는 디자인 요구사항과 접근성 사이의 균형을 유지해야 합니다. 시맨틱 태그와 적절한 tabindex 속성 사용은 사용자 경험과 웹 접근성을 동시에 향상시킬 수 있습니다. 위 예제는 이러한 원칙을 실천하며, 올바른 HTML 구조와 속성 활용의 중요성을 보여줍니다.
