In #1329786: JS refactoring, we helped with screen reader compatibility by using D7's new "element-invisible" class. This makes it so when screen readers encounter an external link, they announce it. However, the message currently read is "External Links icon". A more helpful description would be something like "link is external", so it describes the significance of the icon instead of describing that it is an icon.
In addition, we're currently using invalid HTML, placing a DIV inside a SPAN. We should use a span for the invisible element.
And lastly, screen readers can't announce links as external unless the icon is part of the link. If we move the icon to inside the link, this both announces links when they're selected and it makes them clickable, as requested in #544074: Extlink Icon clickable link.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | extlink_screen_readers-2255295.patch | 3.11 KB | quicksketch |
Comments
Comment #1
quicksketchThis patch addresses all the above issues:
- Moves icon inside of link so it receives focus and is read by screen readers.
- Switches the invisible element to use a span instead of a div.
- Replaces the screen reader message with reasonable descriptions.
Some comments on the approach:
- This uses variables to get the message, allowing users to change it via settings.php if the really desire to customize it. In addition, passing the message via Drupal.settings saves locale module the work of parsing and replacing the Drupal.t() calls.
- I also added a small amount of CSS so the icon doesn't end up with an underline.
Comment #2
quicksketchActual patch...
Comment #3
quicksketchPushed to the 7.x-1.x branch.
Comment #6
quicksketchSilly testbot.
Comment #7
roball commentedUnfortunately, this commit has introduced the bug #2257023: Images linking to an external link ALWAYS have the "external link" icon displayed.
Comment #8
elachlan commentedThanks for the report. The patch will need to be reworked.
Comment #10
elachlan commented