도움말 텍스트와 필수 필드 알리기
힌트와 필수 입력 정보를 보조 기술에 전달하세요.
도움말 텍스트와 필수 필드 알리기은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
레이블은 시작일 뿐입니다
필드에는 이름 이상의 정보가 필요한 경우가 많습니다. 힌트와 요구 사항은 시각이 있는 사용자뿐 아니라 보조 기술에도 전달되어야 합니다. 📝
aria-describedby로 힌트를 연결하세요
도움말을 요소에 넣은 다음 입력의 aria-describedby가 해당 요소의 id를 가리키게 하세요. 그러면 레이블 다음에 힌트가 읽힙니다.
<input id="pw" aria-describedby="pwhelp">
<p id="pwhelp">At least 8 characters</p>이름 다음에 설명
스크린 리더는 먼저 레이블을 읽고, 이어서 설명 대상 텍스트를 읽습니다. 사용자는 이름과 힌트를 자연스러운 순서로 듣게 됩니다.
여러 ID를 참조하세요
aria-describedby에는 공백으로 구분한 여러 id를 나열할 수 있습니다. 같은 필드에 힌트와 오류 메시지를 함께 연결하세요.
<input aria-describedby="hint err">필수 입력 표시
필수 속성을 추가하면 브라우저가 입력 여부를 확인하고, 보조 기술에도 해당 필드를 작성해야 한다고 알려 줍니다.
<input id="name" required>자동으로 안내됩니다
필수 속성이 있으면 포커스가 이동할 때 스크린 리더가 필수 입력이라고 말합니다. 추가 ARIA 없이도 자동으로 처리됩니다.
별표의 함정
빨간 별표만으로는 의미가 전달되지 않고 쉽게 놓칠 수 있습니다. 필수 속성이나 화면에 보이는 필수 입력 문구를 함께 사용하세요.
별표를 설명하세요
별표를 사용한다면 양식 가까이에 별표가 필수 필드를 나타낸다는 범례를 추가하세요. 기호를 설명 없이 남겨 두지 마세요.
aria-required를 대안으로 사용하기
기본 유효성 검사를 지원하지 않는 사용자 지정 컨트롤에서는 aria-required를 true로 설정해 스크린 리더에 같은 상태를 전달할 수 있습니다.
<div role="textbox" aria-required="true"></div>대신 선택 사항을 표시하세요
대부분의 필드가 필수라면 몇 안 되는 선택 사항 필드를 표시하세요. 더 깔끔하고 방식도 명확하게 유지됩니다.
도움말을 계속 표시하세요
도움말은 스크린 리더뿐 아니라 화면에도 표시하세요. 누구나 실수하기 전에 규칙을 확인할 수 있어 도움이 됩니다.
빠른 확인
스크린 리더가 필드의 도움말을 읽도록 연결하려면 어떻게 해야 하나요?
정리
aria-describedby로 힌트를 연결하고, 반드시 입력해야 하는 필드에는 필수 속성을 표시하세요. 이제 모든 사용자가 이름, 도움말, 규칙을 들을 수 있습니다. ✅
자주 묻는 질문
“도움말 텍스트와 필수 필드 알리기” 강의는 무료인가요?
네 — “도움말 텍스트와 필수 필드 알리기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“도움말 텍스트와 필수 필드 알리기”에서 뭘 배우나요?
힌트와 필수 입력 정보를 보조 기술에 전달하세요. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“도움말 텍스트와 필수 필드 알리기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.