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.

CommentFileSizeAuthor
#13 extlink-aria-label-3182802-13.patch1.27 KBmadhaze
#9 3182802-aria-label-for-external-9.patch1.17 KBhenry.odiete
accesibility-error.png640.39 KBprogrammerdiego

Issue fork extlink-3182802

Command icon 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:

About issue forks

Comments

programmerdiego created an issue. See original summary.

programmerdiego’s picture

programmerdiego commented
Issue summary: View changes
programmerdiego’s picture

programmerdiego commented
Issue summary: View changes
programmerdiego’s picture

programmerdiego commented
Issue summary: View changes
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Version: 8.x-1.1 » 8.x-1.x-dev
Issue tags: -error
programmerdiego’s picture

programmerdiego commented
Issue summary: View changes
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Issue summary: View changes
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Issue summary: View changes
henry.odiete’s picture

henry.odiete commented
StatusFileSize
new 3182802-aria-label-for-external-9.patch1.17 KB

Patch provided to fix issue, adds role="img" and aria-hidden="true"

henry.odiete’s picture

henry.odiete commented
Status: Active » Needs review
henry.odiete’s picture

henry.odiete commented
Issue tags: +Needs accessibility review
pr1859’s picture

pr1859 commented

Update aria-label="(new window)", resolved accessibility issue for us on LevelAccess tools Access Assistant/Continuum

madhaze’s picture

madhaze commented
StatusFileSize
new extlink-aria-label-3182802-13.patch1.27 KB

When 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.

jbaum_13’s picture

jbaum_13 commented

When I tried #13 it did work however it broke the font awesome icons used to show external links and mailto links.

tlo405’s picture

tlo405 commented
Status: Needs review » Reviewed & tested by the community

I'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.

herved’s picture

herved commented

Oh 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-only class 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.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Reviewed & tested by the community » Needs work

Could someone please provide this as merge request? What about #16?

douggreen opened merge request !17

douggreen made their first commit to this issue’s fork.

douggreen closed merge request !17

douggreen’s picture

douggreen commented

I created MR https://git.drupalcode.org/project/extlink/-/merge_requests/18 so I'm removing the patch attachments from this, to avoid confusion.

douggreen opened merge request !18

douggreen’s picture

douggreen commented

There 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.

smustgrave’s picture

smustgrave commented
Status: Needs work » Postponed (maintainer needs more info)

Is this not a duplicate of #3378557: Fix Font Awesome markup and CSS ?

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

If still valid for 2.0.x please reopen but going to close out for now.

smustgrave closed merge request !18