Landmark Should Not Be Contained in Another Landmark

Issue/Question

When I run a Page Check I get one of the following Moderate Problems:

banner landmark should not be contained in another landmark

OR

aside should not be contained in another landmark

OR

contentinfo landmark should not be contained in another landmark

OR

main landmark should not be contained in another landmark

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 additional styles directly on an element on the page that can have an impact on text spacing. Landmarks designate sections of the overall page design and layout and are default included in the templates.  Some landmarks can be created by the WYSIWYG editor or copied and pasted in by accident.  These should not be within the editable content area and need to be updated to another block type or removed. 

Resolution

Identify and update any landmark blocks in your editable content areas by following these steps:

  1. Click  Yellow Light Bulb to check out page.
  2. Click  Edit tab.
  3. Click Edit button on content area where landmark (banner, aside, contentinfo, or main) is located.
  4. Highlight text identified in Source Code section for page check.
  5. In WYSIWYG toolbar, click 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. Landmarks will be labeled with their name.
  6. Click within the landmark block.
  7. Use Blocks dropdown to change landmark block to a Paragraph or Div. These blocks are not landmarks and are allowed in content areas.
  8. Save page.
  9. Click Publish button to run accessibility final check again. Repeat for all landmarks. When the issue is resolved it will no longer display in the accessibility check.