Need help making your time within Tridion more effective and produce better results? You could probably use a few tips and tricks. In this new blog we've set up, we will be adding new tips and tricks for working within Tridion to make the most out of our implementation.
Creative commons photo credit: Dai Williams.
Take advantage of Toggle List Section Heading templates
3/17/2016 9:05:22 AM
Michael Tangen
Accessibility is very important and was at the forefront of many of the decisions that we've made to help ensure that you build accessible web content. With toggle list pages — pages that allow you to present FAQ, tabbed, or anchor style content — we've set up a specific document structure for you to work within, attempting to balance flexibility and creative control with the rigidity that's required to ensure compliance.
We're kicking off a new tips and tricks series of articles with this topic, showing you the ways that you can achieve proper heading order using one of a few options. If you'd like more information on semantic structure and the importance of correct heading order in a web page, read WebAIM's article on semantic structure.
First off we need to communicate a few assumptions that we've had to make, none of which were made in a vacuum and operated within the context of the Web Content Management Advisory Team. The primary assumption is the structure of a page containing toggle list items. We presume that the basic structure of a page that supporting a single or multiple group of toggle lists will look something like this:
Assuming this structure, our templates presume the order: Page Introduction (component title presented with heading one), Toggle List Section Heading (the component title presented with heading two), and each toggle list item (each with heading level three. We know that your content will not always fit that model, which is why you have a few options at your disposal to fulfill the requirement of the valid progression of inheritance from H1 to H2 to H3 and so on.
This option is perhaps the most ideal scenario — you start out your page assembly with a page introduction about the overall content of your page. That page introduction uses an H1 for the display title, setting the stage for the context of that page. You then set up a section heading which precedes your group of toggle list items (whether they be tabbed or FAQ style presentations). The component template "Toggle List Section Heading" uses an H2 for its display title. And then all the toggle list items that follow will present their headings starting at the H3 level.
A quick bulleted recap of the order of presentation:
If for some reason you do not want the excess content introduced by having an additional component introducing your group of toggle list items [editorial note: frankly a missed marketing and search engine optimization opportunity for adding keyword/content weight to your page], you can take your existing General Content component and change the component template from Page Introduction to Toggle List Section Heading. It will still display your title and body content, but the title will be displayed as an H2 instead of an H1.
If you're asking yourself, "well what about the opening H1 tag?" technically it is covered. All Tridion 2013 sites start out with their site name as an opening H1 tag. While there are two different perspectives in the accessibility community about the quantity of H1 tags allowed on a page, we have adopted the philosophy that it is acceptable to have two H1 tags — the overall site name, and then your page title. So from a technical standpoint, your opening H1 tag is technically already covered should you decide to open up your toggle list page with a Toggle List Section Heading.
A quick bulleted recap of the order of presentation:
There's always a work-around to both accomplish your end-goal and still meet accessibility requirements. Should you find yourself in a situation where you just cannot come up with adequate content for a page introduction and a section heading, you can use the General Content - no title component template. The page will ignore the title of your component and only display the body copy of your opening component. In that body copy, you will need an opening headline that uses the H2 Section Type.
In the WYSIWYG editor, highlight your opening headline text, and change the Section Type to Heading 2. This will surround that selected text with an H2 tag, and as long as this appears before your group of toggle list items, will keep you in accessibility compliance as far as heading order is concerned.
Both option two and three, are acceptable solutions and keep you within compliance — and may be particularly valuable if you are linking to your current Page Introduction component. You can change the component template accordingly (and maybe make adjustments to the body copy if necessary) to fulfill the correct heading sequence while maintaining all present component links to that component/page.
With that said, we would highly recommend following option one — establish your page introduction component with an opening H1, follow it up with a section heading (which uses an H2), and then your toggle list items (which use an H3). For some scenarios this may seem like excessive content — particularly if you feel there is not much to be said on the matter — but it can also be viewed as a missed opportunity for search engine optimization and to further "sell" the information from a marketing perspective (when appropriate). Content that is contained within headings and that follows is valuable information for search engines and increases your rank and relevance when used correctly. So before you use the quick and easy solutions of option two or three, consider how you might add value and weight to your page by including both a page introduction and a toggle list section heading.
Accessibility
Support
Accessibility
