Keyboard Navigation support for Object States
In accessible experiences, object states will now be triggered by keyboard navigation.
How it works: Hover states are triggered when an object gets focus via the tab key; click states are triggered with the enter key.
Image Masking Enhancements: Alpha Masks & SVG/Icon Masks
We’ve added two new types of image masks: alpha masks and SVG/icon masks.
Alpha masks
Alpha masks use a transparent PNG to mask an image. The PNGs "alpha" (transparency) is used for masking. Where the PNG is transparent, the masked image will not appear. Where the PNG is not transparent, the masked image will show. Translucent (semi-transparent) areas will show according to the level of transparency.
SVG/icon masks
SVGs, including icons from the noun project integration, can be used to mask images.
How they work:
- For more information on these image masking enhancements, please reference this educate article.
Accessible Video Player & Closed Caption Files
Accessible Video Player
As of June 5th accessible video will be available to all customers. Accessible Video is a key part of our offering for accessibility needs - this supports keyboard navigation, use by Screen Readers, and Closed Caption Files. This video player also improves use on mobile experiences.
How it works:
This new Video Player will now be the default player in all Ceros experiences. There is no action that needs to be taken to enable or use this new player. Any videos you have directly added to Ceros experiences (both new and existing) will be played on this new player; embedded videos will use their original player. There is no need to make any other changes in the studio.
Closed Caption Files
The new video player for Ceros experiences now includes the option to upload closed caption files for videos you directly add to a Ceros experience. You may decide to add these files for Accessibility purposes, to improve comprehension of videos, to encourage sharing, or for a number of other reasons.
How it works:
- Add a video to your Ceros experience
- After uploading the video, click the gear go to the ‘video settings’ module
- At the bottom of the module, click ‘upload’ in the Close Captions section
Note: Please note you must upload a .vtt file
For more information on creating accessible videos check out this educate article.
General Studio Updates
We fixed a few bugs that were brought to our attention and made some general updates to the studio.
Bugs:
• Accessibility Bug: Components with hover states would sometimes disappear when tabbed to using keyboard navigation.
• Text Bug: Ungrouping a group and then undoing that action may cause text within the group to randomly move on the canvas.
Object States for SVG fill Color
One of the limitations of object states has been the inability to change SVG fill color in a state. With this update, designers can now change SVG fill color for hover, click, and custom object states.
Notes:
- Transition support coming in a later release
Google Analytics 4 Integration
Google Analytics 4 (or GA4) is the latest version of the Google analytics platform which launched in October 2020. Compared to previous version it places a heavy emphasis on event-driven data models. It produces a more complete cross-channel view of the customer lifecycle and puts the information to use with predictive marketing features, providing marketers with more information and efficient ways to act on those insights.
How it works
- Within the Ceros studio go to Account > Integrations add your GA4 Tracking ID field, which now supports GA4 ID ("G-"). No other studio changes need to be made.