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.
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.