자리 표시자 속성을 사용하지 마십시오

HTML5 사양의 일부로 도입된 placeholder 속성은 "컨트롤에 값이 없을 때 데이터 입력을 돕기 위한 짧은 힌트(단어 또는 짧은 구문)를 나타냅니다. 힌트는 샘플 값이거나 예상 형식에 대한 간략한 설명일 수 있습니다."

겉보기에 간단해 보이는 이 속성에는 약속한 것을 이행하지 못하게 하는 놀라운 양의 문제가 포함되어 있습니다. 사용을 중단하도록 설득할 수 있기를 바랍니다.

기술적으로 정확

입력은 거의 모든 전자 상거래가 통과해야 하는 관문입니다. 디자인에서 공감의 위치에 대한 감정과 상관없이 사용할 수 없는 입력은 테이블에 돈을 남깁니다.

자리 표시자 속성의 존재는 자동화된 접근성 검사 소프트웨어에 의해 플래그가 지정되지 않습니다. 그러나 이것이 반드시 사용 가능한 것은 아닙니다. 궁극적으로 접근성은 표준이 아니라 사람에 관한 것이므로 체크리스트를 실행하는 것 이상의 측면에서 인터페이스에 대해 생각하는 것이 중요합니다.

수정, 포괄적인 디자인, 보편적인 액세스 등 무엇이든 호출합니다. 이 모든 철학의 정신은 모든 사람이 사용할 수 있는 것을 만드는 것으로 귀결됩니다. 이 렌즈를 통해 볼 때 placeholder 단순히 유지되지 않습니다.

문제

번역

Chrome과 같은 자동 번역 기능이 있는 브라우저는 현재 페이지 번역 요청이 시작될 때 속성을 건너뜁니다. 업데이트된 값이 기본 페이지 논리 또는 구조를 손상시킬 수 있으므로 많은 속성의 경우 이는 바람직한 동작입니다.

브라우저에서 건너뛴 속성 중 하나는 placeholder 입니다. 이 때문에 placeholder 콘텐츠는 번역되지 않고 원래 작성된 언어로 유지됩니다.

사람이 페이지 번역을 요청하는 경우 표시되는 모든 페이지 콘텐츠가 업데이트될 것으로 예상됩니다. 자리 표시자는 중요한 입력 형식 지정 지침을 제공하는 데 자주 사용되거나 보다 적절한 label 요소 대신 사용됩니다(자세한 내용은 잠시 후). 이 내용이 번역된 페이지의 나머지 부분과 함께 업데이트되지 않으면 언어에 익숙하지 않은 사람이 입력을 성공적으로 이해하고 조작하지 못할 가능성이 높습니다.

이것은 속성을 사용하지 않는 충분한 이유가 됩니다.

번역 주제에 대해 이야기하는 동안 위치가 언어 선호도와 같지 않다는 점도 지적할 가치가 있습니다. 많은 사람들이 (VPN은 말할 것도 없고) 브라우저의 IP 주소에 보고된 국가의 공식 언어가 아닌 언어를 사용하도록 장치를 설정하고 있으며 우리는 이를 존중해야 합니다. 콘텐츠를 의미론적으로 설명해야 합니다. 이웃이 고마워할 것입니다!

상호 운용성

상호 운용성은 서로 다른 시스템이 정보를 교환하고 이해하도록 하는 관행입니다. 이것은 인터넷과 보조 기술의 기본 부분입니다.

콘텐츠를 의미론적으로 설명하면 콘텐츠가 상호 운용 가능합니다. 상호 운용 가능한 input 은 label 요소를 프로그래밍 방식으로 연결하여 생성됩니다. 레이블은 입력 필드의 목적을 설명하여 양식을 작성하는 사람에게 조치를 취할 수 있는 프롬프트를 제공합니다. label 을 input 과 연결하는 한 가지 방법은 for 속성을 입력의 id 와 일치하는 값과 함께 사용하는 것입니다.

/ id 페어링이 없으면 보조 기술은 입력이 무엇을 for 것인지 결정할 수 없습니다. 프로그래밍 방식 연결은 화면 판독기 또는 음성 인식과 같은 소프트웨어에서 활용할 수 있는 API 후크를 제공합니다. 이것이 없으면 이 특수 소프트웨어에 의존하는 사람들은 입력을 읽거나 조작할 수 없습니다.

내가 이것을 언급하는 이유는 placeholder 자가 종종 label 요소 대신 사용되기 때문입니다. 개인적으로 그 관행에 당혹스러웠지만 디자인 커뮤니티에서 주목을 받은 것 같습니다. 인기에 대한 가장 좋은 추측은 디자이너 캣닢처럼 작동하는 다른 레이블이 없는 입력 필드 옆에 배치될 때 생성되는 기하학적으로 정확한 그리드 효과입니다.

이 현상의 가까운 사촌인 부동 레이블 효과는 종종 label 대신 자리 표시자 속성을 사용합니다.

지적할 가치가 있는 깔끔한 점은 레이블이 프로그래밍 방식으로 입력과 연결된 경우 레이블 텍스트를 클릭하거나 탭하면 입력에 초점이 맞춰진다는 것입니다. 이 작은 트릭은 입력과 상호 작용할 수 있는 추가 영역을 제공하므로 운동 제어 문제가 있는 사람들에게 도움이 될 수 있습니다. 부동 레이블과 마찬가지로 레이블 역할을 하는 자리 표시자는 그렇게 할 수 없습니다.

인식

2016년 미국 인구 조사(United States Census)에는 인지 장애가 있다고 보고한 사람이 거의 1,500만 명에 달합니다. 이는 자가 보고를 선택한 개인만 계산한 것입니다. 이것으로부터 외삽하면 인지적 접근성 문제가 전 세계 인구의 상당 부분에 영향을 미친다고 가정할 수 있습니다.

자가 보고는 자신이 인지적 접근성 조건이 있다는 사실을 모르거나 편안하게 느낄 수 있다는 점에서 언급할 가치가 있습니다. 불행히도 이러한 종류의 정보를 공개하는 것은 직업 및 주택 전망과 같은 일에 종종 영향을 미치기 때문에 여전히 많은 낙인이 있습니다.

인지는 상황에 따라 억제될 수 있으며, 이는 당신에게 매우 잘 일어날 수 있음을 의미합니다. 멀티태스킹, 수면 부족, 스트레스, 약물 남용, 우울증 등의 영향을 받을 수 있습니다. 나는 여기에서 약간 지루할 수 있지만 대부분의 사무직에서 볼 수 있는 조건과 매우 흡사합니다.

상기하다

인지 문제의 우산은 단기 기억 상실, 외상성 뇌 손상 및 주의력 결핍 과잉 행동 장애와 같은 상태를 다룹니다. 그것들은 모두 정보를 기억하는 개인의 능력에 영향을 줄 수 있습니다.

사람이 입력에 정보를 입력하면 해당 자리 표시자 내용이 사라집니다. 복원하는 유일한 방법은 입력한 정보를 제거하는 것입니다. 이것은 입력을 채우려는 사람이 그 언어와 상호작용하는 즉시 안내 언어가 제거되는 경험을 만듭니다. 좋지 않음!

정보를 회상하는 능력이 억제되면 이러한 사라지는 규칙을 따르는 것이 성가시게 됩니다. 충족해야 하는 복잡한 요구 사항(예: 새 암호 생성)이 있는 입력의 경우 성가심을 넘어 극복하기 어려운 장벽이 됩니다.

기술적으로 정교한 사람들은 입력된 정보를 잘라내고 자리 표시자 콘텐츠를 검토하여 기억을 새로 고친 다음 편집을 위해 다시 붙여넣는 것과 같은 영리한 트릭을 배웠을 수 있지만 기술에 익숙하지 않은 사람들은 도움말 콘텐츠가 왜 필요한지 이해하지 못할 수 있습니다. 사라지거나 되돌리는 방법.

디지털 리터러시

점점 더 많은 세계 인구가 온라인에 접속하고 있음을 고려할 때, 책임감 있는 디자이너와 개발자로서 이러한 사람들을 환영한다고 느끼게 만드는 책임은 우리에게 있습니다. 인터넷(또는 인트라넷!)의 작은 구석은 온라인에서의 첫 번째 경험 중 하나일 수 있습니다. 최종 사용자가 "그냥 알 것이다"는 단순한 오만함이라는 가정하에 말입니다.

미국에 기반을 둔 독자들에게 새롭다는 것이 낯선 것을 의미하지는 않을 수 있음을 부드럽게 상기시켜줍니다. 나이든 미국인들의 접근이 증가하고 있습니다. 디지털 리터러시(digital literacy)는 시간이 지남에 따라 노년층 사이에서 더 보편화될 것이지만 접근성 문제도 마찬가지일 것입니다.

이전에 본 적이 없는 사람에게는 자리 표시자 텍스트가 입력된 콘텐츠처럼 보일 수 있으므로 입력을 건너뛸 수 있습니다. 필수 필드인 경우 양식 제출은 오류가 무엇인지 또는 수정 방법을 이해하지 못할 수 있는 실망스러운 경험을 만듭니다. 필수 필드가 아닌 경우 양식에서 잠재적으로 가치 있는 2차 정보를 수집하지 못하는 불필요한 위험이 있습니다.

공익 사업

자리 표시자 도움말 콘텐츠는 정적 텍스트 문자열로 제한되며 항상 메시지를 전달하는 데 충분하지 않을 수 있습니다. 추가 스타일을 적용하거나 설명 마크업, 속성, 이미지 및 아이콘을 포함해야 할 수 있습니다.

이것은 성숙한 디자인 시스템에서 특히 유용합니다. 텍스트 문자열을 입력 요소 외부로 이동하여 생성된 추가 스타일 옵션은 시스템의 디자인 토큰과 이를 사용하는 데 따른 모든 이점을 활용할 수 있음을 의미합니다.

자리 표시자 텍스트의 길이도 포함된 입력의 너비로 제한됩니다. 반응형 모바일 우선 환경에서는 중요한 정보가 잘릴 가능성이 매우 높습니다.

비전

색상 대비

자리 표시자 콘텐츠에 대한 주요 브라우저의 기본 스타일은 밝은 회색을 사용하여 제안임을 시각적으로 전달합니다. 많은 사용자 지정 입력 디자인은 입력 콘텐츠의 색상을 가져와 밝게 하여 이 규칙을 따릅니다.

불행히도 이 기술은 색상 대비 문제와 충돌할 가능성이 있습니다. 색상 대비는 텍스트의 밝기와 배경 색상 값을 비교하여 결정되는 비율입니다. 이 경우 입력 배경 위에 있는 자리 표시자 텍스트의 색상입니다.

자리 표시자 콘텐츠의 명암비가 너무 낮아서 인지할 수 없는 경우 양식을 성공적으로 작성하는 데 중요한 정보가 저시력 상태의 사람들에게 표시되지 않을 수 있음을 의미합니다. 가장 일반적인 입력 글꼴 크기 조정의 경우 비율은 4.5:1입니다.

모든 접근성 문제와 마찬가지로 저시력 상태는 영구적이거나 일시적이거나 생물학적 또는 환경적이거나 복합적일 수 있습니다. 생물학적 장애에는 원시, 색맹, 동공 확장 및 백내장과 같은 상태가 포함됩니다. 환경 조건에는 한낮의 태양의 눈부심, 배터리 절약형 낮은 밝기 설정, 개인 정보 보호 화면, 마지막 전화 통화로 화면에 남은 기름기 및 화장과 같은 상황이 포함됩니다.

이 비율은 내가 임의로 다른 사람에게 강요하려는 어떤 개인적인 미적 취향이 아닙니다. 이는 능력이나 상황에 관계없이 가능한 한 많은 사람들이 디지털 기술을 운영할 수 있도록 하기 위해 공들여 개발한 일련의 규칙의 일부입니다. 이러한 규칙을 의식적으로 무시하는 것은 배제를 실행하는 데 공모하는 것입니다.

여기에 문제가 있습니다. 플레이스홀더 속성을 포함시키려고 할 때 업데이트된 고대비 플레이스홀더 콘텐츠 색상은 디지털 지식이 더 많은 사람들이 입력한 입력으로 해석될 만큼 충분히 어두워질 수 있습니다. 이것은 문제를 인지적 우려의 영역으로 되돌려 놓습니다.

고대비 모드

Windows 운영 체제에는 고대비 모드라는 기능이 포함되어 있습니다. 활성화되면 제한된 수의 색상 옵션을 사용하는 특수 고대비 팔레트의 인터페이스 요소에 새 색상을 할당합니다. 다음은 다음과 같은 예입니다.

고대비 모드에서 placeholder 콘텐츠에는 고대비 색상 중 하나가 할당되어 미리 채워진 정보처럼 보입니다. 앞서 논의한 바와 같이, 이것은 입력에 입력된 정보가 필요할 수 있다는 것을 사람들이 이해하지 못하게 할 수 있습니다.

자리 표시자를 더 쉽게 이해할 수 있도록 고대비 모드에서 스타일을 업데이트할 수 있는지 궁금할 수 있습니다. 미디어 쿼리에서 고대비 모드를 대상으로 지정할 수 있지만 그렇게 하지 않기를 바랍니다. 프론트 엔드 개발자 Kitty Giraudel은 다음과 같이 말했습니다.

“고대비 모드는 더 이상 디자인이 아니라 엄격한 사용성에 관한 것입니다. 색상 미학이 아니라 최고의 가독성을 목표로 해야 합니다.”

고대비 모드에 의존하는 사람들은 예측 가능성 때문에 사용합니다. 콘텐츠 표시 방식을 과도하게 변경하면 컴퓨터를 안정적으로 사용할 수 있는 유일한 방법을 방해할 수 있습니다. 비 고대비 모드 처리처럼 보이도록 자리 표시자 콘텐츠의 색상을 밝게 하는 경우 인식할 수 없게 만드는 매우 실질적인 위험이 있습니다.

솔루션

요약하자면 placeholder 속성은 다음과 같습니다.

• 자동 번역할 수 없습니다.
• 종종 레이블 대신 사용되어 보조 기술을 차단합니다.
• 콘텐츠가 입력될 때 중요한 정보를 숨길 수 있습니다.
• 너무 밝아서 읽을 수 없습니다.
• 제한된 스타일 옵션이 있습니다.
• 미리 채워진 정보처럼 보일 수 있으며 건너뛸 수 있습니다.

에쉬. 그건 좋지 않아. 그래서 우리는 그것에 대해 무엇을 할 수 있습니까?

설계

자리 표시자 콘텐츠를 입력 위의 레이블 아래로 이동합니다.

이 접근 방식:

• 시각적 및 구조적 계층 구조를 전달합니다.
  • 이 입력이 무엇을 위한 것인지,
  • 입력을 성공적으로 사용하기 위해 알아야 할 사항 및
  • 입력 자체.
• 번역할 수 있습니다.
• 미리 채워진 정보처럼 보이지 않습니다.
• 저시력 상황에서 볼 수 있습니다.
• 입력에 내용이 입력되어도 사라지지 않습니다.
• 시맨틱 마크업을 포함할 수 있고 CSS를 통해 스타일을 지정할 수 있습니다.

또한 소프트웨어 키보드가 있는 장치에서 입력이 활성화되면 도움말 콘텐츠가 계속 표시됩니다. 입력 아래에 배치하면 화상 키보드가 장치 뷰포트 하단에 나타날 때 내용이 가릴 수 있습니다.

개발

설계된 예제를 코드로 변환하는 방법은 다음과 같습니다.

 <div class="input-wrapper"> <label for="employee-id"> Your employee ID number </label> <p class="input-hint"> Can be found on your employee intranet profile. Example: <samp>a1234567-89</samp>. </p> <input name="id-number" type="text" /> </div>

이것은 기존의 접근 가능한 for / id 속성 쌍에서 크게 벗어나지 않습니다. label 요소는 "employee-id"의 id 선언을 통해 프로그래밍 방식으로 input 과 연결됩니다. label 과 input 요소 사이에 배치된 p 요소는 placeholder 속성을 대체하는 역할을 합니다.

"그래서"라고 궁금해 할 수 있습니다. " label 요소에 모든 자리 표시자 대체 콘텐츠를 넣지 않는 이유는 무엇입니까? 일이 훨씬 덜할 것 같군요!” 그 대답은 개발자의 편의가 사용자 경험보다 우선되어서는 안 된다는 것입니다.

input 을 프로그래밍 방식으로 p 요소와 연결하기 위해 aria-describedby 를 사용하여 스크린 리더 없이 탐색하는 사람이 경험하는 것과 동등한 스크린 리더에 대한 정보의 우선 순위를 만들고 있습니다. aria-describedby 는 label 의 내용과 관련된 입력의 종류 다음에 p 내용이 마지막에 설명되도록 합니다.

다시 말해, 입력이 요구하는 내용, 입력의 유형, 필요한 경우 추가 지원, 즉 양식 입력을 보면 정확히 어떤 사람이 경험하게 될 것인지에 대한 것입니다.

사용자 경험은 화면 판독기의 도움으로 탐색하는 사용자를 포함하여 모든 사용자를 포함합니다. 도움말 콘텐츠는 독립적이며 화면 판독기를 사용하는 사람이 다시 참조해야 하는 경우 쉽게 탐색할 수 있습니다. 자체 포함된 노드이므로 다른 중요한 정보를 음소거할 위험 없이 (일반적으로 Control 키를 사용하여) 음소거할 수도 있습니다.

label 의 일부로 도움말 콘텐츠를 포함하면 불필요하게 장황합니다. label 은 의미가 있지만 간결해야 합니다. 레이블에 너무 많은 정보를 추가하면 원하는 효과와 반대되는 결과를 초래할 수 있으며, 기억하기에는 너무 오래 걸리거나 끝까지 듣기에는 너무 답답합니다. 실제로 웹 콘텐츠 접근성 지침에는 이를 구체적으로 다루는 규칙이 있습니다. 성공 기준 2.4.6 및 3.3.2.

예시

다음은 라이브 코드로 구현된 솔루션입니다.

CodePen에서 Eric Bailey(@ericwbailey)의 Pen Don't use placeholder 속성을 참조하십시오.

다음은 인기 있는 스크린 리더가 이를 처리하는 방법을 보여주는 비디오입니다.

더 나은 솔루션

"사용자에게 필요한 인터페이스가 적을수록 액세스 가능성이 높아집니다."

— 앨리스 박스홀

마지막 생각: 추가 자리 표시자 정보가 필요합니까?

좋은 프론트엔드 솔루션은 특별한 입력 속성을 활용하고 가능한 한 최소한의 복잡성으로 귀하의 사이트나 앱을 사용하려는 사람에게 추가 작업을 덜어주는 것을 방지합니다.

좋은 카피라이팅은 입력의 목적을 명확하고 간결하게 설명하는 레이블을 만듭니다. 여기서 충분한 작업을 수행하면 특히 사전에 테스트하는 경우 레이블이 모호성을 제거합니다.

좋은 사용자 경험은 기존 정보를 활용하여 불필요한 질문을 최대한 많이 제거함으로써 사람들의 필요, 욕구, 욕구를 선점하는 지능형 흐름을 만드는 것입니다.

웹사이트나 웹 앱을 사용하는 사람들을 수용한다는 것은 인터넷을 검색할 때 당연하게 여기는 것을 비판적으로 살펴보는 것을 의미합니다. 그들이 사용하는 기술을 포함하여 다른 사람들의 상황에 대해 가정하지 않음으로써 배제를 방지하는 데 도움이 되는 역할을 할 수 있습니다.

시간을 내어 디자인과 코드를 검토하고 정밀한 조사에 적합하지 않은 항목을 확인하십시오. 자리 표시자 속성을 사용하는지 확인하는 것이 좋은 출발점이 될 수 있습니다.

거인의 어깨 위에 서 있습니다. 주제에 대한 글을 써준 Roger Johansson, Adam Silver, Scott O'Hara 및 Katie Sherwin에게 감사드립니다.