레이블 없이 액세스 가능한 검색 창을 만드는 방법

레이블이 없는 검색 창을 만들고 싶다면 이것이 바로 이동입니다.

<form role='search'>
  <label for="searchBar" class="sr-only">Search Term</label>
  <input id="searchBar" type="text" placeholder="Search Term">
  <button>Search</button>
</form>

일부 추가된 CSS로

.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

우리의 CSS는 스크린 리더를 방해하지 않고 시각적으로 간단한 검색 입력을 남길 수 있도록 화면에서 레이블을 설정합니다. 높이와 너비가 어떻게 각각 1px로 설정되어 있는지 확인하십시오. 각각을 0px로 설정하면 스크린 리더가 완전히 건너뛰므로 1px로 유지하십시오. 오버플로가 숨겨져 있으므로 긴 레이블 제목을 작성하면 화면에 표시되지 않습니다. 자리 표시자를 사용하면 시맨틱 html과 함께 표준으로 제공되는 모든 접근성을 유지하면서 시력이 좋은 사용자에게 입력 기능을 전달할 수 있습니다.

다음은 동일한 옵션이지만 모든 React 사용자를 위해 JSX로 작성되었습니다.

<form role='search'>
  <label htmlFor="s" className="sr-only">Search Term</label>
  <input id="s" type="text" name="search" placeholder="Search Term"/>
  <button>Search</button>
</form>

코드는 React에서 기능적으로 동일하지만 htmlFor=”s”의 사용에 유의하십시오. for는 class와 마찬가지로 JSX에서 예약된 이름이므로 htmlFor를 사용해야 합니다.

두 번째 옵션:

<form role='search'>
  <input id="searchBar" type="text" placeholder="Search Term"   title="Search Term">
  <button>Search</button>
</form>

제목 속성은 레이블이 없을 때 레이블 역할을 합니다. 원하지 않을 수도 있지만 입력에 잠시 마우스를 올려 놓으면 도구 설명이 표시됩니다.

마지막 옵션:

<form role='search'>
  <input id="searchBar" type="text" placeholder="Search Term" aria-label="Search Term">
  <button>Search</button>
</form>

aria-label을 사용하면 작업이 완료됩니다.

여전히 가장 좋은 방법은 입력에 레이블을 지정하고 "for"를 사용하여 레이블을 입력 ID에 연결하는 것입니다. 간단하고 지루할 수도 있지만 모두에게 효과가 있습니다.

<form role='search'>
  <label for="searchBar" >Search Term</label>
  <input id="searchBar" type="text">
  <button>Search</button>
</form>

레이블은 컨트롤 입력을 형성하기 위해 키보드 포커스를 설정하는 데 도움이 되므로 눈이 먼 사용자가 레이블과 입력 자체를 클릭할 수 있다는 점에 유의하는 것이 중요합니다. 또한 범용 브라우저 및 스크린 리더를 지원합니다.

물론 이를 수행하는 많은 방법과 아래에 나열된 훨씬 더 나은 문서가 있지만 이러한 핵심 개념은 검색 창과 검색 양식에 접근성에 필요한 기본 사항을 제공합니다.

이 블로그는 접근성에 대한 시리즈의 첫 번째 블로그로, 접근성을 염두에 두고 공통 구성 요소를 구축하기 위한 출발점을 제공하기 위해 노력합니다.

자원

https://webaim.org/techniques/forms/advanced

http://web-accessibility.carnegiemuseums.org/code/search/

https://designsystem.digital.gov/components/form-controls/