Elements must use only ARIA attributes allowed for their ARIA role.

[mgifford]

There are 21 instances of this error on this page - https://www.section508.gov/create/accessible-meetings/

This is a WCAG 4.1.2 issue based on an Accessibility Insights review.

Similar "(link is external)" link here:
https://www.section508.gov/training-home/

And with similar "(link is external)" links here:
https://www.section508.gov/contact-us/

Title: WCAG 4.1.2: Ensures ARIA attributes are allowed for an element's role (span[aria-label="(link\ is\ external)"])
Tags: Accessibility, WCAG 4.1.2, aria-allowed-attr

Issue: Ensures ARIA attributes are allowed for an element's role (aria-allowed-attr - https://accessibilityinsights.io/info-examples/web/aria-allowed-attr)

Target application: Create Accessible Meetings | Section508.gov - https://www.section508.gov/create/accessible-meetings/

Element path: ul:nth-child(12) > li[dir="ltr"]:nth-child(3) > .ext > span[aria-label="(link\ is\ external)"]

Snippet: <span class="ext" aria-label="(link is external)"></span>

How to fix:
Fix all of the following:
ARIA attribute cannot be used, add a role attribute or use a different element: aria-label

Environment: Chrome version 94.0.4606.61

====

This accessibility issue was found using Accessibility Insights for Web 2.29.0 (axe-core 4.3.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

[mgifford]

This can be fixed here:

https://github.com/GSA/Section508.gov/blob/main/_pages/create/create-accessible-meetings.md

Other instances here:
https://github.com/GSA/Section508.gov/search?q=%22%28link+is+external%29%22

[drewnielson]

Mike, I'm a bit confused by the error that Accessibility Insights is throwing - seeming to indicate that aria-label is not an allowed attribute for a span element. However, aria-label is a global aria property <https://www.w3.org/TR/wai-aria-1.1/#global_states>, which can be applied to any html element. Am I misunderstanding the point of the error?

…

On Mon, Nov 22, 2021 at 8:20 PM Mike Gifford ***@***.***> wrote: This can be fixed here: https://github.com/GSA/Section508.gov/blob/main/_pages/create/create-accessible-meetings.md Other instances here: https://github.com/GSA/Section508.gov/search?q=%22%28link+is+external%29%22 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#199 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG5YWY6RJKTYR5SYRB2VIZDUNLT7XANCNFSM5ISLGUJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[mgifford]

Hope you’re had a good break Andrew, This is right from: Accessibility Insights - aria-allowed-attr <https://accessibilityinsights.io/info-examples/web/aria-allowed-attr/> Elements must only use allowed ARIA attributes Axe Rules | Deque University | Deque Systems <https://dequeuniversity.com/rules/axe/4.1/aria-allowed-attr?application=axeAPI> The complain is about: <a href="https://www.federalrelay.us" class="ext">Federal Relay<span class="ext" aria-label="(link is external)"></span></a> I think this will accomplish the same thing and is simpler: <a href="https://www.federalrelay.us" class=“ext" aria-label="(link is external)">Federal Relay</a> Simpler still: <a href="https://www.federalrelay.us" class=“ext" aria-label=“External link">Federal Relay</a> I haven’t seen this pattern before, so would hesitate to recommend it: <span class="ext" aria-label="(link is external)"></span> I can’t find another instance in the W3C that is using this pattern or suggesting anything like it: ACCESSIBLE LINKS: When to Use aria-label | (accessiblewebsiteservices.com) <https://accessiblewebsiteservices.com/accessible-links-when-to-use-aria-labels/> ARIA7: Using aria-labelledby for link purpose | Techniques for WCAG 2.0 (w3.org) <https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160628/ARIA7> WebAIM: Decoding Label and Name for Accessibility <https://webaim.org/articles/label-name/> I haven’t done the testing to verify where this fails with accessibility. For me it seems to be more complicated HTML for no real gain. If the goal is to alert people that they will be visiting an external link, there are simpler ways to do this. Section 508 should be setting up a simple pattern going ahead as people will emulate it. Is this a best-practice approach for the government? I looked at the code, but couldn’t find a good way to identify what rule is triggering it https://github.com/dequelabs/axe-core/search?q=aria-allowed-attrtype=code <https://github.com/dequelabs/axe-core/search?q=aria-allowed-attr&type=code> Looking at the issue though, I came to this “This should be out in the latest version 4.3.1. aria-label is not allowed on div elements <https://www.w3.org/TR/wai-aria-1.2/#generic> in ARIA 1.2 as they are prohibited attributes and screen readers do not announce the value <https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/> ." dequelabs/axe-core#2933 (comment) Short note on aria-label, aria-labelledby, and aria-describedby - TPGi <https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/> - From Léonie Watson, “If you use aria-label, aria-labelledby, or aria-describedby with any other elements (like div, span, p, blockquote, or strong etc.), they generally won’t work across all browser/assistive technology combinations." I can’t get any more detail than that, but there are simpler, safer alternatives. Mike Mike Gifford, Senior Strategist, CivicActions Drupal Core Accessibility Maintainer http://twitter.com/mgifford | http://linkedin.com/in/mgifford On November 23, 2021 at 9:10:48 AM, Andrew Nielson ***@***.***) wrote: Mike, I'm a bit confused by the error that Accessibility Insights is throwing - seeming to indicate that aria-label is not an allowed attribute for a span element. However, aria-label is a global aria property <https://www.w3.org/TR/wai-aria-1.1/#global_states>, which can be applied to any html element. Am I misunderstanding the point of the error?

On Mon, Nov 22, 2021 at 8:20 PM Mike Gifford ***@***.***> wrote: This can be fixed here:

https://github.com/GSA/Section508.gov/blob/main/_pages/create/create-accessible-meetings.md

Other instances here:

https://github.com/GSA/Section508.gov/search?q=%22%28link+is+external%29%22

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#199 (comment)>, or unsubscribe <

https://github.com/notifications/unsubscribe-auth/AG5YWY6RJKTYR5SYRB2VIZDUNLT7XANCNFSM5ISLGUJQ

. Triage notifications on the go with GitHub Mobile for iOS <

https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675

or Android <

https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#199 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA4QYFENOEF62WDZMXIUR3UNOOGRANCNFSM5ISLGUJQ> .

[drewnielson]

Thanks Mike. Yes, agreed on all points - definitely worthwhile to make it more straightforward, and we should be providing a better example. This issue (among others) is a byproduct of the US Web Design System. I'll need to dig into the USWDS javascript/css combination to see where they are adding the span and icon to indicate an external link. On Mon, Nov 29, 2021 at 1:58 PM Mike Gifford ***@***.***> wrote:

…

Hope you’re had a good break Andrew, This is right from: Accessibility Insights - aria-allowed-attr <https://accessibilityinsights.io/info-examples/web/aria-allowed-attr/> Elements must only use allowed ARIA attributes Axe Rules | Deque University | Deque Systems < https://dequeuniversity.com/rules/axe/4.1/aria-allowed-attr?application=axeAPI > The complain is about: <a href="https://www.federalrelay.us" class="ext">Federal Relay<span class="ext" aria-label="(link is external)"></span></a> I think this will accomplish the same thing and is simpler: <a href="https://www.federalrelay.us" class=“ext" aria-label="(link is external)">Federal Relay</a> Simpler still: <a href="https://www.federalrelay.us" class=“ext" aria-label=“External link">Federal Relay</a> I haven’t seen this pattern before, so would hesitate to recommend it: <span class="ext" aria-label="(link is external)"></span> I can’t find another instance in the W3C that is using this pattern or suggesting anything like it: ACCESSIBLE LINKS: When to Use aria-label | (accessiblewebsiteservices.com) < https://accessiblewebsiteservices.com/accessible-links-when-to-use-aria-labels/ > ARIA7: Using aria-labelledby for link purpose | Techniques for WCAG 2.0 (w3.org) <https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160628/ARIA7> WebAIM: Decoding Label and Name for Accessibility <https://webaim.org/articles/label-name/> I haven’t done the testing to verify where this fails with accessibility. For me it seems to be more complicated HTML for no real gain. If the goal is to alert people that they will be visiting an external link, there are simpler ways to do this. Section 508 should be setting up a simple pattern going ahead as people will emulate it. Is this a best-practice approach for the government? I looked at the code, but couldn’t find a good way to identify what rule is triggering it https://github.com/dequelabs/axe-core/search?q=aria-allowed-attrtype=code < https://github.com/dequelabs/axe-core/search?q=aria-allowed-attr&type=code > Looking at the issue though, I came to this “This should be out in the latest version 4.3.1. aria-label is not allowed on div elements <https://www.w3.org/TR/wai-aria-1.2/#generic> in ARIA 1.2 as they are prohibited attributes and screen readers do not announce the value < https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ > ." dequelabs/axe-core#2933 (comment) Short note on aria-label, aria-labelledby, and aria-describedby - TPGi < https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ > - From Léonie Watson, “If you use aria-label, aria-labelledby, or aria-describedby with any other elements (like div, span, p, blockquote, or strong etc.), they generally won’t work across all browser/assistive technology combinations." I can’t get any more detail than that, but there are simpler, safer alternatives. Mike Mike Gifford, Senior Strategist, CivicActions Drupal Core Accessibility Maintainer http://twitter.com/mgifford | http://linkedin.com/in/mgifford On November 23, 2021 at 9:10:48 AM, Andrew Nielson ***@***.***) wrote: Mike, I'm a bit confused by the error that Accessibility Insights is throwing - seeming to indicate that aria-label is not an allowed attribute for a span element. However, aria-label is a global aria property <https://www.w3.org/TR/wai-aria-1.1/#global_states>, which can be applied to any html element. Am I misunderstanding the point of the error? On Mon, Nov 22, 2021 at 8:20 PM Mike Gifford ***@***.***> wrote: > This can be fixed here: > > > https://github.com/GSA/Section508.gov/blob/main/_pages/create/create-accessible-meetings.md > > Other instances here: > https://github.com/GSA/Section508.gov/search?q=%22%28link+is+external%29%22 > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#199 (comment) >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AG5YWY6RJKTYR5SYRB2VIZDUNLT7XANCNFSM5ISLGUJQ > > . > Triage notifications on the go with GitHub Mobile for iOS > < https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 > > or Android > < https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub >. > > — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#199 (comment)>, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AAA4QYFENOEF62WDZMXIUR3UNOOGRANCNFSM5ISLGUJQ > . — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#199 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AG5YWY7IBPHD5VBHKFLEW7DUOPEM3ANCNFSM5ISLGUJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.