단체 후원 안내에서 마우스를 올리거나 키보드로 이동할 때 나타나는 도움말은 W3C 기준의 예외에 해당하지 않으면 닫을 수 있어야 하고, 마우스로 나타났다면 그 위로 포인터를 옮겨도 사라지지 않아야 합니다.
단체 후원 안내에서 마우스를 올리거나 키보드로 이동할 때 나타나는 도움말은 W3C 기준의 예외에 해당하지 않으면 닫을 수 있어야 하고, 마우스로 나타났다면 그 위로 포인터를 옮겨도 사라지지 않아야 합니다. 정기후원 출금일이나 기부금 영수증처럼 후원자가 결정 전에 읽어야 하는 설명이 말풍선에 들어 있는 경우가 많기 때문입니다.
말풍선이 어떤 정보를 담는지 먼저 보세요
W3C의 성공 기준 1.4.13 호버 또는 포커스 시 콘텐츠 해설은 포인터를 올리거나 키보드 포커스를 옮겼을 때 추가 내용이 나타났다 사라지는 경우를 다룹니다. 직접 만든 도움말 말풍선, 하위 메뉴, 비모달 팝업이 그 예입니다.
해설에 따르면 화면 확대 프로그램 사용자는 보이는 영역이 크게 줄어들고, 확대된 화면이 마우스나 포커스를 따라 움직입니다. 이때 갑자기 나타난 말풍선이 본문을 가리거나, 읽으려고 포인터를 옮기는 순간 사라지면 내용을 끝까지 볼 수 없습니다. 후원 안내 페이지의 물음표 아이콘마다 어떤 설명이 들어 있는지 목록으로 정리해 두면 점검이 쉬워집니다.
닫기, 머무르기, 유지를 하나씩 확인하세요
W3C 해설은 세 가지 조건을 제시합니다. 첫째, 포인터나 포커스를 옮기지 않고도 추가 내용을 닫을 방법이 있어야 합니다. 다만 추가 내용이 입력 오류를 알리는 경우나 다른 내용을 가리거나 대체하지 않는 경우는 이 닫기 조건의 예외입니다. 해설의 예시는 Escape 키로 말풍선을 닫는 방식입니다. 둘째, 포인터로 나타난 내용이라면 그 내용 위로 포인터를 옮겨도 사라지지 않아야 합니다. 셋째, 사용자가 원래 위치를 떠나거나 직접 닫거나 내용이 더 이상 유효하지 않을 때까지 계속 보여야 합니다.
AI로 생성한 개념 이미지. 실제 단체 사진이 아닙니다.
나누지오가 권하는 점검 순서는 이렇습니다. 마우스를 아이콘에 올린 뒤 말풍선 위로 천천히 옮겨 보고, 말풍선이 본문을 가린다면 그대로 Escape 키를 눌러 닫히는지 확인합니다. 빈 공간에만 뜨는 말풍선은 W3C 기준상 닫기 예외일 수 있지만, 나누지오는 운영 권장으로 닫는 방법을 두기를 권합니다. 다음으로 Tab 키로 아이콘에 이동해 같은 내용이 나타나는지, 화면을 확대한 상태에서도 끝까지 읽을 수 있는지 봅니다. 해설은 HTML title 속성으로 만든 브라우저 기본 도움말처럼 표시를 브라우저가 정하는 경우는 예외로 설명하므로, 직접 만든 말풍선인지도 개발 담당자에게 확인해 두세요.
중요한 안내는 말풍선 밖에도 남기세요
물품 나눔 활동을 소개하는 단체도 정기후원 출금일과 영수증 안내는 사진이나 도움말에만 맡기지 말고 본문에서 바로 읽을 수 있게 적어 두세요. 활동 사진은 무슨 일을 하는 단체인지 보완하고, 후원자가 결정하는 데 필요한 조건은 글이 설명하는 구성이 좋습니다.
AI로 생성한 개념 이미지. 실제 단체 사진이 아닙니다. 물품 나눔은 단체 활동의 한 예이며, 이 그림이 특정 단체의 정기후원금 사용처를 증명하지는 않습니다.
말풍선은 보조 설명에 알맞습니다. 정기후원 해지 방법이나 영수증 발급에 필요한 정보처럼 후원 결정에 영향을 주는 내용은 본문에 글로 적어 두는 편이 모든 방문자에게 안전합니다. 청주·충북 비영리단체와 기관을 포함한 일반적인 운영 점검이며, 특정 단체 홈페이지를 진단한 결과는 아닙니다.