반응형

2026/02/26 2

폼 에러 메시지/필수 표시 규칙 정리(검수 대응)

공공기관 검수 대응 가이드공공기관 고도화에서폼 영역은 접근성 QA의 핵심 체크 대상이다.특히 자주 지적되는 항목:필수 입력 표시가 시각적으로만 존재에러 메시지가 입력창과 연결되지 않음포커스 이동 미흡색상으로만 상태 구분placeholder를 label처럼 사용이번 글은실무에서 바로 적용 가능한 규칙 중심으로 정리한다. 1. 필수 입력 표시 규칙❌ 자주 틀리는 방식이름 * 문제:*가 시각적으로만 의미 있음스크린리더는 필수인지 모름✅ 올바른 방식 이름 * 핵심 포인트required 속성 사용aria-required="true" 명시별표는 aria-hidden 처리필수 안내 문구도 필요폼 상단에표시는 필수 입력 항목입니다. 같은 안내 문구를 제공하면 더 좋다.2. 에러 메시지 구조 규칙❌ 잘못된 구조 ..

테이블 접근성 구현 방법: caption과 scope 차이 및 올바른 사용법

공공기관 고도화 대응 정리공공기관 프로젝트에서테이블은 QA에서 가장 많이 걸리는 영역 중 하나다.특히 자주 지적되는 항목이:caption 누락scope 잘못 사용th/td 구조 오류의미 없는 table 사용이번 글에서는실무에서 바로 적용 가능한 기준으로 정리한다. 1. caption은 왜 필요한가?caption은 단순 제목이 아니다.스크린리더는테이블을 읽기 전에 caption을 먼저 읽는다.즉,“이 테이블이 무엇을 설명하는지”를 알려주는 장치다. ❌ 잘못된 예 이름 부서 → 스크린리더는“테이블 시작, 2열 10행” 이런 식으로만 읽는다. ✅ 올바른 예 직원 정보 목록 이름 부서 caption은 화면에 보여도 되고,숨겨도 된다 🔹 화면에 보이지..

반응형