Socket
Socket
Sign inDemoInstall

@double-great/remark-lint-link-text

Package Overview
Dependencies
14
Maintainers
2
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @double-great/remark-lint-link-text

A remark-lint plugin that warns against non-descriptive link text.


Version published
Maintainers
2
Install size
406 kB
Created

Readme

Source

Current version License

A remark-lint plugin that warns against non-descriptive link text.

✅ Check out [W3C’s Web Accessibility Initiative](https://www.w3.org/WAI) to learn more.
🚫 Learn more [here](https://www.w3.org/WAI).

Installation and usage

npm install --save-dev remark-cli @double-great/remark-lint-link-text

Add the plugin to your remark configuration:

"remarkConfig": {
  "plugins": [
    "@double-great/remark-lint-link-text"
  ]
},

List of warnings

Pulling from this library’s list of bad link text, any link text that matches this list will be flagged. Using non-specific link text is a failure of WCAG 2.4.9 (AAA).

🚫 The following markdown will cause a warning:

- [click here](https://example.com/team)

✅ The following markdown will not cause a warning:

- [Example team](https://example.com/team)

Configuration:

// disable the rule:
["@double-great/remark-lint-link-text", [1, {"not-descriptive":false}]]
// adjust rule defaults:
["@double-great/remark-lint-link-text", [1, {"not-descriptive":["about","button","can be found here","click","click here","continue","continue reading","details","email","figure","found here","here","learn more","link","more","more details","more here","online","read more","resource","the article","the document","the entry","the link","the page","the post","the site","the website","this article","this document","this entry","this link","this page","this post","this site","this website","url","website"]}]]

💡 For all banned phrases that begin with this or the, any words that come between will also fail. For example “this post”, “this W3C post”, and “this W3C blog post” will all fail.

This warning relates to WCAG 2.4.9 Link Purpose (Link Only) (AAA) and WCAG 3.2.4 Consistent Navigation (AA). Links with different purposes and destinations should have different link text. Descriptive link text communicates a link’s purpose even when the context is missing. A screen reader listing all of the links on a page is an example where the context would be missing.

🚫 The following markdown will cause a warning:

- [Example](https://example.com/team)
- [Example](https://example.com/about)

✅ The following markdown will not cause a warning:

- [Example team](https://example.com/team)
- [About Example](https://example.com/about)

Configuration:

// disable the rule:
["@double-great/remark-lint-link-text", [1, {"unique":false}]]

💡 This check does not account for techniques that use aria-label or aria-labelledby attributes to provide additional link context. Context provided by content that surrounds the link, as allowed by WCAG 2.4.4 Link Purpose (In Context) (A), is not considered by this check.

WCAG 2.4.4 Link Purpose (In Context) (A) considers a link containing text that gives a description of the information at that URL a sufficient technique. When a URL is the link text, screen readers have to listen while the reader pronounces every single character of a URL. Audibly, this is less descriptive and more time consuming to listen to than descriptive link text. WebAIM’s Links and Hypertext page explains the challenges of URLs as links.

🚫 The following markdown will cause a warning:

[https://www.w3c.org/WAI/fundamentals/accessibility-intro/](https://www.w3c.org/WAI/fundamentals/accessibility-intro/)

When read aloud, users will hear “h t t p s colon slash slash w w w dot w 3 c dot org slash w a i slash fundementals slash accessibility dash intro slash, link”.

✅ The following markdown will not cause a warning:

[Introduction to Web Accessibility](https://www.w3c.org/WAI/fundamentals/accessibility-intro/)

When read aloud, users will hear “Introduction to Web Accessibility, link”.

Configuration:

// disable the rule:
["@double-great/remark-lint-link-text", [1, {"not-url":false}]]

💡 This check is at odds with some stylistic guidelines, like APA. The APA Style’s Accessible URLs page provides some rationale for their guidelines as it relates to WCAG 2.4.4.

In markdown, missing link text is often an oversight. Although an <a> element without a href attribute is valid HTML, WebAIM suggests that empty links can be very confusing to keyboard and screen reader users and should be avoided completely.

🚫 The following markdown will cause a warning:

[](https://example.com)

✅ The following markdown will not cause a warning:

[Example](https://example.com)

Configuration:

// disable the rule:
["@double-great/remark-lint-link-text", [1, {"empty":false}]]

Linked image is missing alt text

When an image is the only content in a link, alt text is required. In this context, missing alt text is a failure of WCAG 2.4.4 (A), 2.4.9 (AAA), and 4.1.2 (A).

🚫 The following markdown will cause a warning:

[![](https://example.com/logo.svg)](https://example.com)

✅ The following markdown will not cause a warning:

[![Example logo](https://example.com/logo.svg)](https://example.com)

Configuration:

// disable the rule:
["@double-great/remark-lint-link-text", [1, {"empty-alt-text":false}]]

💡 When an image is the only content in a link, the image’s alt text effectively becomes the link text. Based on WCAG 2.4.4 Link Purpose (In Context) (A), the alt text should describle the function of the link (instead of describing the image).

When linking to an email address, using mailto:, the email address should be in the link text. This provides users with context for what will happen when interacting with the link (a new email message will open in email application). Also, email in the link text is useful context when the link can’t be activated (plain text paste, printed page).

🚫 The following markdown will cause a warning:

[Email me](mailto:email@example.com)

✅ The following markdown will not cause a warning:

[email@example.com](mailto:email@example.com)
[otheremail@example.com](mailto:otheremail@example.com?subject=hello)

Configuration:

// disable the rule:
["@double-great/remark-lint-link-text", [1, {"email":false}]]

Keywords

FAQs

Last updated on 07 Dec 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc