June 2022 Frontend Updates: Color Palettes and Typography, Animation, Accessibility Semantics with ARIA and the Internet Explorer Farewell
This month we talk about fonts and color palettes, automatic UI animations, a guide with the best practices for authoring ARIA by the W3C and some keys of the final farewell of IE.
This month we cover:
- Color Palettes and Typography
- UI Animations
- Accessibility Semantics with ARIA
- The Internet Explorer Farewell
Color Palettes and Typography
Multi-colored fonts are not common in web design, even though the COLR font format has full cross-browser support since 2018, at least for the initial set of features, often referred to as COLRv0. The next version, COLRv1, is part of the OpenType 1.9 standard, and unlike COLRv0, it can do linear, radial, and conic gradients.
It’s still early days for COLRv1, but it degrades gracefully: Non
supported browsers will just see a solid fallback color, which can be set in CSS. The
font-palette CSS property allows you to override the default font palette, and some fonts come
with various predefined ones you can choose through the base-palette CSS property. Ollie Williams has written an interesting article about it
in CSS Tricks if you want to delve a little deeper.
And speaking of color palettes, don’t miss this amazing JavaScript library: Color Thief, by Lokesh Dhakar. It generates a color palette from an image just using JS, check out the examples!
UI Animations
Simple UI animations can improve user experience a lot, but sometimes, there is no time to fiddle with them. With AutoAnimate, those are as easy as using a hook in React or a directive in Vue. AutoAnimate is a zero-config drop-in animation utility that adds smooth transitions to your web app, and it can be used in React, Vue, Svelte, or any other JavaScript library or framework. If you are prototyping or you don’t need complex, custom animations, this could be a perfect fit: Take a look at their examples here.
However, we cannot ignore the beauty of well crafted, custom animations like the ones they produce in 14islands. This month they published a great article about animating the direction and rotation of an element so it points to the cursor using trigonometry. It’s a good example of custom animations done right, using requestAnimationFrame and linear interpolation functions. Check out the article, it’s a good inspiration resource!
Accessibility Semantics with ARIA
It’s always a good time to stress the importance of accessibility. Everyone, including individuals with disabilities, should have the same right to access information. From the business point of view, disabled people comprise over one billion users and a $6.9 billion market globally, but 70% of websites are inaccessible according to Deque Systems.
You probably know WAI-ARIA, a technical specification published by the W3C to increase accessibility of web pages, particularly those with dynamic content and web applications. But did you know that the W3C itself publishes a comprehensive guide with patterns and best practices? We think it’s a must read if your team cares about accessibility, cause no ARIA is better than bad ARIA. Check it out, it’s time to review your ARIA roles and attributes!
The Internet Explorer Farewell
At this point you’ve probably read it already: Microsoft is retiring Internet Explorer. The 27 year old browser is sunsetting, and Microsoft will start rolling out a new prompt that redirects those still using IE to Microsoft Edge. Eventually, it will get permanently disabled as part of a future Windows update.
However, there are some footnotes to add to this farewell: The announcement “does not affect in-market Windows 10 LTSC”. Looks like Internet Explorer 11 versions installed in Windows 8.1, Windows 7 Extended Security Updates (ESU) and Windows 10 LTSC ,among others, will take a little bit more time to go away.
I’m not advocating supporting IE by no means, but you shouldn’t forget about progressive enhancement. And if you want to keep up to date with the latest features browser makers plan to support, I recommend following Intent To Ship, a bot that tweets when browser makers announce their intent to ship, change or remove features in their web engines.
Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!