External links aren't using properly the aria-label, so assistive technology browsers aren't reading properly the label. This is an accessibility issue that is raised by automatic testing tools like e.g. Lighthouse.
Add a external link. Check the Lighthouse tab in Google Chrome.
#0 proposes removing the aria-label.
#4 proposes moving aria-label into link wrapping element and adding role=img and aria-hidden=true to icon span.
Decide which one works best.
None for visual browsers.
Corrected screen reader (i.e. VoiceOver in this case) for assistive technology browsers.
None.
None.
Users of screen readers and other assistive technologies get information by HTML code like label or aria attributes. If the HTML tag and attributes doesn’t match, screen reader will not be able to get the correct information. And users will be confused and feel difficulty in viewing our site.
Show commandsStart 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:
changes
Comments
Comment #2
morganlyndel commentedI tested this patch on an environment that had previously been receiving the "`[aria-*]` attributes do not match their roles" error and confirm that this error went away once the patch was applied.
Steps to test:
Thank you!
Comment #3
chris matthews commentedComment #4
pivica commentedChecked related documentation for this. Removing aria-label will fix this issue, but information in that label is lost, and it is not used at all any more. So if we want to go this route then we should also remove extlink_label and extlink_mailto_label configurations.
Instead of this we can move aria-label to link wrapper, as suggested in section 'aria-label in links'.
Then for font icons we should use role="img" and aria-hidden="true" as suggested in 'Simple approach' and 'Visual but accessible icon' and Semantically identifying a font icon with role="img".
With this new approach the assistive technology browser will ignore the icon and will read the link like "link Drupal link is external".
Instead of moving aria-label to a link tag, we could also leave it in a span, add a new span and hide it with visually-hidden CSS rule. For me aria-label looks as a more elegant solution.
Here is a patch with a new approach.
Comment #5
smustgrave commentedCan the issue summary be updated using standard template.
Comment #6
smustgrave commentedNeed an issue summary update to understand what's being fixed exactly.
Comment #7
smustgrave commentedComment #8
penyaskitoRe-opening and did my best with issue summary. This is still an issue, and we have been using patch at #0 in production for a long time.
Comment #9
penyaskitoComment #10
katannshaw commentedAdded "Related WCAG success criteria and techniques" to issue description to provide context and clarity.
Comment #11
pivica commentedComment #12
pivica commentedUpdated patch from #4 against latest 2.0.x-dev. There were quite a few changes from 8.x-1.x-dev JS version of the code. I've also reused `drupalSettings.data.extlink.extHideIcons` option for aria-hidden value as the code is already doing it for embedded images.
Attaching also patch version for 2.0.0-beta1 version so we can use this with composer build easily.
Comment #13
smustgrave commentedChanges should be in MRs please
Comment #15
pivica commentedComment #16
pivica commentedMR created.
Comment #18
smustgrave commentedComment #21
pivica commentedSorry, needs to reopen this because I introduced a small bug in previous MR. There is a double quote bug for a tel element on line 362:
iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaTelClasses}" data-extlink-placement="${iconPlacement}""></span>`;New MR !35 should fix this.
Also attaching a updated patch for 2.0.0-beta1.
Comment #22
smustgrave commented