223157 2021-03-13 22:59:54 -0800 AX: VoiceOver announces <details> with visually-hidden text as two separate <details> 2023-02-13 18:51:59 -0800 1 1 1 Unclassified WebKit Accessibility Safari 14 iPhone / iPad iOS 14 NEW InRadar P2 Normal --- 252223 1 carlygerard webkit-unassigned carlygerard webkit-bug-importer oldest_to_newest 1739205 0 carlygerard 2021-03-13 22:59:54 -0800 In Safari on iOS 14.4 in VoiceOver, a <details> element with a nested visually-hidden <span> will announce as two separate <details> elements. The same pattern happens in iOS Firefox and Chrome as well. To test: Use a test page with the following HTML: <details> <summary>Visible text <span class="visually-hidden" role="presentation">with supplemental but visually-hidden text</span> </summary> // details content </details> Visually-hidden CSS if needed: position:absolute; overflow:hidden; clip:rect(1px,1px,1px,1px); // support for IE -webkit-clip-path:inset(50%); clip-path:inset(50%); width:1px; height:1px; word-wrap:normal; white-space:nowrap; Expected announcement by iOS VoiceOver: "Visible text with supplemental but visually-hidden text, collapsed" How it actually announces: "Visible text, collapsed. [swipe right] With supplemental but visually-hidden text, collapsed." Scott O'Hara mentions that with interactive elements, adding role="presentation" to an inner <span class="visually-hidden"> should prevent the multiple cursor/tab stops, under the "Note about using .sr-only within interactive elements" disclosure: https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html. Marking up the inner <span> this way announces the <summary> as expected with macOS VoiceOver on Safari/Chrome, but not yet in iOS VoiceOver. Adding role="presentation" to the inner .visually-hidden <span> also announces <summary> as expected in NVDA with Firefox and Chrome. 1739206 1 webkit-bug-importer 2021-03-13 23:00:03 -0800 <rdar://problem/75402384>