{"id":1478,"date":"2025-01-02T14:08:31","date_gmt":"2025-01-02T14:08:31","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1478"},"modified":"2025-01-03T10:24:59","modified_gmt":"2025-01-03T10:24:59","slug":"super-short-note-on-links-in-ios-with-voiceover","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2025\/01\/02\/super-short-note-on-links-in-ios-with-voiceover\/","title":{"rendered":"super short note on links in iOS with VoiceOver"},"content":{"rendered":"
\n
\"Patrick
Preston Grim<\/figcaption><\/figure><\/blockquote>\n

I have been doing some testing and have noticed when navigating links on iOS using VoiceOver (VO), if the link contains an element that is not exposed as a generic element it causes VO to treat and announce text in the link as separate links.<\/p>\n

Example<\/h2>\n

The link in the example is announced as 3 links it is also counted in the rotor as 3 links.
\n“Elements with a”, “generic”, and “role are ignored”<\/p>\n

<a href=\"#\">Elements with a <code>generic<\/code><\/mark> \r\nrole are ignored<\/a><\/pre>\n
When marked up with an element with an implicit or explicit generic role VO reports the correct number of links via the rotor<\/p>\n
This can be avoided by using an element with a generic<\/a> element such as a <span><\/code>but this appears a little flaky so addition of role=\"none\"<\/code> is suggested.<\/p>\n
<a href=\"#\">Elements with a <span>generic<\/span><\/mark> \r\nrole are ignored<\/a>\r\n\r\n<a href=\"#\">Elements with a <span role=\"none\"<\/mark>>generic<\/span>\r\nrole are ignored<\/a><\/pre>\n
or adding role=\"none\"<\/code> to the non-generic<\/em> element, which exposes it in the accessibility tree as generic<\/a><\/p>\n
<a href=\"#\">Elements with a <code role=\"none\u201d<\/mark>>generic<\/code> \r\nrole are ignored<\/a><\/pre>\n
Try it for yourself<\/h2>\n
See the Pen 
\nUntitled<\/a> by steve faulkner (@stevef<\/a>)
\non CodePen<\/a>.<\/p>\n