Semantic HTML 리팩토링을 통한 Lighthouse 접근성 점수 100/100 달성

Why Web Accessibility Matters:How I Fixed My Portfolio

mercymuiruri-hue2026년 6월 24일2분beginner

AI 요약

Context

시각적 요소 중심의 설계로 인한 웹 접근성 결여 및 스크린 리더의 페이지 구조 인식 불가 문제 발생. Generic Tag(div) 남용으로 인한 콘텐츠 계층 구조 상실 및 비정상적 HTML 구문으로 인한 보조 공학 기기의 내비게이션 오류 노출.

Generic Tag를 header, nav, main, footer 등 Semantic HTML로 교체하여 문서의 논리적 랜드마크 구축
div 기반의 단순 레이아웃을 구조적 의미를 가진 태그로 전환하여 스크린 리더의 탐색 효율성 증대
잘못 닫힌 <ul> 태그를 표준 Closing Tag로 수정하여 DOM 트리의 무결성 확보 및 렌더링 오류 제거
앵커 텍스트와 실제 href 목적지의 불일치를 수정하여 오디오 설명 기반 사용자의 정보 신뢰성 확보
이미지 Alternative Text 적용을 통해 비시각적 요소의 정보 전달 체계 보완

Lighthouse accessibility score 100/100 달성

실천 포인트

1. `div`와 `span` 사용 전 Semantic Tag 대체 가능 여부 검토

2. Lighthouse 및 WAVE 도구를 활용한 접근성 Audit 정기 수행

3. HTML 구문 유효성 검사를 통한 DOM 트리 무결성 확인

4. 앵커 텍스트와 실제 연결 대상의 일치 여부 검증

태그