Get to Know Ceros
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Understanding Ceros Analytics
In this lesson, we'll overview the Ceros analytics dashboard and how you can better understand the key performance indicators that can help you improve your content.
Search Engine Optimization (SEO) and Ceros
In this lesson, we'll dive into the various tools in Ceros that can help you optimize your content for search.
Importing Your Design Files
In this lesson, we'll walk through how to import design files from Photoshop, Illustrator, and Sketch files into Ceros.
Theme and Settings Panel
In this lesson, we'll review the different customization options available within the Theme Menu and Settings Panel.
Creating Buttons and Popups
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Creating Mobile Variants Using Adaptive Layouts
In this lesson, we'll take a look at how you can easily create different variants of an experience for Desktop, Tablet, and Mobile devices using the Global Layouts panel.
Create a Carousel
In this lesson, we'll review the steps to creating an image carousel using the Cycle Next and Cycle Previous interactions.
Creating Interactive Maps
In this lesson, we'll review one of the many ways you can create an interactive map in Ceros.
Creating Accessible Content in Ceros
In this lesson, we'll walk through how to leverage the accessibility tools and features in the Ceros studio.
Using Object States for Data Viz
In this lesson, we'll review one of the ways you can create an interactive Bar Chart in Ceros using Object States.
Creating Charts in ChartBlocks
In this lesson, we'll review how to create charts and graphs in ChartBlocks.
How to Use MarkUp
In this quick lesson, we'll walk through how to use MarkUp to streamline the process of giving and receiving design feedback.
Embedding 3rd Party Content and Forms
In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.
Creating Interactive Charts
In this lesson, we'll take a look at how to create animated, interactive charts in Ceros.
Creating an Interactive Menu Bar
In this lesson, we'll take a look at how to create an interactive menu bar to set up some basic navigation within your experience.
Advanced Carousel
In this lesson, we'll build off of the previous carousel lesson to create a more advanced experience using the Show Target and Hide Others interactions.
Creating an Interactive Timeline
In this lesson, we'll review one of the many ways you can create an interactive timeline in Ceros.
Create a Looping Video Background
In this lesson, we'll explore how to make any video file function as a background element - as well as how to layer additional assets overtop for more unique visualizations.
Gating Content with Hubspot and Marketo Forms
In this lesson, we'll take a look at how you can gate multipage eBooks and long scrolling infographics using Hubspot and Marketo forms.
Creating a Slideshow
In this lesson, we'll cover how to create an automatic image slideshow within your experience.
It’s important to note that when creating accessible content in Ceros it’s not as easy as flipping a switch— there’s some work you’ll need to do when designing and in the studio to ensure that the content that you’re creating is accessible. So let’s take a look at some of the accessibility tools and features available to you.
The first thing we’re going to need to do is open up our settings panel and navigate to the Accessibility tab. Here is where you can enable your accessibility features for each experience.
Before diving into the accessibility specific tools, it’s important to note that things like your icon choice, color contrast, and text sizing and spacing become really important when creating accessible content. When creating accessible content in Ceros, you’ll want to ensure that you are using commonly used and widely understood iconography—icons in your experience should indicate the action that the user will take if they click on that icon. You’ll also need to ensure that the colors you choose for your experience have enough contrast to be considered accessible. Within our Accessibility Best Practices guide, you’ll find a helpful color contrast validator tool that you can lean on to ensure you have enough contrast within the experience.
In order for your text to be considered accessible, there needs to be enough space in between each individual letter of text as well as each individual line of text in your content. Your letter spacing will need to be at least 0.12 times your font size, whereas your line height will need to be at least 1.5 times your font size. Also, it’s important to always ensure that you’re using the live text tool within Ceros, rather than using any images of text in the experience.
The physical positioning of the assets on the canvas plays a major role in determining the order in which your content is read out. Screen readers will navigate your content from the top down and left to right based on the bounding box surrounding each asset or group of assets.
In your design tab under typography settings, you have the ability to add H1 through H6 tags, as well as paragraph tags to each text box. Similar to header tags you can also apply HTML section tags, which you may also hear us refer to as landmarks. This helps establish a hierarchy of the different sections on the page. To apply HTML section tags, you’ll first need to ensure that you’re organizing your layers panel using groups. You can group together each section of content within the experience and then tag those groups appropriately. We have the option to tag each section as main, nav, aside, article, section, header, or footer.
Alt tags are short descriptions that can be added to each image in an experience. These tags will be read out by a screen reader to translate the image verbally to the user—so you’ll want to ensure that your alt-tags are descriptive, but concise. We also have the ability to add Aria Labels to visual elements. You can apply aria labels to any visual elements that are not image files, think hotspots, buttons, clickable navigation, data visualization elements such as charts and graphs, and more. When applying aria labels, there may come a time where certain text components on the page become redundant. So instead of also reading out the labels, you can tell Ceros to hide that text from screen readers. This option is available at the bottom of our typography section. Simply check this box to prevent any repetitive text from being read out loud.
The scroll to object interaction lets you drive your user to a specific object, rather than right above a section like an anchor does. This is important because if your user is tabbing through the content with keyboard keys, it enables them to jump to whichever object is the next most important object to them in that section—rather than to a random point in the experience.
When Ceros detects that a user is using keyboard keys in lieu of a mouse, it automatically creates a button at the top of the piece that the user can click on to Skip to the Main Content. This button copy can be customized in the Settings panel here. You’ll want to ensure that you’re tagging your main content as Main using an HTML section tag. This way when a user clicks to skip, they will be driven down to whatever it is that you’ve tagged as main.
When setting up your experience, it’s also important to remember to name each page of the build. This can be done by double clicking on the page name above each page in the left hand panel and typing in a custom name. Then, you’ll want to navigate to your Settings panel and check off “Append Page Names to Experience Title” so that the page names are added to the HTML title tag of the piece.
To set up the toggle reduce motion interaction, simply create a button at the top of your experience. Here, you’ll just want to apply an interaction that says on click, toggle reduced motion.
Now, let’s take a look at how you can make your carousels accessible. To start, import your assets and align your slides on your canvas. Your slides can be images, text boxes, videos, or groups of all of the above. Now, let’s apply an aria label to each slide that explains which slide it is. For example, here we’ll write “Slide 1 of 3.” Now, in our layers panel, let’s arrange all of the slides into a group. We’ll name this group “Carousel Slides”. Be sure to only leave the visibility of Slide 1 toggled on, and turn off the remaining slides by clicking the eyeball icon next to each layer. The next thing we’ll want to do here is add our arrows, we can grab these from the noun project icon library. Over each arrow, let’s draw out a hotspot, making sure to add aria labels to both of them. For example, we’ll write “Click here to cycle to the next slide” and “click here to cycle to the previous slide.”
Now it’s time to set up our interactions. On the forward arrow hotspot, we can apply an interaction of: On Click > Cycle Next > Carousel Slides Group. And on the back arrow hotspot, let’s apply an interaction of: On Click > Cycle Previous > Carousel Slides group. To stay organized, we’re going to place each arrow and hotspot in a group in your layers panel, and name that Controls.
Staying in our layers panel here, let’s group both the “Slides” and “Controls” groups into a larger group called Carousel Group, and on the Carousel Group, we’ll add an HTML section tag of ‘section.’ We also need to be sure to add an aria-label to the Carousel Group. We recommend making this description fairly short because the goal is to succinctly convey that this group is a carousel.
As a final step, we’ll want to add a “screen reader only” text attribute to the carousel group that explains the purpose of the carousel and how to navigate it, so let’s write “This is a carousel showing XYZ. Use the next, previous or slide buttons to navigate.” This is text content that will solely be communicated by screen readers.
Now, let’s take a look at popups. With on-click popups, you will give the user the option to decide if they would like to uncover more information. So let’s add an aria label to our hotspot here to tell the user a bit of information about the popup- so that they can decide if they’d like to hear more. If they indicate that they do in fact want more information, Ceros will then present the user with the target content. If the user does not indicate that they want more information, they will not be read the popup content.
The setup of your layers becomes important in this situation. To ensure that your content can be digested manually, you will need to group your trigger element (i.e. your CTA and/or hotspot) with your target element (your popup, for example). So you can see here we grouped together our trigger and our popup content are all in the same parent folder. If these are not in the same parent folder, the popup content will not be read out correctly.
Now let’s take a look at the “Automatic Activation” approach. This is referring to on-hover popups throughout your content. These are a bit different than on-click interactions because screen readers will always read the hover popup content to the user. This is why it’s called automatic activation–the user does not have to do anything to trigger the popup content to be read out.
Similar to manual activation, you’ll need to group your trigger element (i.e. your CTA/ hotspot) with your target element (your popup, for example). In order for your content to be read out in the correct order, the trigger and target must be a part of the same parent group.
If you have any questions about the Ceros accessibility tools and features, do not hesitate to reach out in the chat window, and our team will be happy to help!
It’s important to note that when creating accessible content in Ceros it’s not as easy as flipping a switch— there’s some work you’ll need to do when designing and in the studio to ensure that the content that you’re creating is accessible. So let’s take a look at some of the accessibility tools and features available to you.
The first thing we’re going to need to do is open up our settings panel and navigate to the Accessibility tab. Here is where you can enable your accessibility features for each experience.
Before diving into the accessibility specific tools, it’s important to note that things like your icon choice, color contrast, and text sizing and spacing become really important when creating accessible content. When creating accessible content in Ceros, you’ll want to ensure that you are using commonly used and widely understood iconography—icons in your experience should indicate the action that the user will take if they click on that icon. You’ll also need to ensure that the colors you choose for your experience have enough contrast to be considered accessible. Within our Accessibility Best Practices guide, you’ll find a helpful color contrast validator tool that you can lean on to ensure you have enough contrast within the experience.
In order for your text to be considered accessible, there needs to be enough space in between each individual letter of text as well as each individual line of text in your content. Your letter spacing will need to be at least 0.12 times your font size, whereas your line height will need to be at least 1.5 times your font size. Also, it’s important to always ensure that you’re using the live text tool within Ceros, rather than using any images of text in the experience.
The physical positioning of the assets on the canvas plays a major role in determining the order in which your content is read out. Screen readers will navigate your content from the top down and left to right based on the bounding box surrounding each asset or group of assets.
In your design tab under typography settings, you have the ability to add H1 through H6 tags, as well as paragraph tags to each text box. Similar to header tags you can also apply HTML section tags, which you may also hear us refer to as landmarks. This helps establish a hierarchy of the different sections on the page. To apply HTML section tags, you’ll first need to ensure that you’re organizing your layers panel using groups. You can group together each section of content within the experience and then tag those groups appropriately. We have the option to tag each section as main, nav, aside, article, section, header, or footer.
Alt tags are short descriptions that can be added to each image in an experience. These tags will be read out by a screen reader to translate the image verbally to the user—so you’ll want to ensure that your alt-tags are descriptive, but concise. We also have the ability to add Aria Labels to visual elements. You can apply aria labels to any visual elements that are not image files, think hotspots, buttons, clickable navigation, data visualization elements such as charts and graphs, and more. When applying aria labels, there may come a time where certain text components on the page become redundant. So instead of also reading out the labels, you can tell Ceros to hide that text from screen readers. This option is available at the bottom of our typography section. Simply check this box to prevent any repetitive text from being read out loud.
The scroll to object interaction lets you drive your user to a specific object, rather than right above a section like an anchor does. This is important because if your user is tabbing through the content with keyboard keys, it enables them to jump to whichever object is the next most important object to them in that section—rather than to a random point in the experience.
When Ceros detects that a user is using keyboard keys in lieu of a mouse, it automatically creates a button at the top of the piece that the user can click on to Skip to the Main Content. This button copy can be customized in the Settings panel here. You’ll want to ensure that you’re tagging your main content as Main using an HTML section tag. This way when a user clicks to skip, they will be driven down to whatever it is that you’ve tagged as main.
When setting up your experience, it’s also important to remember to name each page of the build. This can be done by double clicking on the page name above each page in the left hand panel and typing in a custom name. Then, you’ll want to navigate to your Settings panel and check off “Append Page Names to Experience Title” so that the page names are added to the HTML title tag of the piece.
To set up the toggle reduce motion interaction, simply create a button at the top of your experience. Here, you’ll just want to apply an interaction that says on click, toggle reduced motion.
Now, let’s take a look at how you can make your carousels accessible. To start, import your assets and align your slides on your canvas. Your slides can be images, text boxes, videos, or groups of all of the above. Now, let’s apply an aria label to each slide that explains which slide it is. For example, here we’ll write “Slide 1 of 3.” Now, in our layers panel, let’s arrange all of the slides into a group. We’ll name this group “Carousel Slides”. Be sure to only leave the visibility of Slide 1 toggled on, and turn off the remaining slides by clicking the eyeball icon next to each layer. The next thing we’ll want to do here is add our arrows, we can grab these from the noun project icon library. Over each arrow, let’s draw out a hotspot, making sure to add aria labels to both of them. For example, we’ll write “Click here to cycle to the next slide” and “click here to cycle to the previous slide.”
Now it’s time to set up our interactions. On the forward arrow hotspot, we can apply an interaction of: On Click > Cycle Next > Carousel Slides Group. And on the back arrow hotspot, let’s apply an interaction of: On Click > Cycle Previous > Carousel Slides group. To stay organized, we’re going to place each arrow and hotspot in a group in your layers panel, and name that Controls.
Staying in our layers panel here, let’s group both the “Slides” and “Controls” groups into a larger group called Carousel Group, and on the Carousel Group, we’ll add an HTML section tag of ‘section.’ We also need to be sure to add an aria-label to the Carousel Group. We recommend making this description fairly short because the goal is to succinctly convey that this group is a carousel.
As a final step, we’ll want to add a “screen reader only” text attribute to the carousel group that explains the purpose of the carousel and how to navigate it, so let’s write “This is a carousel showing XYZ. Use the next, previous or slide buttons to navigate.” This is text content that will solely be communicated by screen readers.
Now, let’s take a look at popups. With on-click popups, you will give the user the option to decide if they would like to uncover more information. So let’s add an aria label to our hotspot here to tell the user a bit of information about the popup- so that they can decide if they’d like to hear more. If they indicate that they do in fact want more information, Ceros will then present the user with the target content. If the user does not indicate that they want more information, they will not be read the popup content.
The setup of your layers becomes important in this situation. To ensure that your content can be digested manually, you will need to group your trigger element (i.e. your CTA and/or hotspot) with your target element (your popup, for example). So you can see here we grouped together our trigger and our popup content are all in the same parent folder. If these are not in the same parent folder, the popup content will not be read out correctly.
Now let’s take a look at the “Automatic Activation” approach. This is referring to on-hover popups throughout your content. These are a bit different than on-click interactions because screen readers will always read the hover popup content to the user. This is why it’s called automatic activation–the user does not have to do anything to trigger the popup content to be read out.
Similar to manual activation, you’ll need to group your trigger element (i.e. your CTA/ hotspot) with your target element (your popup, for example). In order for your content to be read out in the correct order, the trigger and target must be a part of the same parent group.
If you have any questions about the Ceros accessibility tools and features, do not hesitate to reach out in the chat window, and our team will be happy to help!