웹 접근성, 실전 코드로
확실하게 익히세요.

의미를 가진 이미지에는 대체 텍스트(alt)가 필요합니다. 이벤트 배너나 프로모션 이미지는 사용자에게 중요한 정보를 전달하므로, alt 속성에 이미지가 전달하는 내용을 명확하게 작성해야 합니다.

장식용 이미지는 스크린 리더에서 읽히지 않아야 합니다. 버튼이나 링크 안에 텍스트가 이미 있는 경우, 아이콘 이미지의 alt는 빈 문자열(alt="")로 설정하여 중복 낭독을 방지해야 합니다.

복잡한 이미지(차트, 그래프, 다이어그램 등)는 단순한 alt 텍스트만으로는 충분하지 않을 수 있습니다. 구체적인 수치와 데이터를 포함하거나, aria-describedby를 사용하여 상세 설명을 연결해야 합니다. **이 차트의 정보:** 이 이미지는 연도별 매출 막대 그래프를 보여줍니다. 2020년 1억원, 2021년 1.5억원, 2022년 2억원, 2023년 2.5억원으로 지속적인 성장 추세를 보입니다.

클릭 이벤트만 가진 div/span은 기본적으로 키보드 포커스를 받을 수 없습니다. 키보드 사용자가 동일한 기능을 사용할 수 있도록 적절한 역할(role)과 포커스(tabIndex)를 제공해야 합니다.

입력 필드는 스크린 리더 사용자가 용도를 이해할 수 있도록 레이블이 필요합니다. <label for="...">와 <input id="...">를 연결해 주세요.

반복되는 영역(헤더/내비게이션)을 건너뛰고 본문으로 바로 이동할 수 있는 “본문 바로가기” 링크를 제공해야 합니다.

텍스트와 배경 간의 명도 대비가 충분하지 않으면 저시력 사용자와 모바일 환경에서 읽기 어렵습니다. 본문 텍스트의 대비를 4.5:1 이상이 되도록 조정해보세요.

키보드 사용자는 포커스 표시를 통해 “현재 어디에 있는지”를 파악합니다. 포커스 아웃라인을 제거했다면, 대체 포커스 스타일을 제공해야 합니다.

여러 링크가 같은 텍스트(예: “더보기”)를 가지면 스크린 리더 사용자가 목적지를 구분하기 어렵습니다. 링크 텍스트만으로 목적을 이해할 수 있게 만들어보세요.

한 페이지 안에서 id 값은 중복되면 안 됩니다. id 중복은 레이블 연결, 스크린 리더 탐색, 자동완성 등에 문제를 만들 수 있습니다.

데이터 테이블은 제목 셀과 내용 셀의 관계를 명확히 해야 합니다. <th>와 scope를 사용해 헤더를 제공하세요.

필수 입력을 빨간색(*)만으로 표시하면 색각 이상 사용자나 스크린 리더 사용자에게 정보가 전달되지 않을 수 있습니다. 색상 외 수단(텍스트/숨김 텍스트 등)으로 필수 여부를 제공하세요.

헤딩(h1~h6)은 논리적 순서를 따라야 합니다. h1 다음에 바로 h3를 사용하면 스크린 리더 사용자가 문서 구조를 이해하기 어렵습니다. h1 → h2 → h3 순서로 단계를 건너뛰지 않아야 합니다.

HTML 문서는 lang 속성으로 주 언어를 명시해야 합니다. 스크린 리더가 올바른 발음과 억양으로 콘텐츠를 읽을 수 있도록 합니다. 한국어 콘텐츠는 lang="ko"를 사용해주세요.