A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

Any section of the document that supports but is separable from the main content, but is meaningful on its own even when separated from it. Contents such as advertisements on the page are marked as complementary landmarks. HTML 5 aside tag does the same work that complementary role does. 

There are various types of content that would appropriately have this role. For example, in the case of a portal, this may include but not be limited to show times, current weather, related articles, or stocks to watch. The complementary role indicates that contained content is relevant to the main content. If the complementary content is completely separable main content, it may be appropriate to use a more general role.

User agents should treat elements with the role of complementary as navigational landmarks. Screen readers have good support with complementary landmark and will announce the beginning and end of the landmark.

Syntax

<div role="complementary"> </div>