Footer
Referred HTML Tags
<footer>
Essential A11y Requirements
Context
The <footer> element's semantics imply that it should be located at the bottom of its parent element and contains information about it. Examples of traditionally included information in this section of the page include copyrights, links to privacy statements and terms of use, and links to related social media channels.
The <footer> element is considered as a landmark under the one of two conditions:
- In cases that it is on the root level of the document.
- When it has an "aria role" of
contentinfo
1<footer aria-role="contentinfo">2 <!-- Footer Content -->3</footer>
When the <footer> element does not meet at least one of these conditions it is not considered as a landmark. Google chrome for example is registering it as “FooterAsNoneLandmark” and Firefox referring to it simply as a “section”. As an outcome screen readers will not refer to it as a landmark as well. Mac OS VoiceOver, for example, lists it under "articles" on its "Rotor", and announces it generically as a "group". NVDA Ignores it altogether on its elements lists and treats it as a generic <section> when it's reading its content.
However, since the contentinfo role is expected to include information about the entire document, it should be at the document level (e.g., it should not be a child element of another landmark element). There should be no more than one role="contentinfo" element on the same document neither no more than a one <footer> elemin the root level. There is an exception of nesting documents, e.g., <iframe>, where each of the contentinfo elements is in the context of a different document.
It is important to note that the role=" contentinfo" is not limited to be used only with <footer> elements, however, the <footer> context gives it a nice semantic framing since they are considered to be somewhat equivalent by the WAI.
Accessible name
Since the <footer> elements on its contentinfo form are unique on the document, they do not require an accessible name. However if you are using the <footer> element to semantically group elements it will be a good idea to to label it by aria-label or aria-labelledby attributes so it is unique and its purpose is clear.