액세스 가능한 텍스트 상자

문제

많은 텍스트 상자가있는 HTML 페이지가 있습니다. 접근성 목적으로 레이블을 지정해야하지만 레이블이 보이기를 원하지 않습니까? 아니면 다른 디자인 대안이 있습니까?

올바른 솔루션이 없습니다

다른 팁

페이지에 텍스트를 넣고 스크린 리더 사용자 (예 : 높은 음수 텍스트-신디언트)가 액세스 할 수있는 동안 시각적 사용자에게 숨겨져있는 다양한 방법이 있습니다.

그러나 "접근성"은 "웹을 사용하는 데 아무런 문제가없는 사람들"과 "장님 인 사람들"사이의 경계가 아닙니다. 그룹에 적합한 사람들이 많이 있으며, 저자가 접근성이 볼 수없는 사람들이 콘텐츠를 이용할 수있게하는 것보다 더 쉽고 너무 쉽고 일반적입니다.

디스플레이 사용 : 아무도 나쁘지 않으며, 모든 레이블을 숨길 이유에 대한 쿼리를 지원합니다. 사용자가 사용하는 데 사용하는 태그가있을 수 있습니다. 그에 따라 레이블과 스타일.

여전히 레이블을 숨기고 싶다면 화면 오프 스크린을 배치하는 것이 좋습니다. 최근이 있습니다 456 Berea Street 블로그 에서이 요약.

레이블의 요점은 입력의 목적을 설명하는 것입니다. 레이블을 사용하지 않는 경우 시력이있는 사용자가 입력에 무엇을 넣을지 어떻게 알 수 있습니까?

시력이있는 사용자에게 시각적 단서를 제공하는 것은 보조 기술 사용자의 레이블이어야합니다.

워터 마킹 된 텍스트 상자는 어떻습니까?

CSS 시도 :

label {
    display: none;
}

이 스타일 시트를 "화면"매체에만 적용하십시오.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

언급했듯이 모든 입력 요소에 대한 가시 레이블을 갖는 것이 항상 바람직합니다. 이는 시력이없는 사용자와 비 가중 사용자 모두에게 도움이됩니다. 말하지만, 이것이 가능하지 않은 특정 시나리오가 있습니다. 이러한 상황에는 몇 가지 옵션이 있습니다.

첫 번째는 "Title"속성을 사용하는 것이며, 이는 시력이있는 사용자를위한 도구 팁을 표시 할 수있는 이점이 추가됩니다.

<input type="text" title="first name" />

다른 두 사람은 두 번째 옵션을 언급했는데, 여기에는 CSS를 사용하여 화면에서 레이블을 배치하는 것이 포함됩니다.

<label for="first_name" 
  style="position:absolute;left:-1000px;width:1px;overflow:hidden;" />
<input type="text" id="first_name" />

"display : none"을 사용하는 것과 달리 스크린 리더는 여전히 레이블을 읽습니다. 또한 CSS를 비활성화하기로 선택한 사용자는 레이블을 볼 수 있다는 점에서 우아합니다.

당신이 무엇을 하든지, 나는 확실히 추천합니다 시험 사본 다운로드 턱의 자유 과학 솔루션을 테스트합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow