What
Landmarks are areas marked in a website. These are inserted into the page using the role attribute on an element that marks the section. The value of the attribute is the name of the landmark.
The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.
Why
Landmarks help assistive technology (AT) users orient themselves to a page and help them navigate easily to the various sections of a page.
They also provide an easy way for users of assistive technology to skip over blocks of content that are repeated on multiple pages and notify them of programmatic structure of a page.
How
These role values are listed below:
Banner - A region that contains the prime heading or internal title of a page.
Complementary - Any section of the document that supports the main content, yet is separate and meaningful on its own.
Contentinfo - A region that contains information about the parent document such as copyrights and links to privacy statements.
Form - A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
Main - Main content in a document. In almost all cases a page will have only one role="main".
Navigation - A collection of links suitable for use when navigating the document or related documents.
Search - The search tool of a Web document.
Application - A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)
