Title

To implement an accessible PatternFly title:

• Ensure no heading levels are skipped. For example, a title as a level 4 heading should not come immediately after a level 2 heading.
• Do not choose a heading level size solely for its font styling.
• Ensure the font size of any titles are consistent, and that a title with a lower heading level does not have a larger font size than one with a higher heading level.
• Provide descriptive text content to the title that will make sense when taken out of context.

At a minimum, a title should meet the following criteria:

• No heading levels are skipped within the title's surrounding context.
• The title's font size is consistent and is not larger than a higher heading level's font size.For example, a title with a level 2 heading should not have a larger font size than a title with a level 1 heading or an h1 element. Visually this would make the level 1 heading look like a sub-heading.
• The title has descriptive text content that makes sense when taken out of context.Users that navigate via screen reader may use a rotor menu to view all of the headings on a page, without any other surrounding text. The title's text content must still make sense in this context.

The following React props have been provided for more fine-tuned control over accessibility.

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.