Here’s an accessibility tip that’s new to me. When the content of a heading, anchor, or other semantic HTML element contains smaller “chunks” of
em (etc), the VoiceOver screen reader on Mac and iOS annoyingly fails to announce the content as a single phrase and instead repeats the parent element’s role for each inner element. We can fix that by adding an inner “wrapper” element inside our parent and giving it
Make sure not to add this role directly to your parent element since it will override its original role causing it to lose its intended semantics.
text role is not yet in the official ARIA spec but is supported by Safari.
(via @Seraphae and friends on Twitter)