검사 규칙 사전

이미지에 대체 텍스트(alt)가 없습니다

• img-alt-missing
• WCAG 1.1.1 · A
• 심각도 치명적

왜 문제인가

화면낭독기 사용자는 이미지의 내용을 전혀 알 수 없고, 파일 이름이 그대로 읽힙니다.

이 도구의 판정 근거

<img> 요소에 alt 속성 자체가 없는 경우. alt=""(장식 이미지 표시)는 정상으로 봅니다.

고치는 방법

내용을 전달하는 이미지는 이미지가 전하는 정보를 문장으로, 순수 장식 이미지는 alt=""로 둡니다. "이미지", "사진" 같은 상투어는 쓰지 않습니다.

<img src="/banner.jpg">

<img src="/banner.jpg" alt="가을 시즌 아우터 최대 40% 할인">

더 읽기: 대체 텍스트(alt) 제대로 쓰는 법

대체 텍스트가 내용을 설명하지 못합니다

• img-alt-suspicious
• WCAG 1.1.1 · A
• 심각도 보통

왜 문제인가

"image", "사진", 파일명 같은 값은 이미지가 무엇인지 알려주지 못합니다.

이 도구의 판정 근거

alt 값이 "image", "photo", "icon", "logo", "banner", "사진", "이미지", "배너", "로고" 같은 일반어이거나, 확장자(.jpg 등)·이미지 파일명과 같은 경우.

고치는 방법

이미지가 전달하려는 정보를 그대로 서술합니다. 옆 텍스트가 이미 같은 내용을 설명한다면 alt=""로 두어 중복 낭독을 피합니다.

<img src="/team.jpg" alt="image">

<img src="/team.jpg" alt="사무실에서 회의 중인 개발팀 다섯 명">

더 읽기: 대체 텍스트(alt) 제대로 쓰는 법

이미지 버튼(input type=image)에 alt가 없습니다

• input-image-alt
• WCAG 1.1.1 · A
• 심각도 치명적

왜 문제인가

누르면 무슨 일이 일어나는 버튼인지 알 수 없습니다.

이 도구의 판정 근거

<input type="image">에 alt가 없는 경우.

고치는 방법

이미지가 아니라 "버튼이 하는 일"을 alt에 씁니다.

<input type="image" src="/go.png">

<input type="image" src="/go.png" alt="검색">

이미지맵 영역(area)에 alt가 없습니다

• area-alt
• WCAG 1.1.1 · A
• 심각도 치명적

왜 문제인가

이미지맵의 각 링크 목적지를 알 수 없습니다.

이 도구의 판정 근거

이미지맵의 <area>에 alt가 없는 경우.

고치는 방법

각 영역이 이동하는 목적지를 alt로 씁니다. 가능하면 이미지맵 대신 일반 링크 목록으로 대체합니다.

<area shape="rect" coords="0,0,80,40" href="/seoul">

<area shape="rect" coords="0,0,80,40" href="/seoul" alt="서울 지점 안내">

SVG 아이콘에 이름이 없습니다

• svg-no-name
• WCAG 1.1.1 · A
• 심각도 보통

왜 문제인가

의미가 있는 SVG는 role="img"와 이름이 필요하고, 장식용이면 aria-hidden="true"로 감춰야 합니다.

이 도구의 판정 근거

링크·버튼 밖에 있는 <svg>에 이름(<title> 자식, aria-label, aria-labelledby)도 aria-hidden="true"도 role="presentation"도 없는 경우. 링크·버튼 안의 아이콘은 그 요소의 이름 규칙이 판정합니다.

고치는 방법

의미 있는 아이콘이면 role="img"와 aria-label(또는 <title>)을, 텍스트 옆의 장식 아이콘이면 aria-hidden="true"를 붙입니다.

<svg width="20" height="20">…</svg>

<svg width="20" height="20" aria-hidden="true" focusable="false">…</svg>

버튼에 이름이 없습니다

• button-no-name
• WCAG 4.1.2 · A
• 심각도 치명적

왜 문제인가

화면낭독기가 "버튼"이라고만 읽어 무슨 버튼인지 알 수 없습니다.

이 도구의 판정 근거

<button> 또는 role="button" 안에 읽을 수 있는 텍스트·aria-label·유효한 alt 이미지가 없는 경우.

고치는 방법

눈에 보이는 텍스트를 버튼 안에 넣는 것이 가장 좋고, 아이콘만 있다면 aria-label로 "무엇을 하는 버튼인지" 씁니다.

<button><svg>…</svg></button>

<button aria-label="메뉴 열기"><svg aria-hidden="true">…</svg></button>

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

링크에 이름이 없습니다

• link-no-name
• WCAG 4.1.2 · A
• 심각도 치명적

왜 문제인가

링크 목록에서 목적지를 구분할 수 없습니다. 아이콘만 있는 링크에서 자주 발생합니다.

이 도구의 판정 근거

<a href> 안에 읽을 수 있는 텍스트나 aria-label이 없는 경우(아이콘만 있는 링크 등).

고치는 방법

링크가 이동하는 곳을 텍스트나 aria-label로 알려 줍니다. 이미지 링크라면 이미지의 alt가 링크 이름이 됩니다.

<a href="/cart"><svg>…</svg></a>

<a href="/cart" aria-label="장바구니"><svg aria-hidden="true">…</svg></a>

링크 텍스트가 모호합니다

• link-vague-text
• WCAG 2.4.4 · A
• 심각도 보통

왜 문제인가

"여기", "클릭", "더보기"는 링크만 따로 훑을 때 목적지를 알 수 없습니다.

이 도구의 판정 근거

링크 텍스트가 "여기", "더보기", "click here", "read more" 등 정해 둔 모호한 문구와 일치하는 경우.

고치는 방법

링크만 따로 모아 들어도 목적지를 알 수 있게, 대상이 드러나는 문구를 씁니다. 디자인상 "더보기"를 유지해야 한다면 visually-hidden 텍스트나 aria-label로 대상을 덧붙입니다.

<a href="/notice/12">더보기</a>

<a href="/notice/12">배송 정책 변경 공지 더보기</a>

iframe에 title이 없습니다

• iframe-no-title
• WCAG 4.1.2 · A
• 심각도 높음

왜 문제인가

내부에 무엇이 들었는지 모른 채 프레임 안으로 들어가게 됩니다.

이 도구의 판정 근거

<iframe>에 title(또는 aria-label)이 없는 경우.

고치는 방법

프레임 안에 무엇이 있는지 알려 주는 title을 붙입니다. 안에 든 내용이 없는 프레임(추적용 등)은 aria-hidden으로 감춥니다.

<iframe src="https://maps.example/…"></iframe>

<iframe src="https://maps.example/…" title="매장 위치 지도"></iframe>

더 읽기: 표·iframe·영상·오디오를 접근 가능하게 만들기

글자와 배경의 대비가 부족합니다

• contrast-low
• WCAG 1.4.3 · AA
• 심각도 높음

왜 문제인가

저시력·고령 사용자나 밝은 곳에서 글자를 읽기 어렵습니다. 일반 글자 4.5:1, 큰 글자 3:1 이상이 필요합니다.

이 도구의 판정 근거

CSS를 해석해 글자색과 배경색(자기 자신 → 조상 순)을 구하고 WCAG 공식으로 대비를 계산합니다. 큰 글자(24px 이상, 굵으면 약 18.7px 이상)는 3:1, 나머지는 4.5:1 미만이면 보고합니다. 배경 이미지 위의 글자는 판정하지 않고, 배경색을 찾지 못하면 흰색으로 가정하며(이 경우 심각도 보통으로 낮춤) 같은 색 조합은 한 번만 보고합니다.

고치는 방법

글자를 더 진하게, 배경을 더 옅게 조정해 4.5:1(큰 글자 3:1) 이상을 맞춥니다. 흰 배경에서 회색 본문은 #767676보다 어두워야 4.5:1을 넘습니다. 라이트·다크 두 테마를 각각 확인하세요.

.sub { color: #aaaaaa; }   /* 2.32:1 */

.sub { color: #595959; }   /* 7.00:1 */

더 읽기: 색상 대비 4.5:1, 실제로 어떻게 맞추나

href 없는 <a>를 클릭 요소로 쓰고 있습니다

• link-no-href
• WCAG 2.1.1 · A
• 심각도 높음

왜 문제인가

href가 없는 <a>는 탭 키로 이동할 수 없어 키보드 사용자가 조작할 수 없습니다.

이 도구의 판정 근거

href가 없는 <a>에 클릭 핸들러(onclick 등)나 role="link"가 붙어 있고 tabindex가 없는 경우.

고치는 방법

이동이면 실제 href를, 동작(열기·저장 등)이면 <button>을 씁니다. href가 없는 <a>는 탭 순서에 들어가지 않습니다.

<a onclick="openMenu()">메뉴</a>

<button type="button" onclick="openMenu()">메뉴</button>

더 읽기: 키보드만으로 쓸 수 있는 사이트 만들기

tabindex 값이 0보다 큽니다

• positive-tabindex
• WCAG 2.4.3 · A
• 심각도 높음

왜 문제인가

탭 순서가 화면에 보이는 순서와 어긋나 조작 흐름이 뒤엉킵니다.

이 도구의 판정 근거

tabindex 값이 1 이상인 요소.

고치는 방법

tabindex는 0(탭 순서에 넣기)이나 -1(스크립트로만 포커스)만 사용합니다. 순서를 바꾸고 싶다면 마크업 순서 자체를 바꾸세요.

<input tabindex="3">

<input>   <!-- 마크업 순서가 곧 탭 순서 -->

더 읽기: 키보드만으로 쓸 수 있는 사이트 만들기

div/span에 클릭 동작만 붙어 있습니다

• click-not-focusable
• WCAG 2.1.1 · A
• 심각도 치명적

왜 문제인가

탭 키로 도달할 수 없고 Enter로 실행할 수도 없어, 키보드만 쓰는 사용자는 기능 자체를 못 씁니다.

이 도구의 판정 근거

onclick 등 클릭 핸들러가 붙은 <div>·<span>·<li>·<td>·<p>·<img> 요소 중 tabindex(0 이상)와 알맞은 role이 함께 없는 것.

고치는 방법

가장 좋은 방법은 <button>으로 교체하는 것입니다. 구조상 어렵다면 role="button" tabindex="0"과 Enter·Space 키 처리를 함께 구현해야 합니다.

<div onclick="buy()">바로 구매</div>

<button type="button" onclick="buy()">바로 구매</button>

더 읽기: 키보드만으로 쓸 수 있는 사이트 만들기

포커스 표시(outline)를 없앴습니다

• focus-outline-removed
• WCAG 2.4.7 · AA
• 심각도 높음

왜 문제인가

지금 어디에 포커스가 있는지 보이지 않아 키보드 조작이 사실상 불가능해집니다.

이 도구의 판정 근거

CSS에서 outline을 none/0으로 지정한 규칙 중 :focus 선택자이거나 a·button·input·* 같은 전역 선택자인 것. 같은 규칙에 box-shadow·border-bottom이 있으면 대체 표시로 보아 통과시킵니다. 한 페이지에서 최대 3건까지만 보고합니다.

고치는 방법

outline을 지우지 말고, 지웠다면 :focus-visible에 눈에 띄는 표시(3px 이상의 대비 있는 테두리)를 다시 넣습니다.

a:focus { outline: none; }

a:focus-visible { outline: 3px solid #0f5f8f; outline-offset: 2px; }

더 읽기: 키보드만으로 쓸 수 있는 사이트 만들기

role="button"에 tabindex가 없습니다

• role-button-no-tabindex
• WCAG 2.1.1 · A
• 심각도 높음

왜 문제인가

역할만 버튼이고 실제로는 탭으로 갈 수 없습니다.

이 도구의 판정 근거

role="button"이 붙은 요소가 <button>·<a>·<input> 같은 기본 포커스 요소도 아니고 tabindex도 없는 경우.

고치는 방법

<button>으로 교체하세요. 어렵다면 tabindex="0"과 Enter·Space 키 핸들러를 함께 추가해야 합니다.

<span role="button" onclick="save()">저장</span>

<button type="button" onclick="save()">저장</button>

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

입력창에 레이블이 없습니다

• form-label-missing
• WCAG 3.3.2 · A
• 심각도 치명적

왜 문제인가

무엇을 입력해야 하는 칸인지 알 수 없고, 음성 입력으로 지목할 수도 없습니다.

이 도구의 판정 근거

<input>·<select>·<textarea>에 label[for], 감싸는 <label>, aria-label, aria-labelledby, title, placeholder 중 어느 것도 없는 경우(hidden·submit·button·image 유형은 제외).

고치는 방법

눈에 보이는 <label for="id">를 붙입니다. 시각적으로 레이블을 숨겨야 하는 디자인이면 visually-hidden 클래스로 숨기되 읽히게 합니다.

<input type="text" name="q">

<label for="q">검색어</label>
<input type="text" id="q" name="q">

더 읽기: 접근 가능한 입력 양식 만들기

placeholder만으로 레이블을 대신하고 있습니다

• form-placeholder-only
• WCAG 3.3.2 · A
• 심각도 보통

왜 문제인가

입력을 시작하면 안내가 사라지고, 일부 화면낭독기는 placeholder를 읽지 않습니다.

이 도구의 판정 근거

입력창에 placeholder(또는 title)만 있고 label·aria-label·aria-labelledby가 연결되지 않은 경우.

고치는 방법

placeholder는 힌트일 뿐 레이블이 아닙니다. 입력을 시작하면 사라지고 대비도 낮습니다. <label>을 붙이고 placeholder는 예시 입력값 정도로만 씁니다.

<input type="text" placeholder="이메일">

<label for="email">이메일</label>
<input type="email" id="email" placeholder="name@example.com">

더 읽기: 접근 가능한 입력 양식 만들기

개인정보 입력칸에 autocomplete가 없습니다

• form-autocomplete
• WCAG 1.3.5 · AA
• 심각도 낮음

왜 문제인가

autocomplete가 있으면 인지·운동 장애 사용자가 반복 입력을 줄일 수 있습니다.

이 도구의 판정 근거

name·id·placeholder 문구가 이름·이메일·전화·우편번호·주소·생년월일처럼 사용자 자신의 정보를 받는 칸으로 보이는데 autocomplete가 없는 경우. 검색창·체크박스 등은 대상에서 제외합니다.

고치는 방법

표준 토큰(name, email, tel, street-address, postal-code, bday 등)을 autocomplete에 지정합니다. 반복 입력이 어려운 사용자에게 큰 도움이 됩니다(WCAG 1.3.5).

<input type="text" name="tel">

<input type="tel" name="tel" autocomplete="tel">

더 읽기: 접근 가능한 입력 양식 만들기

<html>에 lang 속성이 없습니다

• html-lang-missing
• WCAG 3.1.1 · A
• 심각도 치명적

왜 문제인가

화면낭독기가 어느 나라 말로 읽을지 몰라 한국어를 영어 발음으로 읽습니다.

이 도구의 판정 근거

<html> 요소에 lang 속성이 없거나 비어 있는 경우.

고치는 방법

문서의 주 언어를 지정합니다. 한국어 페이지면 lang="ko". 문서 중간에 다른 언어 문구가 섞이면 그 부분에만 lang을 따로 지정합니다.

<html>

<html lang="ko">

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

페이지 제목(<title>)이 없거나 비어 있습니다

• title-missing
• WCAG 2.4.2 · A
• 심각도 치명적

왜 문제인가

탭을 여러 개 열었을 때 현재 페이지를 구분할 수 없습니다.

이 도구의 판정 근거

<title>이 없거나 텍스트가 비어 있는 경우.

고치는 방법

페이지마다 고유한 제목을 씁니다. 구체적인 정보를 앞에, 사이트 이름을 뒤에 두는 것이 일반적입니다. 싱글 페이지 앱은 화면이 바뀔 때 document.title도 갱신합니다.

<title></title>

<title>장바구니 (3) - 예시 쇼핑몰</title>

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

제목 단계가 건너뛰었습니다

• heading-skip
• WCAG 1.3.1 · A
• 심각도 보통

왜 문제인가

화면낭독기 사용자는 제목 목록으로 페이지를 훑습니다. 단계가 튀면 구조를 잘못 이해합니다.

이 도구의 판정 근거

제목 레벨이 h2에서 h4로 뛰는 것처럼 아래로 내려가면서 단계를 건너뛴 경우.

고치는 방법

글자 크기가 아니라 문서의 위계에 맞춰 레벨을 고르고, 크기는 CSS로 조절합니다. 위로 올라가는 건 몇 단계든 괜찮지만 내려갈 때는 한 단계씩만 내려갑니다.

<h2>상품</h2>
<h4>배송 안내</h4>

<h2>상품</h2>
<h3>배송 안내</h3>

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

페이지에 제목(h1) 요소가 없습니다

• heading-none
• WCAG 1.3.1 · A
• 심각도 보통

왜 문제인가

페이지의 주제를 알려주는 최상위 제목이 필요합니다.

이 도구의 판정 근거

페이지에 h1 요소가 하나도 없는 경우.

고치는 방법

페이지의 주제를 담은 h1을 하나 둡니다. 로고를 h1로 감싸는 방식은 모든 페이지의 h1이 같아지므로 피합니다.

<div class="page-title">오늘의 특가</div>

<h1>오늘의 특가</h1>

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

내용이 빈 제목 요소가 있습니다

• heading-empty
• WCAG 1.3.1 · A
• 심각도 보통

왜 문제인가

빈 제목은 제목 목록에 이름 없이 나타나 탐색을 방해합니다.

이 도구의 판정 근거

h1~h6 요소 안에 텍스트(또는 이름이 있는 이미지)가 없는 경우.

고치는 방법

빈 제목은 삭제합니다. 간격을 벌리려는 목적이라면 CSS margin을 쓰세요. CMS에서 빈 줄에 제목 서식이 남지 않았는지도 확인합니다.

<h2></h2>

<!-- 빈 제목 삭제 -->

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

본문 영역(main) 표시가 없습니다

• landmark-missing
• WCAG 1.3.6 · AAA
• 심각도 낮음

왜 문제인가

main/nav 같은 영역 표시가 있으면 반복되는 머리말을 건너뛰고 본문으로 갈 수 있습니다.

이 도구의 판정 근거

<main>(또는 role="main")이 없는 경우.

고치는 방법

본문을 <main>으로 감쌉니다. 머리말·메뉴·꼬리말은 main 바깥에 두고, 메뉴가 여러 개면 <nav aria-label="…">로 구분합니다.

<div id="content">…</div>

<main id="content">…</main>

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

본문 바로가기 링크가 없습니다

• skip-link-missing
• WCAG 2.4.1 · A
• 심각도 보통

왜 문제인가

키보드 사용자가 매 페이지마다 메뉴를 전부 탭으로 지나야 합니다.

이 도구의 판정 근거

링크와 nav의 합이 12개를 넘는 페이지에서, 문서 앞쪽 링크 6개 안에 본문·콘텐츠·skip·main 같은 이름의 내부(#) 링크가 없는 경우.

고치는 방법

페이지 맨 앞에 본문으로 가는 링크를 두고, 포커스를 받을 때만 화면에 보이게 합니다. display:none으로 숨기면 포커스도 못 받으니 사용하지 않습니다.

<body>
<nav>…링크 30개…</nav>

<body>
<a href="#main" class="skip-link">본문 바로가기</a>
<nav>…</nav>
<main id="main">…

더 읽기: 제목·랜드마크·페이지 제목으로 문서 구조 잡기

표에 제목 셀(th)이 없습니다

• table-no-header
• WCAG 1.3.1 · A
• 심각도 보통

왜 문제인가

화면낭독기가 셀을 읽을 때 어느 항목의 값인지 알려줄 수 없습니다.

이 도구의 판정 근거

행이 2개 이상인 <table>에 <th>가 하나도 없는 경우(role="presentation"인 레이아웃 표와 한 줄짜리 표는 제외).

고치는 방법

머리 칸을 <th scope="col">·<th scope="row">로 바꾸고 <caption>으로 표 제목을 붙입니다. 레이아웃 용도라면 표 대신 CSS 레이아웃을 씁니다.

<table><tr><td>사이즈</td><td>재고</td></tr>…</table>

<table><caption>사이즈별 재고</caption>
<tr><th scope="col">사이즈</th><th scope="col">재고</th></tr>…</table>

더 읽기: 표·iframe·영상·오디오를 접근 가능하게 만들기

id가 중복됩니다

• duplicate-id
• WCAG 4.1.1 · A
• 심각도 보통

왜 문제인가

label[for]나 aria-labelledby가 엉뚱한 요소를 가리키게 됩니다.

이 도구의 판정 근거

한 문서 안에서 같은 id 값이 두 번 이상 쓰인 경우.

고치는 방법

id는 문서에서 하나만 씁니다. 반복되는 컴포넌트에서는 인스턴스마다 고유한 id를 생성하세요. 중복 id는 label[for]·aria-labelledby가 엉뚱한 요소를 가리키게 만듭니다.

<div id="menu">…</div>
<div id="menu">…</div>

<div id="menu-main">…</div>
<div id="menu-footer">…</div>

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

aria 참조가 없는 id를 가리킵니다

• aria-ref-broken
• WCAG 4.1.2 · A
• 심각도 높음

왜 문제인가

aria-labelledby/describedby가 깨지면 이름이 아예 전달되지 않습니다.

이 도구의 판정 근거

aria-labelledby, aria-describedby, aria-controls, aria-owns가 가리키는 id가 문서에 없는 경우.

고치는 방법

참조하는 요소의 id가 정확히 존재하는지 확인합니다. 조건부로 렌더링되는 요소를 참조할 때는 참조도 함께 제거합니다.

<input aria-labelledby="name-label">   <!-- name-label 없음 -->

<span id="name-label">이름</span>
<input aria-labelledby="name-label">

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

알 수 없는 role 값입니다

• aria-role-invalid
• WCAG 4.1.2 · A
• 심각도 보통

왜 문제인가

오타가 난 role은 무시되거나 잘못된 역할로 전달됩니다.

이 도구의 판정 근거

role 값이 WAI-ARIA에 정의된 역할 목록에 없는 경우.

고치는 방법

role 값 오타를 고치거나, 애초에 role이 필요한지 재검토합니다. 같은 일을 하는 네이티브 요소가 있다면 role을 쓰지 않는 것이 최선입니다.

<div role="buton">저장</div>

<button type="button">저장</button>

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

aria-hidden 요소 안에 초점 가능한 요소가 있습니다

• aria-hidden-focusable
• WCAG 4.1.2 · A
• 심각도 높음

왜 문제인가

탭으로 도달은 되는데 화면낭독기는 읽지 않는, 유령 상태가 됩니다.

이 도구의 판정 근거

aria-hidden="true"인 요소의 자손 중에 링크·버튼·입력창처럼 탭으로 포커스를 받는 요소가 있는 경우.

고치는 방법

숨길 UI 전체를 hidden 속성(또는 inert)으로 완전히 빼거나, 포커스 가능한 요소를 aria-hidden 영역 밖으로 옮기거나 tabindex="-1"로 탭 순서에서 제외합니다.

<div aria-hidden="true"><button>닫기</button></div>

<div hidden><button>닫기</button></div>

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

팝업(모달)에 역할 표시가 없습니다

• dialog-not-marked
• WCAG 4.1.2 · A
• 심각도 보통

왜 문제인가

role="dialog"와 aria-modal이 없으면 화면낭독기가 팝업 밖 내용을 계속 읽습니다.

이 도구의 판정 근거

<div>·<section>·<aside>의 class나 id에 modal, dialog, popup, lightbox 같은 단어가 있는데, 그 요소·안쪽·바깥쪽 어디에도 role="dialog"(또는 alertdialog, <dialog>)가 없는 경우. 이름으로 추정하므로 팝업이 아닌 요소가 걸릴 수 있습니다.

고치는 방법

<dialog>와 showModal()을 쓰거나, div라면 role="dialog" aria-modal="true" aria-labelledby를 붙이고 포커스 이동·가두기·Esc 닫기·복귀를 구현합니다.

<div class="modal">…</div>

<div class="modal" role="dialog" aria-modal="true" aria-labelledby="m-title">
  <h2 id="m-title">주문 취소</h2>…</div>

더 읽기: ARIA는 언제 쓰고 언제 쓰지 말아야 하나

화면 확대를 막고 있습니다

• viewport-no-zoom
• WCAG 1.4.4 · AA
• 심각도 높음

왜 문제인가

user-scalable=no / maximum-scale=1 은 저시력·고령 사용자의 확대를 차단합니다.

이 도구의 판정 근거

<meta name="viewport">에 user-scalable=no(또는 0)가 있거나 maximum-scale이 1 이하인 경우.

고치는 방법

user-scalable=no와 maximum-scale을 제거하고 width=device-width, initial-scale=1만 남깁니다. 확대 시 깨지는 레이아웃은 CSS를 고칩니다.

<meta name="viewport" content="width=device-width, user-scalable=no">

<meta name="viewport" content="width=device-width, initial-scale=1">

더 읽기: 확대·터치·움직임: 저시력과 다양한 사용 환경 대응하기

meta refresh로 자동 이동/새로고침합니다

• meta-refresh
• WCAG 2.2.1 · A
• 심각도 높음

왜 문제인가

읽는 도중 화면이 바뀌어 내용을 놓치고, 조작 중이던 작업이 사라집니다.

이 도구의 판정 근거

<meta http-equiv="refresh">가 있는 경우.

고치는 방법

자동 이동·새로고침 대신 사용자가 직접 누르는 링크를 제공합니다. 시간 제한이 필요한 경우엔 미리 알리고 연장 수단을 줍니다.

<meta http-equiv="refresh" content="5;url=/next">

<a href="/next">다음 페이지로 이동</a>

더 읽기: 확대·터치·움직임: 저시력과 다양한 사용 환경 대응하기

소리/영상이 자동 재생됩니다

• autoplay-media
• WCAG 1.4.2 · A
• 심각도 보통

왜 문제인가

화면낭독기 음성과 겹쳐 아무것도 들리지 않게 됩니다. 정지 수단이 필요합니다.

이 도구의 판정 근거

autoplay 속성이 있는 <audio>, 또는 muted가 아닌 <video>. 음소거 상태로 시작하는 영상은 소리 문제가 없어 제외하지만, 움직임 정지 수단은 별도로 확인해야 합니다.

고치는 방법

자동 재생을 끄거나, 최소한 음소거로 시작하고 눈에 띄는 정지 버튼을 제공합니다. 3초 넘게 소리가 나면 반드시 정지·음량 조절 수단이 있어야 합니다.

<video autoplay src="promo.mp4"></video>

<video controls preload="metadata" src="promo.mp4"></video>

더 읽기: 표·iframe·영상·오디오를 접근 가능하게 만들기

깜빡이거나 흐르는 요소가 있습니다

• deprecated-motion
• WCAG 2.2.2 · A
• 심각도 보통

왜 문제인가

marquee/blink는 멈출 수 없어 주의력·인지 장애 사용자에게 장벽이 됩니다.

이 도구의 판정 근거

<marquee> 또는 <blink> 요소.

고치는 방법

두 요소 모두 표준에서 제거된 지 오래됩니다. 흐르는 공지는 정지 버튼이 있는 캐러셀로, 깜빡임은 제거하세요. 움직임은 prefers-reduced-motion을 존중합니다.

<marquee>이벤트 진행 중</marquee>

<p>이벤트 진행 중</p>

더 읽기: 확대·터치·움직임: 저시력과 다양한 사용 환경 대응하기