Skip to content

Draft: Adds a Vale rule for alt text

Lysanne Pinto requested to merge lp-docs-alt-text-vale-rule into master

What does this MR do and why?

This MR adds a warning-level Vale rule that looks for images that don't have alt text to align with our style guide.

Regex: (?<!\[[^\]]+\])\(img/.+\.png\)

  • Finds a string matching (img/.png)
  • But ONLY if it is not preceded by a string matching the pattern [some text]
  • The [some text] is required to have at least one character between the brackets

^This regex will match (img/.png) strings, but only if they do not have an image link with alt text preceding them.

regex breakdown

Negative Lookbehind: (?<!\[[^\]]+\])

This is a negative lookbehind assertion. It means:

  • (?<! - Start of negative lookbehind (asserts what follows does NOT match)
  • [^]]+ - Match one or more characters that are not a closing bracket
  • ] - Match a closing bracket
  • ) - End of lookbehind assertion

So essentially, this lookbehind checks that what precedes DOES NOT match a string that looks like [some text]. By having the + quantifier after the character class, it requires at least one character between the brackets.

Main Match: \(img/.+\.png\)

This matches the actual (img/.png) pattern:

  • (img/ - Literal text
  • .+ - Match any character one or more times
  • \ - Escape period to match literal .
  • png - Literal text
  • ) - Closing parenthesis

Vale studio examples: https://studio.vale.sh/s/e56baea1bc2bbef9e0a4c4de03302e54

Relates to: Add alt text guidelines for images (!156901 - merged)

Edited by Lysanne Pinto

Merge request reports