사용자로부터 정보를 수집하기 위해 웹페이지를 개발할 때 팀 리더나 개발자는 아래와 같이 사이트의 시각 장애 방문자를 고려하지 않는 경우가 많습니다.
이는 거리 보조 입력뿐만 아니라 추가 정보가 필요할 수 있는 다른 유형의 입력에도 적용됩니다.
이것이 왜 중요한가요? 방문자가 새로운 잠재 고객이 레이블 없이 정보를 입력하려고 시도할 때 입력 내용에 대한 단서가 없기 때문입니다. 좌절감을 느끼고 양식을 작성하지 않고 떠날 수도 있습니다.
웹페이지를 만들 때 확실한 권장 사항은 접근성 도구를 지속적으로 사용하여 페이지가 WCAG AA를 준수하는지 확인하는 것입니다. Chrome, Firefox 및 Microsoft Edge용 Wave 접근성 도구를 확인해 보세요.
이를 스크린 리더 테스트와 결합하여 NVDA가 시각 장애가 있는 사용자 경험을 모방할 수 있는 무료 도구입니다.
간단한 해결책은 아래와 같이 입력에 aria-label 및 aria-describeby를 추가하는 것입니다.
Bootstrap 또는 Tailwind와 같이 사용되는 타사 라이브러리에 따라 또 다른 옵션은 아래와 같이 플로팅 라벨이 될 수 있습니다.
소스 코드
위 팁을 보여주는 프로젝트에는 몇 가지 추가 기능이 있습니다.
CSS 디버깅을 지원하는 JavaScript입니다. 아래 표시된 코드는 페이지에 간단한 스타일 시트를 추가하거나 제거합니다.
프로덕션의 경우 아래에 표시되며, 다른 환경의 경우 true를 전달하여 디버깅을 활성화합니다.
<script src="lib/payne-debugger/debugHelper.js"></script>
<script>
document.addEventListener('keydown', function (event) {
if (event.key === '1' && event.altKey && event.ctrlKey) {
$debugHelper.toggle();
}
});
</script>
위에 표시된 사용자 정의 H1 스타일은 wwwrootcssheaders.css에 있습니다
필드셋 및 범례 스타일은 wwwrootcsssite.css에 있습니다
입력을 라벨과 연결하지 않고 입력의 용도에 대한 정보를 제공하는 팁은 사소하거나 불편해 보일 수 있지만 시각 장애가 있는 방문자에게는 전혀 사소하지 않으며 방문자 손실이나 수입 손실로 이어질 수 있습니다. .
처음부터 페이지를 개발할 때 접근성을 고려하면 다시 돌아가 접근성 코드를 추가하는 것보다 비용이 적게 듭니다.
? 그리고 웹 애플리케이션이 주 또는 정부 기관용인 경우 2026년 4월까지 WCAG AA 인증을 받아야 합니다.
위 내용은 ASP.NET Core 연결되지 않은 입력 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!