HTML 양식 컨트롤은 웹의 많은 상호 작용을 위한 중추를 제공합니다. 

개발자가 사용하기 쉽고 내장 된 접근성을 갖추고 있으며 사용자에게 친숙합니다.

https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html?ref=devawesome.io 

그러나 기본 양식 컨트롤의 한 가지 문제는 스타일이 일치하지 않는다는 것입니다. 

<button> 및 <select>와 같은 이전 컨트롤은 사용자 운영 체제에 맞게 스타일이 지정되었습니다. 

최근에 플랫폼에 추가 된 양식 컨트롤은 당시 인기 있는 스타일에 맞게 설계되었습니다. 

Chromium 기반 브라우저의 경우 이로 인해 컨트롤이 일치하지 않고 때때로 오래되어 컨트롤이 기본 모양과 관련하여 추가 시간을 보내고 (코드를 추가로 제공) 개발자가 더 오래 사용할 수 있습니다.

<meter>, <progress> 및 <input type = "range">은 Windows의 Chrome 80에서 다른 세계에서 온 것처럼 보입니다.

이 문제를 해결하기 위해 Microsoft Edge 및 Chrome 팀은 작년에 Chromium 브라우저에서 기본 제공 양식 컨트롤의 기능을 개선하고 개선하기 위해 협력했습니다. 

또한 두 팀은 집중된 양식 제어 상태와 링크와 같은 기타 대화 형 요소를 보다 쉽게 ​​인식 할 수 있도록 노력했습니다.

이러한 변경 사항은 현재 Windows의 Edge에서 제공되며 실험의 일부로 Chrome 81에서 볼 수 있습니다. chrome : // flags / # form-controls-refresh는 Chrome 81에서도 변경 사항을 적용합니다. Windows, macOS, ChromeOS 및 Linux의 Chrome 83에서 변경 사항이 적용됩니다. Chrome 81 및 83의 업데이트 된 출시 일정을 참조하십시오. 올해 말 Android의 Chrome 업데이트가 출시 될 예정입니다.

양식 컨트롤에 대한 자세한 내용을 보려면 CDS 2019의 Nicole Sullivan과 Greg Whitworth의 강의를 살펴보십시오.

신선한 페인트 코트 

두 팀은 컨트롤이 일치하는 세트의 일부인 것처럼 느끼도록 만들고 싶었습니다. 

이는 그라디언트를 없애고 현재 디자인 시스템에서 영감을 얻은 더 많은 평면 디자인을 사용하는 것을 의미했습니다.

Chrome 팀원 인 Nicole Sullivan은 다음과 같이 설명합니다.

우리는 아름답고 웹과 중립을 추구했습니다. 우리는 모든 디자인 시스템이 새로운 디자인에서 약간의 자신을 보고 자신의 브랜딩에 어떻게 적용되는지 쉽게 상상할 수 있기를 바랍니다. 

아래는 이전에 Chromium에 표시되었던 양식 컨트롤과 재 설계 후 표시되는 양식 컨트롤을 비교 한 것입니다.

왼쪽 : Chrome 80에서 양식 컨트롤의 사전 스타일링. 오른쪽 : 재 설계 후 표시되는 대로 제어합니다.

접근성 및 터치 지원 개선 

기본 스타일을 개선하는 것 외에도 두 팀은 양식 컨트롤의 접근성과 향상된 터치 지원을 조정했습니다.

이러한 변화는 몇 가지 주요 영역에서 가장 두드러집니다.

보다 가시적인 포커스 링 

포커스 표시기 ( "포커스 링"이라고도 함)는 키보드 또는 스위치 장치를 사용하여 상호 작용하는 요소를 식별하는 데 도움이 되는 중요한 액세스 기능입니다.

이전에는 Chromium에서 밝은 단색 외곽선을 사용하여 초점을 맞춘 요소를 나타냈습니다. 그러나 초점을 맞춘 요소가 비슷한 색상의 배경에 있으면 링을 인식하기 어렵습니다.

비슷한 색상의 배경에 있는 이전 초점 링.

새로운 초점 표시기는 흰색 윤곽이 얇고 두꺼운 어두운 링을 사용하므로 밝은 배경과 어두운 배경 모두에서 가시성이 향상됩니다. 이는 개발자가 새로운 코드를 작성할 필요 없이 여러 사이트의 키보드 환경을 자동으로 개선하는 손쉬운 접근성 승리입니다.

초점 표시기의 새로운 2 줄 디자인은 검은 색과 흰색 배경 모두에서 볼 수 있도록 합니다.

예를 들어 검정색 버튼이 흰색 배경에 있거나 초점 링이 서로 밀접하게 위치한 요소에 의해 잘린 경우와 같이 초점 링을 인식하기 어려운 시나리오가 여전히 있습니다.

포커스 링을 인식하기 어려운 시나리오 나 새로운 포커스 표시기가 사이트 디자인과 일치하지 않는 경우 새로운 : focus-visible pseudo-class를 포함하여 포커스를 스타일링 하는 방법이 있습니다. 초점 표시기가 표시 될 때 세밀하게 제어 할 수 있습니다.

다중 입력 디스플레이를 위한 증가 된 탭 대상 크기 

지난 몇 년 동안 2-in-1 장치, 태블릿 및 터치 지원 랩톱과 같은 다중 입력 장치가 증가했습니다. 이는 터치가 데스크탑에서 중요한 고려 사항이 됨을 의미합니다. 그러나 기존 양식 컨트롤 중 다수는 다중 입력 표면을 염두에 두고 설계되지 않았습니다. 예를 들어 <input type = "date">는 모바일에서는 훌륭하지만 탭 타겟은 너무 작아 터치 스크린 노트북에서 사용할 수 없습니다.

작은 탭 대상이 있는 <input type = "date">의 이전 디자인.

터치 스크린의 기능을 개선하기 위해 업데이트 된 컨트롤에 더 나은 플라이 아웃, 더 큰 탭 대상 및 스크롤시 스와이프 및 관성이 지원됩니다.

탭 타겟이 훨씬 많은 <input type = "date">의 새로운 디자인

개선 된 색상 피커 

이전에는 <input type = "color"> 요소가 키보드에 완전히 액세스 할 수 없었기 때문에 키보드 또는 스위치 장치에 의존하는 사용자는 이를 사용할 수 없었습니다. 새로운 모양과 함께 컨트롤은 이제 완전히 키보드로 액세스 할 수 있으며 추가 수정 자 키 (Control 또는 Mac의 Command)가 포함됩니다. 이러한 개선으로 사용자는 한 번에 10 가지 색상 값으로 이동할 수 있습니다.

향상된 키보드 접근성을 갖춘 새로운 <input type = "color">.

보다 일관된 키보드 액세스 

마지막으로, 팀은 HTML 접근성 API 매핑 사양의 권장 사항과 일치하도록 모든 컨트롤의 ARIA 역할 매핑을 업데이트했습니다. 이는 키보드 나 화면 판독기와 같은 보조 기술을 사용하는 사람이 페이지에 액세스 할 때보다 일관된 환경을 제공해야 합니다.

참여하는 방법 

디자인 새로 고침은 매우 필요한 변경 사항이지만 두 팀은 개발자로부터 내장 양식 컨트롤의 스타일을 쉽게 지정하고 다음 작업에 대처할 계획이라고 들었습니다. 향상된 스타일링, 기능 및 새로운 고급 구성 요소에 대한 아이디어에 흥미가 있다면 Edge 및 Chrome 담당자가 도움을 필요로 합니다!

사이트 테스트 

Edge 및 Chrome 베타의 새로운 양식 컨트롤 및 포커스 표시기를 사용해보세요. 

디자인 변경으로 기존 사이트 나 앱에 부정적인 영향이 있는 경우 이 버그 템플릿을 사용하여 알려주십시오. 

또는 관련 버그를 발견하면 별표를 줘! ⭐️ Starring은 플랫폼 팀이 심사하고 다음에 수행 할 작업을 결정하는 데 도움이 되므로 매우 중요합니다.