Referred HTML Tags
Essential A11y Requirements
<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
1<footer aria-role="contentinfo">2 <!-- Footer Content -->3</footer>
<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.
<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-labelledby attributes so it is unique and its purpose is clear.