When designing in the Studio, 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 can use either folders or groups to do so. When designing for accessibility, you must be 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 by section. This means, in this case, grouping all of the assets in our header (with the navigation as a subgroup within that section), grouping each body section, and grouping all of the assets in our footer. 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 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 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 want to make sure you’re adding the appropriate tags 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 appropriate sections using HTML section tags (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