홈페이지 접근성 검수: 키보드·텍스트·입력부터 확인하기

키보드만으로 주요 행동을 해봅니다

Tab 키로 메뉴, 링크와 입력 필드를 순서대로 이동해보세요. 현재 위치가 보이는지, 메뉴를 열고 닫을 수 있는지, 한 영역에 갇히지 않는지 확인합니다. 마우스를 올려야만 나타나는 기능에는 다른 사용 방법도 필요합니다.

이미지가 전달하는 정보를 구분합니다

제품 정보나 절차를 설명하는 이미지에는 이해에 필요한 대체 텍스트를 제공합니다. 단순 장식은 읽어야 할 정보와 구분합니다. 핵심 설명을 이미지 속 작은 글자로만 넣으면 확대와 보조기기 사용이 어려워질 수 있습니다.

텍스트와 상태를 색 하나로 표현하지 않습니다

본문 글자를 배경과 구분할 수 있는지 확인하고 크기를 키웠을 때 내용이 겹치지 않는지 보세요. 오류를 붉은 테두리로만 표시하는 대신 어떤 항목을 어떻게 수정해야 하는지 글로 안내합니다.

입력 필드와 동의를 이해할 수 있어야 합니다

입력 필드는 이름을 설명하는 라벨을 갖고 필수와 선택 항목을 구분합니다. 잘못 입력했을 때 해당 필드로 돌아가 수정할 수 있는지 확인하세요. 체크박스와 링크는 키보드로도 선택할 수 있어야 합니다.

최종 확인 범위와 전문 평가를 구분합니다

• 메뉴, 문의, FAQ를 키보드로 이용
• 포커스 위치와 오류 메시지 확인
• 주요 이미지의 텍스트 설명 확인
• 확대, 모바일 화면에서 정보 손실 확인
• 자동 검사 결과를 실제 동작과 함께 검토

키보드로 실제 업무 흐름을 따라갑니다

마우스를 사용하지 않고 Tab 키로 메뉴와 링크를 이동한 뒤 Enter로 실행해보세요. 펼쳐지는 메뉴 안으로 들어갈 수 있는지, 닫은 뒤 포커스가 적절한 위치로 돌아오는지 확인합니다. 초점 표시가 없어 현재 위치를 알 수 없다면 시각적으로 예뻐도 사용하기 어려울 수 있습니다.

닫힌 메뉴 안에 키보드 선택 위치가 남거나 메뉴에 갇히는 상황도 시험하세요. 휴대폰 화면과 확대 상태에서 내용이 잘리지 않는지 함께 확인합니다. 이 최종 확인은 기본 사용성을 점검하는 절차이며 전체 접근성 표준 준수나 인증을 대신하지 않습니다.

이미지 설명은 목적에 맞춰 작성합니다

제품 사진은 제품을 구분하는 데 필요한 내용을 설명하고 기능을 가진 이미지 링크는 이동 목적을 알려줍니다. 장식 이미지는 반복해서 읽히지 않도록 처리할 수 있습니다. 이미지 안에만 가격과 안내가 있다면 해당 정보를 본문 텍스트로 제공하는 방법을 검토하세요.

아이콘만 있는 버튼에는 이름이 필요합니다. “화살표”보다 “본문 처음으로 이동”처럼 실제 기능을 설명하면 사용자가 행동을 이해하기 쉽습니다. 텍스트와 배경 대비, 작은 버튼의 조작 가능성도 실제 화면에서 확인하며 디자인 색상만 보고 준수를 단정하지 않습니다.

제작 범위에 접근성 최종 확인을 넣습니다

어떤 페이지와 동작을 시험할지 정하고 발견한 문제를 위치, 재현 순서, 기대 동작으로 기록합니다. 예약이나 회원 기능처럼 입력 과정이 있다면 오류 표시와 수정 방법도 확인하세요. 자동 검사 도구는 보조 수단이며 실제 키보드와 보조기기 최종 확인의 필요성을 구분합니다.

공개 전 최종 확인뿐 아니라 이후 사진, 문구, 페이지를 추가할 때도 기본 규칙을 유지해야 합니다. 운영 문서에 제목 계층, 이미지 설명과 링크 이름 작성 방식을 남겨두면 도움이 됩니다. 법적 의무나 인증이 필요한 사업은 별도 기준과 전문 최종 확인을 확인하세요.