Blog 웹 접근성 점검 및 개선 보고서

페이지를 흑백(그레이스케일)으로 바꿔 보고, 색만으로 구분되는 정보(필수 입력 표시, 그래프 범례, 링크 구분, 오류 표시 등)가 있는지 확인하세요. 색 외에 패턴·굵기·밑줄·텍스트 등 다른 시각 단서가 함께 제공되어야 합니다.

"오른쪽 버튼을 누르세요", "둥근 아이콘을 클릭", "삐 소리가 나면" 처럼 모양·크기·위치·방향·색·소리에만 의존하는 안내가 있는지 확인하세요. 이런 지시는 텍스트 레이블 등 감각과 무관한 정보와 함께 제공되어야 합니다.

자동 도구가 판정하지 못한 규칙입니다. 아래 안내에 따라 직접 확인한 뒤 '판정 기입'으로 결과를 기록하세요.

/* 잘못된 예: 흰 배경에 연회색 텍스트 (2.3:1) */
color: #aaaaaa; background: #ffffff;

/* 올바른 예 (7.0:1) */
color: #595959; background: #ffffff;

페이지 진입 시 3초 이상 자동으로 재생되는 소리(배경음악, 동영상 소리)가 있는지 확인하세요. 자동 재생이 불가피하면 정지/음소거 수단을 콘텐츠 최상단에서 제공해야 합니다.

이웃한 콘텐츠 블록(본문과 배너, 메뉴와 본문 등)이 테두리·구분선·여백·배경색 차이 등으로 시각적으로 구별되는지 확인하세요. (KWCAG 고유 항목 — WCAG에는 직접 대응 기준이 없습니다.)

마우스 없이 Tab/Shift+Tab/Enter/Space/화살표 키만으로 모든 기능(메뉴, 슬라이더, 모달, 드래그 기능의 대체 수단 포함)을 사용할 수 있는지 확인하세요. 특정 요소에 초점이 갇혀 빠져나올 수 없는 경우(키보드 함정)가 없는지도 확인합니다.

자동 도구가 판정하지 못한 규칙입니다. 아래 안내에 따라 직접 확인한 뒤 '판정 기입'으로 결과를 기록하세요.

/* outline을 없앴다면 반드시 대체 표시 제공 */
a:focus-visible, button:focus-visible {
  outline: 3px solid #0b5d54;
  outline-offset: 2px;
}

자동 도구가 판정하지 못한 규칙입니다. 아래 안내에 따라 직접 확인한 뒤 '판정 기입'으로 결과를 기록하세요.

.icon-button { min-width: 24px; min-height: 24px; }
/* 시각 크기를 못 키우면 히트 영역만 확장 */
.icon-button { position: relative; }
.icon-button::after { content: ""; position: absolute; inset: -6px; }

단일 문자(예: 'S', '?')로 동작하는 단축키가 있다면, 끄기·재설정이 가능하거나 특정 요소에 초점이 있을 때만 동작하는지 확인하세요. 음성 입력 사용자가 의도치 않게 기능을 실행하는 것을 방지하기 위함입니다.

세션 만료, 자동 로그아웃, 시간 제한이 있는 기능(예약, 결제 등)이 있다면 사전에 알리고 연장·해제 수단을 제공하는지 확인하세요.

자동으로 움직이는 콘텐츠(캐러셀/슬라이드 배너, 흐르는 공지, 애니메이션)가 있다면 정지·이전·다음 컨트롤이 제공되는지 확인하세요. 특히 메인 비주얼 슬라이더는 정지 버튼이 필수입니다.

초당 3~50회 깜빡이거나 번쩍이는 콘텐츠(플래시 효과, 번개 효과 광고 등)가 있는지 확인하세요. 광과민성 발작을 유발할 수 있으므로 사용하지 않아야 합니다.

페이지 최상단에서 Tab을 눌렀을 때 '본문 바로가기' 링크가 나타나고, 실제로 본문으로 초점이 이동하는지 확인하세요. 링크 존재는 자동 검사되지만 실제 동작은 수동 확인이 필요합니다.

페이지 <title>이 페이지 내용을 구체적으로 설명하는지(사이트 전체가 동일 제목이면 위반), iframe에 title 속성이 있는지, 콘텐츠 블록에 적절한 제목(heading)이 있는지 확인하세요.

'여기', '더보기', '클릭' 처럼 목적지를 알 수 없는 링크 텍스트가 있는지 확인하세요. 링크 텍스트만 읽어도(또는 주변 문맥과 함께) 어디로 가는지 알 수 있어야 합니다.

전자출판문서(EPUB 등 웹 기반 전자책)에 적용되는 항목입니다. 페이지 구분자가 있는 경우 각 페이지 위치가 고정적으로 참조 가능한지 확인하세요. 일반 웹 페이지에는 해당하지 않는 경우가 많습니다.

핀치 줌, 두 손가락 스와이프, 경로 기반 제스처(드래그로 그리기 등)가 필요한 기능이 있다면, 한 손가락 탭/더블탭 등 단일 포인터로도 동일 기능을 수행할 수 있는지 확인하세요.

버튼 등을 누른 상태에서 포인터를 밖으로 이동해 떼면 실행이 취소되는지 확인하세요. 기능은 down 이벤트가 아니라 up 이벤트에서 실행되어야 합니다.

화면에 보이는 버튼·링크 텍스트가 접근 가능한 이름(aria-label 등)에 포함되는지 확인하세요. 음성 인식 사용자가 화면에 보이는 이름으로 컨트롤을 호출할 수 있어야 합니다.

기기 흔들기·기울이기 등 동작으로 실행되는 기능이 있다면, 버튼 등 일반적인 UI로도 동일 기능을 수행할 수 있고 동작 인식을 끌 수 있는지 확인하세요.

자동 도구가 판정하지 못한 규칙입니다. 아래 안내에 따라 직접 확인한 뒤 '판정 기입'으로 결과를 기록하세요.

<a href="…" target="_blank" rel="noopener">
  자료실<span class="sr-only"> (새 창 열림)</span>
</a>

고객센터 연락처, 챗봇, 도움말 링크 등 도움 정보가 여러 페이지에서 동일한 상대적 위치(예: 항상 푸터, 항상 우측 하단)에 일관되게 제공되는지 확인하세요.

CSS를 끄거나 스크린 리더로 읽었을 때 콘텐츠가 논리적 순서로 제공되는지 확인하세요. 시각적 배치(position, order 등)로만 순서를 만든 경우 실제 DOM 순서가 뒤섞여 있을 수 있습니다.

데이터 표에 caption 또는 요약이 제공되고 제목 셀(th)과 데이터 셀(td)이 구분되는지는 자동 검사되지만, 복잡한 표의 헤더 연결(scope, headers)이 의미상 올바른지는 스크린 리더로 셀을 탐색하며 확인하세요.

모든 입력 서식에 레이블이 연결되어 있는지는 자동 검사되지만, 레이블 내용이 입력 목적을 정확히 설명하는지, placeholder만으로 레이블을 대신하고 있지 않은지 확인하세요.

서식을 잘못 입력하고 제출해 보세요. 어떤 항목이 왜 잘못되었는지 텍스트로 알려주는지, 오류 위치로 초점이 이동하거나 쉽게 찾아갈 수 있는지, 정정 방법을 제안하는지 확인하세요.

로그인 등 인증 과정에서 왜곡된 문자 읽기, 퍼즐 풀기 같은 인지 기능 테스트에만 의존하는지 확인하세요. 붙여넣기 허용, 브라우저 자동완성 허용, 이메일 링크 인증 등 대체 수단이 제공되어야 합니다.

여러 단계로 이루어진 절차(회원가입, 주문 등)에서 같은 정보를 다시 입력하도록 요구하는지 확인하세요. 이전에 입력한 정보는 자동 입력되거나 선택 가능해야 합니다.

자동 도구가 판정하지 못한 규칙입니다. 아래 안내에 따라 직접 확인한 뒤 '판정 기입'으로 결과를 기록하세요.