It’s important to consider accessibility in the early stages of design as it’s much more difficult to retrofit an existing experience to meet accessibility standards later. For this reason, if you’re planning to make multiple accessible experiences you should consider creating a barebones outline to use as a starting point. This will not only set you up for success but it will also save you a ton of time in the long run. Below we have outlined a few guidelines and tips to keep in mind when creating a template for your accessible experiences. You can also import the outlined experience into your account.
How to get started
Before proceeding, ensure you have the accessibility features enabled on your account, as well as in the settings panel of the experience you’re working on.
Determine the page hierarchy
Determining the page hierarchy should be step one before adding any content to the experience. Most experiences can be broken down into some combination of a header, navigation, sections and a footer. The breakdown is totally up to the design but it’s important to decide on the hierarchy first.
Create text components
Once you’ve determined the hierarchy, begin by creating text components for the header, navigation, sections, and footer like we’ve done below. This is also a good time to quickly format these text objects to fit your design aesthetic. This will help keep everything organized and easily scannable.
Apply HTML element tags to the text boxes
Text in Ceros can be tagged with a range of header or paragraph tags to create hierarchy and structure. To do this, select the text box you’d like to tag. Navigate to the Design tab and scroll to the “HTML Element” section. Here you can select the appropriate tag for each text box component. Apply the <h1> tag to the header text component and <h2> tags to the other text components.
*Please note this is only adding hierarchy and structure from an accessibility stand point not formatting. You will have to format or stylize your text boxes individually. For text formatting considerations, view this article on best practices on designing for accessibility.
Group individual text components and apply an HTML section tag to each group
- Navigation and Header
Start by selecting the nav title text box and grouping it. You can do this by either clicking the group icon in the layers panel or CMD/CRTL+G on your keyboard. Next, label the group as “Navigation” in the layers panel. With the Navigation group selected, apply the <nav> HTML section tag. After this is completed, nestle the Navigation group into a header group. To do this, select the Navigation group and header title text box. Group them together and label the group as “Header”. Apply the <header> HTML section tag to the header group. For more information on how to complete an accessible navigation menu check out this article.
- Sections and Main section
Following the same process, group each section title text box and apply a <section> HTML tag to each section group. Next, nestle the section groups into a Main group and add the <main> HTML section tag to the Main group. This is a very important step as users who rely on screen readers need to have the ability to skip to the main content of your experience. By labeling the Main group with the <main> HTML section tag, the screen reader will know where to guide the user to within your experience.
- Footer
For the footer simply group the footer text box and apply the <footer> HTML section tag to the group. As some screen readers don’t always identify the <footer> HTML section tag as a footer you could also add an Aria Label that reads as “Footer Section”.
At this point you’ve created a great foundation for creating your accessible experience. Import the above example outline experience into your account. Going forward, you can simply duplicate this outline experience and continue building the rest of your accessible experience. (Making sure to work within the groups you’ve structured in the outline). By duplicating the outline, you’ll have the original as a starting point for future experiences. For more information on how to duplicate an experience, check out this article.