Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
It is important that the Web be accessible to everyone in order to provide equal access and equal opportunity to people with disabilities.
Steps to reproduce
- Create and publish a node with external links
- Right click on the link created and inspect the element
- View source and look for
<span class="ext" aria-label="(link is external)"> - On the console toolbar, click on Arc Toolkit
- Click on "Run Test" and filter by "Errors"
- The "Aria" section, under "Aria Usage", will report the following error
aria-label=(link is external)tag: SPAN
ariaLabelOnNonInteractiveElement - Error: aria-label is used on an element which does not reliably convey this attribute - Recommend: Put aria-label on an active element or an element with a role defined, or use visually hidden text instead
Proposed resolution
Aria-label should use visually hidden text.
| Comment | File | Size | Author |
|---|---|---|---|
| accesibility-error.png | 640.39 KB | programmerdiego |
Issue fork extlink-3182802
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3182802-aria-label-for-external
changes, plain diff MR !18 - 8.x-1.x changes, plain diff MR !17
Comments
Comment #2
programmerdiego commentedComment #3
programmerdiego commentedComment #4
programmerdiego commentedComment #5
avpadernoComment #6
programmerdiego commentedComment #7
avpadernoComment #8
avpadernoComment #9
henry.odiete commentedPatch provided to fix issue, adds role="img" and aria-hidden="true"
Comment #10
henry.odiete commentedComment #11
henry.odiete commentedComment #12
pr1859 commentedUpdate
aria-label="(new window)", resolved accessibility issue for us on LevelAccess tools Access Assistant/ContinuumComment #13
madhaze commentedWhen using the Font Awesome version. `aria-label` get added to a span with throws an error when tested with multiple accessibility scans do to incompatible aria role.
This patch removes the `aria-label` and adds the external message in a span with the drupal class `visually-hidden` to still have this message available to screen readers and not be flagged in accessibility scans.
Comment #14
jbaum_13 commentedWhen I tried #13 it did work however it broke the font awesome icons used to show external links and mailto links.
Comment #15
tlo405 commentedI'm using a different tool for accessibility scans on my site and #13 fixed the issue. All font awesome icons are still working as well.
Comment #16
herved commentedOh snap, I just found about this issue, after creating #3378557: Fix Font Awesome markup and CSS
I proposed the same there but using FA's
sr-onlyclass and with an aria-hidden on the icon. There is also a CSS issue with FontAwesome (no spacing) which the patch there fixes as well.Comment #17
anybodyCould someone please provide this as merge request? What about #16?
Comment #21
douggreen commentedI created MR https://git.drupalcode.org/project/extlink/-/merge_requests/18 so I'm removing the patch attachments from this, to avoid confusion.
Comment #23
douggreen commentedThere is some overlap (and conflicts) with #3054538: A11y: add screen reader text for external links so I copied this commit from here to there. This can still be merged, if it goes first. Or if that MR goes first, this can be closed.
Comment #24
smustgrave commentedIs this not a duplicate of #3378557: Fix Font Awesome markup and CSS ?
Comment #25
smustgrave commentedIf still valid for 2.0.x please reopen but going to close out for now.