Two <footer> elements
← Return to main list
This test case is designed to determine how two root-level <footer> elements are announced by various screen readers.
In this case, both elements should be announced as a contentinfo landmarks.
By default, the element being tested does not receive focus, so the only way to test how it is announced is via:
- VoiceOver: Announce next item: VO + Right Arrow
- NVDA and JAWS: Announce next line: DOWN ARROW
Example
Code
<footer>
<h4>Test content 1</h4>
</footer>
<footer>
<h4>Test content 2</h4>
</footer>
Assistive technologies
VoiceOver
- Chrome:
Footer. [Stop] Heading level 4. Test content 1. [Stop]. End of footer.
Footer. [Stop] Heading level 4. Test content 2. [Stop]. End of footer.
- Firefox:
Content. [Stop] Heading level 4. Test content 1. [Stop]. End of content.
Content. [Stop] Heading level 4. Test content 2. [Stop]. End of content.
- Safari:
Content information. [Stop] Heading level 4. Test content 1. [Stop]. End of content information.
Content information. [Stop] Heading level 4. Test content 2. [Stop]. End of content information.
NVDA
- Chrome:
Contentinfo landmark. Heading level 4. Test content 1.
Contentinfo landmark. Heading level 4. Test content 2.
- Firefox:
Contentinfo landmark. Heading level 4. Test content 1.
Contentinfo landmark. Heading level 4. Test content 2.
- Edge:
Contentinfo landmark. Heading level 4. Test content 1.
Contentinfo landmark. Heading level 4. Test content 2.
JAWS
- Chrome:
Heading level 4. Test content 1. [Footer not announced]
Heading level 4. Test content 2. [Footer not announced]
- Firefox:
Heading level 4. Test content 1. [Footer not announced]
Heading level 4. Test content 2. [Footer not announced]
- Edge:
Heading level 4. Test content 1. [Footer not announced]
Heading level 4. Test content 2. [Footer not announced]
← Return to main list