Page must not have more than one banner landmark
How to Fix the Problem
Ensure that individual HTML pages have only banner landmark.
Decide which banner landmark you want to keep and remove any other banner landmarks.
role="banner" ARIA landmark should only appear once on an element that is unique to the HTML document even though the HMTL5 specification allows multiple instances of an equivalent
header landmark value. It is appropriate in most web designs to have only one banner landmark whether it is specified using ARIA or HTML5.
Why it Matters
Landmarks allow blind users to navigate and find content quickly. Missing landmarks require screen reader users to sort through too much extra information to find anything.
JAWS, NVDA, and VoiceOver support the ability to navigate to sections of a web page using ARIA landmarks. Landmarks provide a more elegant solution to the problem of providing a way for users to skip to the main content of the web page. There is no visible alteration to the web design, making it unobtrusive and invisible. Of course, the fact that this technique is invisible is fine for blind screen reader users, but not so fine for sighted keyboard users or screen enlarger users with low vision. In this sense, HTML 5 regions and ARIA landmarks cannot yet replace the old-fashioned "skip navigation" links. Browsers still do not have a built-in way to notify users that HTML 5 regions or ARIA landmarks are present. Screen reader users are the only ones who can take advantage of them. There is a Firefox ARIA landmark extension available, which adds the ability to navigate by landmarks in Firefox, but this is not a native feature of the browser.
Ensures the page has at most one banner landmark.
The Algorithm (in simple terms)
This rule finds all banner landmarks, filters out any landmarks that do not map their role, and verifies that there is no more than one.