Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring semantic headers

Updated on December 13, 2022

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.

Note: Configuring headers for layouts is a best practice for accessibility, as it generates a semantic <h> header in the markup at runtime.
  1. Search for and open an existing section.
  2. 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.
  3. In the Dynamic layout header, click the View properties icon.
  4. In the layout properties dialog box, select the Display header and title checkbox.
  5. 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.
  6. Optional: To add an icon to the header, select the Include icon or value header, and then complete the icon settings.
  7. In the Body visibility list, select when you want to display the header.
  8. 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 HTML FieldSet and Legend elements.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us