Add underscore as an alt text antipattern (#12119)

client/src/includes/a11y-result.test.ts

@@ -93,13 +93,14 @@ describe('addCustomChecks', () => {
 
 // Options for checkImageAltText function
 const options = {
-  pattern: '\\.(avif|gif|jpg|jpeg|png|svg|webp)$',
+  pattern: '\\.(avif|gif|jpg|jpeg|png|svg|webp)$|_',
 };
 
 describe.each`
   text                                                | result
   ${'Good alt text with words like GIFted and motif'} | ${true}
   ${'Bad alt text.png'}                               | ${false}
+  ${'Bad_alt_text'}                                   | ${false}
   ${''}                                               | ${true}
 `('checkImageAltText', ({ text, result }) => {
   const resultText = result ? 'should not be flagged' : 'should be flagged';

client/src/includes/a11y-result.ts

@@ -74,7 +74,7 @@ export const getAxeConfiguration = (
 
 /**
  * Custom rule for checking image alt text. This rule checks if the alt text for images
- * contains poor quality text like file extensions.
+ * contains poor quality text like file extensions or undescores.
  * The rule will be added via the Axe.configure() API.
  * https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure
  */

docs/advanced_topics/accessibility_considerations.md

@@ -142,7 +142,7 @@ By default, the checker includes the following rules to find common accessibilit
 -   `input-button-name`: `<input>` button elements must always have a text label.
 -   `link-name`: `<a>` link elements must always have a text label.
 -   `p-as-heading`: This rule checks for paragraphs that are styled as headings. Paragraphs should not be styled as headings, as they don’t help users who rely on headings to navigate content.
--   `alt-text-quality`: A custom rule ensures that image alt texts don't contain anti-patterns like file extensions.
+-   `alt-text-quality`: A custom rule ensures that image alt texts don't contain anti-patterns like file extensions and underscores.
 
 To customize how the checker is run (such as what rules to test), you can define a custom subclass of {class}`~wagtail.admin.userbar.AccessibilityItem` and override the attributes to your liking. Then, swap the instance of the default `AccessibilityItem` with an instance of your custom class via the [`construct_wagtail_userbar`](construct_wagtail_userbar) hook.
 

docs/releases/6.2.md

@@ -13,7 +13,7 @@ depth: 1
 
 ### Alt text accessibility check
 
-The [built-in accessibility checker](authoring_accessible_content) now enforces a new `alt-text-quality` rule, which tests alt text for the presence of known bad patterns such as file extensions. This rule is enabled by default, but can be disabled if necessary.
+The [built-in accessibility checker](authoring_accessible_content) now enforces a new `alt-text-quality` rule, which tests alt text for the presence of known bad patterns such as file extensions and underscores. This rule is enabled by default, but can be disabled if necessary.
 
 This feature was implemented by Albina Starykova, with support from the Wagtail accessibility team.
 

wagtail/admin/tests/test_userbar.py

@@ -347,7 +347,7 @@ class TestAccessibilityCheckerConfig(WagtailTestUtils, TestCase):
             axe_custom_checks = [
                 {
                     "id": "check-image-alt-text",
-                    "options": {"pattern": "\\.[a-z]{1,4}$"},
+                    "options": {"pattern": "\\.[a-z]{1,4}$|_"},
                 },
             ]
 
@@ -402,7 +402,7 @@ class TestAccessibilityCheckerConfig(WagtailTestUtils, TestCase):
                     "checks": [
                         {
                             "id": "check-image-alt-text",
-                            "options": {"pattern": "\\.[a-z]{1,4}$"},
+                            "options": {"pattern": "\\.[a-z]{1,4}$|_"},
                         },
                         {
                             "id": "check-link-text",

wagtail/admin/userbar.py

@@ -84,7 +84,7 @@ class AccessibilityItem(BaseItem):
     axe_custom_checks = [
         {
             "id": "check-image-alt-text",
-            "options": {"pattern": "\\.(avif|gif|jpg|jpeg|png|svg|webp)$"},
+            "options": {"pattern": "\\.(avif|gif|jpg|jpeg|png|svg|webp)$|_"},
         },
     ]