How Do Disabled Links Report?

• Regular link: a regular link to Microsoft
• Link with stand-alone disabled attribute: a disabled link to Microsoft
• Link with aria-disabled attribute: a aria-disabled link to Microsoft
• Link missing the href and with stand-alone disabled attribute: a broken and disabled link
• Link missing the href and aria-disabled attribute: a broken and aria-disabled link
• A faux disabled link/span, role link and aria-disabled: a aria-disabled role link span
• A faux disabled link/span, role link and aria-disabled, no tabindex: a aria-disabled role link span with no tabindex
• A faux disabled link/span, role link and aria-disabled with aria-hidden spans to create some pipes on either side of the link (tabindex is -1): | a aria-disabled role link span with pipes |

And a faux disabled link buried in a long chunk of text that wraps multiple lines, so that we can try to make sure that screen readers will still enounter the link and report on its disabled status. So here is that thing with a tabindex of -1 with a super light color to make it more annoying. Is the dumb thing surfable? Can I get to it in the screen reader and does it report as what it's supposed to report as? Well??

Results Summary

• Links missing the href are not tab focusable and (in the case of the one with stand-alone disabled attribute) are not reported as link elements.
• Links with the stand-alone disabled attribute, an attribute which effectively disables form elements, are marked by the HTML validator as proprietary — that is, the usage is unrecognized within the standard.
• The faux link, with just the ARIA semantics in place and a tabindex to make it focusable, reports as a disabled link and has the necessary semantics.
• The faux link, with just the ARIA semantics in place without tabindex appears as nothing at all with Android Talkback. So don't forget the tabindex, either 0 or -1.

Conclusion: It may be useful to have a link that reports as disabled and goes nowhere. The best/lightest way to do this is use the faux link technique.

Caveats: Links tend to be used in context of other text. Whereas WCAG recommendations are met even if typical disabled/inactive form components do not have adequate color contrast, links should always maintain contrast of 4.5:1 against their background, in order to be legible within the context of surrounding text. Additionally, we should remove their ability to be tabbable, like we do with other disabled elements. But note the last point in the list: keep a tabindex but make it -1.