Configuring semantic headers
Configure semantic headers to ensure that users across browsers and assistive technologies have an equal and accessible experience in your application. You can use semantic headers as navigation landmarks for screen readers, an organizational component for content, or as table of contents for a page.
<h> header in the markup
at runtime. - Search for and open an existing section.
- If the section is based on a template, in the header of the section editor, click convert to full section editor, and then confirm the conversion.
- In the Dynamic layout header, click the View properties icon.
- In the layout properties dialog box, select the Display header and title checkbox.
- In the Container settings section, in the
Title list, select the source of the header
text:
- To use a text constant, select Text, and then, in the field to the left, enter the text of the header.
- To reference a property, select Property, and then, in the field to the left, select the property that you want to reference.
- To reference the value of a property, select Field value, and then, in the field to the left, select the property whose value you want to reference.
- Optional: To add an icon to the header, select the Include icon or value header, and then complete the icon settings.
- In the Body visibility list, select when you want to
display the header.For more information, see Creating a When rule and Defining refresh conditions for UI areas.
- In the Header type list, select the style of the
header:
- To display a horizontal bar that is always present, select Bar.
- To display a horizontal bar that application users can click to expand or collapse the layout contents, select Collapsible.
- To display a border around the contents of the layout with a single text label, select Fieldset.
The Fieldset produces HTMLFieldSetandLegendelements.
Previous topic Managing field validation in hidden sections Next topic Configuration options for layouts