TL;DR: 구성 요소가 아무리 작더라도 구현하는 동안 항상 다양한 사용자와 그들의 능력을 고려해야 합니다. 언뜻 보기에 체크박스와 같은 입력 요소는 쉽게 고칠 수 있는 것처럼 보일 수 있습니다. 그러나 해당 요소에 액세스할 수 있는지 확인하려면 고려해야 할 몇 가지 사항이 있습니다.
이 시리즈에서는 올바른 입력 유형 사용 및 라벨 연결과 같은 기본 사항부터 시작하여 다양한 종류의 입력 요소에 대한 접근성을 높이는 방법을 설명합니다.
한 번 살펴보겠습니다.
HTML에서 입력 요소를 사용할 때 항상 해당 요소에 대해 올바른 입력 유형을 설정하고 싶습니다. 기본 입력 유형은 텍스트이며 다양한 경우에 작동할 수 있지만 최대한 구체적으로 입력하면 모든 사용자에게 도움이 되며 다양한 고유 기능도 함께 제공됩니다. <입력 유형="숫자"> 예를 들어 숫자 입력 필드를 정의하고 키보드 대신 모바일에서 숫자 패드를 열고 최소 및 최대 숫자를 사용하여 범위를 제한할 수 있습니다. <입력 유형="비밀번호"> 해당 입력을 마스크하여 사용자의 개인 정보를 보호합니다. 브라우저에 따라 날짜 선택기를 엽니다... 등등. 올바른 입력 유형을 선택함으로써 우리는 HTML의 특정 상속 기능을 사용할 수 있고 동시에 사용자 경험을 향상시킬 수 있어 삶을 더 쉽게 만들 수 있습니다.
사용 중인 입력 유형에 관계없이 입력 필드에 라벨을 연결해야 합니다. 일반적으로 이는
<label for="firstname">First name:</label> <input type="text" name="firstname"> <h3> aria-label vs. aria-labelledby </h3> <p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p> <h4> aria-label </h4> <p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br> </p> <pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>
입력 레이블 지정을 위해 다른 요소를 참조로 사용하는 경우 aria-labelledby가 유용합니다.
<div role="dialog"> <p>가능하다면 의미론적 HTML을 사용하여 입력 요소에 접근 가능한 이름을 제공하십시오. 이 특정한 경우에 불가능하다고 확인한 경우에만 aria 속성을 사용하도록 되돌리세요. </p> <p>의미 구조 사용, 올바른 입력 유형 추가 및 레이블 연결과 같은 기본 사항을 숙지하고 나면 비활성화된 입력 요소와 같이 입력 요소의 접근성을 높이는 다른 측면을 자세히 살펴볼 수 있습니다. 초점 스타일 및 색상 대비 및 예상되는 키보드 탐색. </p> <p><strong>자원:</strong></p>
위 내용은 접근 가능한 입력 요소 | 기본의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
