When using SVG <g> elements with role="radio" that contain <text> elements as labels, VoiceOver on iOS fails to read the radio button labels correctly. VoiceOver announces the selection state and the element type (radio button) but does not read the label text for each radio button. Steps to reproduce: 1. Open the test page at khsruru.com/div_radio.html on an iOS device 2. Enable VoiceOver 3. Navigate to the SVG radio button group 4. Swipe through the individual radio buttons Expected behavior: VoiceOver should read the label text for each radio button as the user navigates through them, along with its selection state and element type. Actual behavior: VoiceOver announces the selection state (selected or unselected) and the element type (radio button) but does not read the label text for the radio buttons. The user cannot determine which option each radio button represents without visual cues. Test environment: - iOS 17 - Safari (latest version) - VoiceOver enabled Additional notes: This issue appears to be specific to the combination of SVG, <g> elements with role="radio", and <text> elements used as labels. Standard HTML radio buttons with labels work as expected. A video demonstrating this issue has been recorded to provide a clearer understanding of the problem. You can view the video at: https://khsruru.com/wp-content/uploads/2024/06/녹화_2024_06_21_14_15_44_50.mp4 The video shows the VoiceOver behavior when interacting with the SVG radio buttons, clearly demonstrating that the labels are not being read, while the selection state and element type are announced. Potential impact: This issue significantly impacts the accessibility of SVG-based custom radio buttons for VoiceOver users, as they cannot determine the purpose or options of the radio button group without visible text. Please let me know if you need any additional information or clarification on this issue.
<rdar://problem/130264708>