{"id":33357,"date":"2019-10-16T00:30:56","date_gmt":"2019-10-15T15:30:56","guid":{"rendered":"https:\/\/jirak.net\/wp\/improving-form-controls-in-microsoft-edge-and-chromium\/"},"modified":"2019-10-16T00:34:48","modified_gmt":"2019-10-15T15:34:48","slug":"improving-form-controls-in-microsoft-edge-and-chromium","status":"publish","type":"post","link":"https:\/\/jirak.net\/wp\/improving-form-controls-in-microsoft-edge-and-chromium\/","title":{"rendered":"Improving form controls in Microsoft Edge and Chromium"},"content":{"rendered":"

Improving form controls in Microsoft Edge and Chromium
\n<\/p>\n

Since we began work on the next version of Microsoft Edge based on Chromium, we’ve been investigating ways to modernize form controls to provide a modern appearance as well as the touch friendliness and accessibility that our users expect from Microsoft Edge today.<\/p>\n

Over the past few months, we’ve been collaborating closely with the Google Chrome team on this project, and are excited to share the refreshed controls that will be coming to Microsoft Edge Insider builds, or other Chromium browsers near you.<\/p>\n

A more modern appearance<\/h1>\n

This change brings an improved polish to the form controls and helps bring continuity of design and user experience with the rest of the browser. We have been collaborating closely with the Google Chrome design team to strike a balance between our design languages with a modern look and feel that feels at home in a variety of Chromium browsers. Below is a comparison of the default controls in Chromium today, compared to the updated controls we\u2019re rolling out:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u00a0<\/strong><\/td>\nCurrent<\/strong><\/td>\nUpcoming<\/strong><\/td>\n<\/tr>\n
Radio<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Checkbox<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Text<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Buttons<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Select<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Password<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Color<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Meter<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Progress<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Range<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Date<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n
Time<\/strong><\/td>\n\"Image<\/td>\n\"Image<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Better touch support<\/h1>\n

Windows devices come in a rich array of form factors and input modalities, including traditional desktop and laptop PCs, 2-in-1 devices, and other tablets and pen devices. We heard your feedback looking for a better touch input experience in our early Chromium preview builds, and set out to take an inventory of the controls to identify opportunities to improve the touch experience.<\/p>\n

\"Image<\/p>\n

A good example of the touch improvements is the time input; currently, Chromium provides a text input, a clear button and a spinner. Our research found that with the large surface area of the fingertip, small controls that are too close together can be difficult to target precisely, recommending a control size of 23×23 pixels (13×13 DLUs) is a good minimum interactive control size for any input device. By contrast, the spin controls at 15×11 pixels are much too small to be used effectively with touch. The new time input we\u2019re introducing includes a flyout with expected touch affordances, like inertia when scrolling and larger touch targets. Other inputs such as date, color, range received subtle size increases to \u00a0important touch targets as well.<\/p>\n

More accessible controls<\/h1>\n

Another area we examined is the focus rectangle that wraps a control when a user focuses the control. This is an important accessibility feature, as it allows the user to track where they\u2019re actively focused, especially while navigating via keyboard.<\/p>\n

Our team identified three different potential focus indicators that aligned with Microsoft\u2019s design language, guaranteed high contrast on any background content, and provided a clean and aesthetically pleasing appearance.<\/p>\n

We then ran interactive user studies to identify the best option, compared against Chromium\u2019s current default focus rectangle as a baseline. We found that, while preferences were split for aesthetics, one option was the clear leader for accessibility. We\u2019ve chosen that option as the new focus rectangle in Microsoft Edge, which you can see below:<\/p>\n

\"Image<\/p>\n

Additionally, all these controls now support Windows High Contrast, which allows the user to define specific colors to improve the visual experience. All sites that utilize the built-in controls will benefit from these updated controls whenever the user is in High Contrast mode, without web developers doing any extra work. However, webdevelopers can adjust these styles if they want by utilizing the new CSS forced-color-adjust<\/a> property and the prefers-contrast<\/a>media query that are actively being standardized.<\/p>\n

\"Image<\/p>\n

We\u2019ve also updated our implementation to ensure great keyboard support across each control. For example, in the new color input, you can either navigate a single value using the arrow keys with the color well selected; if you hold the Ctrl key on Windows (Cmd key on Mac), it will move by 10 values allowing for quick traversal of the color well.<\/p>\n

Finally, we updated the mappings for the controls to map to the HTML Accessibility API Mappings specification<\/a>, to ensure a great experience for users who use assistive technologies (such as screen readers).<\/p>\n

Please share your feedback<\/h1>\n

These updated controls are now available in Canary and Dev channel builds of Microsoft Edge, and will be coming upstream to other Chromium browsers in the near future. We\u2019re excited as this work begins to ship out to users, and as the controls continue to evolve, we greatly appreciate any feedback that you may have in how we can improve the experience. Just click the smiley face in the top-right to Send Feedback, and let us know what you think!<\/p>\n

\u2014 Greg Whitworth<\/a>, Senior Program Manager, Microsoft Edge<\/p>\n

The post Improving form controls in Microsoft Edge and Chromium<\/a> appeared first on Windows Blog<\/a>.<\/p>\n

Source: Improving form controls in Microsoft Edge and Chromium<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Improving form controls in Microsoft Edge and Chromium Since we began work on the next version of Microsoft Edge based on Chromium, we’ve been investigating ways to modernize form controls to provide a modern appearance as well as the touch friendliness and accessibility that our users expect from Microsoft Edge today. Over the past few months, we’ve been collaborating closely with the Google Chrome team on this project, and are excited to share the refreshed controls that will be coming to Microsoft Edge Insider builds, or other Chromium browsers near you. A more modern appearance This change brings an improved polish to the form controls and helps bring continuity of design and user experience with the rest of the browser. We have been collaborating closely with the Google Chrome design team to strike a balance between our design languages with [ more… ]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":33358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[169],"tags":[201],"class_list":["post-33357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-windows"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts\/33357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/comments?post=33357"}],"version-history":[{"count":1,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts\/33357\/revisions"}],"predecessor-version":[{"id":33359,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/posts\/33357\/revisions\/33359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/media\/33358"}],"wp:attachment":[{"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/media?parent=33357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/categories?post=33357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jirak.net\/wp\/wp-json\/wp\/v2\/tags?post=33357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}