학원 홈페이지의 버튼과 입력칸은 화면에 보이는 글자가 프로그램이 읽는 이름 안에 들어 있어야 음성으로 조작하는 방문자가 보이는 그대로 불러 누를 수 있습니다. W3C 기준이 말하는 범위와 학원 홈페이지 점검 순서를 정리했습니다.
학원 홈페이지의 버튼과 입력칸은 화면에 보이는 글자가 프로그램이 읽는 이름 안에 들어 있어야 음성으로 조작하는 방문자가 보이는 그대로 불러 누를 수 있습니다. 화면에는 '상담 신청'이라고 보이는데 코드 안의 이름이 '문의 양식 열기'로 되어 있다면, 음성 인식 프로그램으로 "상담 신청 누르기"라고 말한 학부모는 버튼을 누르지 못합니다.
보이는 글자와 프로그램이 읽는 이름은 따로 정해질 수 있습니다
W3C 웹 콘텐츠 접근성 지침(WCAG) 2.2의 성공 기준 2.5.3(수준 A)은 글자나 글자 이미지로 된 레이블이 있는 사용자 인터페이스 구성 요소라면, 그 이름이 화면에 보이는 글자를 포함해야 한다고 정합니다. 같은 기준은 레이블 글자를 이름의 앞부분에 두는 것을 모범 사례로 덧붙입니다.
W3C의 성공 기준 2.5.3 해설은 대부분의 컨트롤이 눈에 보이는 글자 레이블과 함께 프로그램이 읽는 이름, 곧 접근 가능한 이름을 가진다고 설명합니다. 음성 입력 사용자는 화면에 보이는 메뉴·링크·버튼의 글자를 말해서 이동하고 누르기 때문에 두 이름이 어긋나면 명령이 실패합니다. 해설은 보이는 글자와 다른 이름이 음성 입력 사용자가 모르는 사이에 실행되는 숨은 명령처럼 작동할 수 있다는 점과, 화면 낭독 프로그램을 쓰는 사람도 보이는 글자와 들리는 이름이 같을 때 더 이해하기 쉽다는 점도 짚습니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
어긋남은 대개 덧붙인 속성에서 생깁니다
해설에 따르면 레이블과 컨트롤을 정해진 방식으로 연결하면 보통 두 이름은 일치합니다. 문제는 작성자가 이름을 따로 덮어쓸 때입니다. aria-label과 aria-labelledby는 이름 계산에서 우선하기 때문에, 보이는 글자가 프로그램상 연결되어 있어도 그 글자를 덮어씁니다. 그래서 해설은 보이는 레이블이 이미 있다면 aria-label은 피하거나 신중히 쓰라고 권합니다. 화면 낭독 프로그램 사용자에게 덧붙이고 싶은 설명은 이름이 아니라 설명으로 계산되는 aria-describedby로 넣으면 음성 입력 사용자의 명령에는 영향을 주지 않습니다.
해설은 판단의 경계도 함께 설명합니다.
- 대문자·소문자와 대부분의 문장부호 차이는 따지지 않습니다. 보이는 글자가 '다음…'이고 이름이 '다음'이면 통과합니다.
- 괄호 안의 글자는 부가 설명으로 보고 이름에서 뺄 수 있습니다.
- 소제목, 안내 문장, 여러 입력칸을 묶는 그룹 제목은 보통 이 기준의 레이블로 보지 않습니다.
- 보이는 글자 레이블이 없는 구성 요소에는 이 기준이 적용되지 않습니다. 다만 이름 자체가 없는 컨트롤은 성공 기준 4.1.2를 어기고, 보이는 글자까지 있다면 이 기준도 함께 어깁니다.
- 입력칸 안의 예시 글자는 적절한 레이블 수단이 아니지만, 다른 글자가 없다면 사용자가 그 글자를 불러 볼 수 있다는 점에서 검토 대상이 될 수 있습니다.
학원 홈페이지에서 점검하는 순서
에듀지오의 운영 권장은 학부모가 자주 누르는 요소부터 이름표를 만드는 것입니다. '상담 신청', '수강 과정 보기', '시간표', '오시는 길' 버튼과 이름·연락처 입력칸을 적고, 각 요소마다 화면에 보이는 글자와 브라우저 개발자 도구의 접근성 정보에 나오는 이름을 한 줄에 나란히 적습니다. 이름이 보이는 글자를 포함하지 않거나 순서가 뒤바뀐 줄은 보이는 글자를 이름의 맨 앞에 두도록 고칩니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
모바일 화면에서만 따로 나타나는 고정 상담 버튼이나 아이콘 옆에 짧은 글자가 붙은 메뉴는 넓은 화면과 다른 코드로 만들어질 수 있으므로 화면 크기마다 다시 확인합니다. 이 글은 청주·충북 지역 학원을 포함한 일반적인 홈페이지 점검 방법이며 특정 학원 홈페이지를 진단한 결과가 아닙니다.