A11Y 101: 양식 레이블 누락

양식으로 작업할 때 항상 레이블을 설명하는 양식 레이블을 사용하도록 선택해야 합니다.

그러나 많은 설계자들은 이러한 레이블이 부피가 커지기 때문에 현대 응용 프로그램에서 숨기고 싶어합니다.

레이블이 없는 양식의 좋은 예는 다음과 같습니다.

검색 필드

충분히 명확한 구독 양식

두 예제에서 공통적으로 볼 수 있는 것은 하나의 필드와 버튼이 있는 양식입니다.
종종 양식이 무엇을 위한 것인지, 사용자에게 기대되는 것이 무엇인지 충분히 명확할 수 있습니다.

내 예제에서 시각적 독자를 위해 자리 표시자를 설명합니다. 그러나 시각 장애인을 위한 이 양식이 무엇인지 명확하지 않을 수 있습니다.

이 양식에 액세스할 수 있도록 하려면 보이지 않는 레이블을 사용하여 필드를 설명해야 합니다. 우리가 사용할 수 있는 세 가지 옵션이 있습니다.

숨겨진 레이블 요소

이것은 양식 필드를 설명하기 위해 레이블을 추가하는 가장 의미론적인 방법입니다.

양식 필드에 일반 레이블을 추가하지만 CSS를 사용하여 브라우저에서 숨기도록 설정했습니다.
스크린 리더는 여전히 이 방식으로 읽을 수 있습니다.

<label class="hidden" for="search">Search</label>
<input type="text" id="search" />

스크린 리더를 위해 요소를 숨기려면 특정 CSS를 사용해야 합니다. 다시 여러 옵션이 있으므로 다음 기사에서 좀 더 자세히 작성하겠습니다.

제목 속성

스크린 리더가 입력 필드의 용도를 인식하게 하는 또 다른 방법은 입력 필드에 제목 속성을 추가하는 것입니다.

그러나 이것은 시각적 사용자에게 이 제목 속성을 보여주는 단점이 있습니다.

사용 사례에 허용되는지 여부는 귀하에게 달려 있습니다.

<input id="search" type="text" title="Search" />

Aria 레이블 속성

마지막 방법은 aria-label를 사용하는 것입니다. 제목 방법과 동일하게 작동하지만 시각적 사용자에게는 표시되지 않습니다.

이것은 숨겨진 스타일을 건드리지 않고 설명 텍스트를 추가하는 가장 안전한 방법입니다.

<input id="search" type="text" aria-label="Search" />

결론

액세스할 수 있는 레이블이 없는 양식 필드를 만드는 세 가지 방법이 있으며 세 가지 모두 사용 사례가 있으며 어느 것이 가장 적합한지 결정하는 것은 개발자의 몫입니다.

아무도 볼 수 없는 요소를 추가하는 데 가장 방해가 되지 않기 때문에 aria-label 접근 방식을 좋아하지만 숨겨진 레이블도 마찬가지로 좋습니다.
다른 선택의 여지가 없는 경우에만 제목에 의지하는 것이 좋습니다.

Note: You should only use one of the three methods, don't combine them as screen readers will read your information twice.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나