makeup-screenreader-trap demo
Activate any button to hide all other elements on screen from screen reader.
For demo purposes, elements with aria-hidden="true" are visually marked with strikethrough.
sibling before trap
sibling after trap
sibling before trap
sibling before trap
sibling after trap
sibling after trap
uncle before trap
sibling before trap
sibling after trap
uncle after trap
uncle before trap
uncle before trap
sibling before trap
sibling before trap
sibling after trap
sibling after trap
uncle after trap
uncle after trap
sibling before trap
sibling after trap
great uncle before trap
uncle before trap
sibling before trap
sibling after trap
uncle after trap
great uncle after trap
great-great uncle before trap
great uncle before trap
uncle before trap
sibling before trap
sibling after trap
uncle after trap
great uncle after trap
great uncle after trap
Has two visibly hidden elements (using hidden property) before and after button:
hidden sibling before trap
hidden sibling after trap
Has two visible SVG elements before and after button:
Has two visibly hidden SVG elements (using hidden property) before and after button: