Styled P Elements Must Not Be Used as Headings

Issue/Question

When I run a Page Check I get the following Serious Problem: 

Styled <p> elements must not be used as headings

Environment

  • Web CMS

Cause

Final Checks evaluate all code on a page and detect accessibility issues not meeting WCAG 2.0 (Level AA) standards. 

It detected the page contains one or more paragraph blocks styled to look like a heading. Headings (h1-h6) convey the structure of the page. Sighted users can see structure by using different text sizes; however, screen reader users require heading elements be marked up explicitly. When heading elements are properly applied, the page becomes much easier to navigate for screen reader users and sighted users alike.

Resolution

Use heading blocks (Heading 2 - Heading 6) instead of a paragraph to convey headings.

  1. Click  Yellow Light Bulb to check out page.
  2. Click  Edit tab.
  3. Click Edit button on content area where styled paragraph is located.
  4. In WYSIWYG toolbar use Show Blocks Button - a dotted outline around a paragraph icon Show Blocks button. This adds a thin border around every block in the section, labeling the corresponding block level in the top left. Paragraphs will be labeled P.
  5. Find paragraph identified in the Page Check Source Code and apply one of the following fixes based on your scenario:
    • If your item is a title of the content that follows: Change it to use the correct heading order using the blocks drop down (Heading 2 - Heading 6).
    • If your item is not a title or heading: Highlight it and use  Clear Formatting button to remove style making it appear as a heading.
  6. Save page.
  7. Click Publish button to run accessibility final check again. Repeat the steps as necessary to mark headings correctly. When resolved it will no longer display in the accessibility check.

See Heading Best Practices for more information about heading nesting and how to locate headings.

Print Article