When designing in Ceros, we always recommend keeping your layers panel nice and organized so it can be easier to find your assets, create interactions, and collaborate with others on your team. Keeping your layers panel organized is even more important when designing for accessibility. Let’s talk about some best practices:
Groups, groups, groups.
When organizing your layers panel, you have the ability to use either folders or groups to do so. When designing for accessibility, it is critical that you are solely using groups and not using folders for organizing layers. This is because you’ll need to be tagging each section (more on this in a moment), and you can only apply tags to groups, not folders. We’ll dive into HTML Section tags in the next section, but first, let’s take a look at how you can organize your layers panel with different groups.
In this experience, you’ll see we have a couple of different sections. We have a header, 5 “body” sections, and a footer section. No matter the format of your experience, it’s important to group your assets together by section. This means, in this case, grouping all of the assets in our header together (with the navigation as a subgroup within that section), grouping each body section together, and grouping all of the assets in our footer together. It’s also important to identify the main content of your experience. In this case, we’ve identified our main content as the five body sections. As a result, we’ve grouped those five section groups together as the “Main” group. Now, we’re ready to start tagging our groups.
HTML Section Tags
HTML section tags are tags that you can apply to the different sections of your Ceros experience to help establish a hierarchy within your content. These can only be applied to groups, and are applied by selecting the group, navigating to the design panel, and selecting a tag from the dropdown under “HTML Section Tag.” You can tag each section with one of the following tags:
- Main
- Nav
- Aside
- Article
- Section
- Header
- Footer
You don’t have to have every single one of these tags in every experience that you create, but you’ll definitely want to make sure you’re adding an appropriate tag to each section in your experience. For example in the screenshot above, it would mean tagging the Header as Header, Nav as Nav, body sections as Section, and whatever we decide is the Main content, as Main.
Skip to Main Content
If Ceros detects that a user is navigating an experience with keyboard keys to tab through the piece (rather than a mouse or trackpad to scroll), the platform will automatically create a button at the top of the experience prompting the user to “Skip to the Main Content.” This will enable them to jump down to whatever it is that you’ve tagged as Main, so that they don’t have to tab through the entire piece just to get to the “main” content. This button is automatically generated, so as long as you’ve tagged your main content as Main it will function properly. Additionally, you can customize your link text in your settings panel under the Accessibility tab.
Key Takeaways
When creating accessible content, there are a few key things to remember when it comes to your layers panel organization.
- Always use groups to organize your layers panel
- Group assets together by section
- Tag each section using HTML section tags in your design tab (nav, header, section, etc.)
- Don’t forget to tag your “main” content within the experience as Main
- You can customize your Skip to Main Content button in your settings panel