Add more Axe rules to the accessibility checker (#10011)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -7,7 +7,8 @@ Changelog
  * Add `WAGTAILIMAGES_EXTENSIONS` setting to restrict image uploads to specific file types (Aman Pandey, Ananjan-R)
  * Update user list column level to `Access level` to be easier to understand (Vallabh Tiwari)
  * Migrate `.button-longrunning` behaviour to a Stimulus controller with support for custom label element & duration (Loveth Omokaro)
- * Implement new simplified userbar designs (Albinas Starykova)
+ * Implement new simplified userbar designs (Albina Starykova)
+ * Add more Axe rules to the accessibility checker (Albina Starykova)
  * Fix: Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
  * Fix: Adopt a no-JavaScript and more accessible solution for the 'Reset to default' switch to Gravatar when editing user profile (Loveth Omokaro)
  * Fix: Ensure `Site.get_site_root_paths` works on cache backends that do not preserve Python objects (Jaap Roes)

docs/advanced_topics/accessibility_considerations.md

@@ -134,9 +134,14 @@ The checker is based on the [Axe](https://github.com/dequelabs/axe-core) testing
 
 By default, the checker includes the following rules that are among the most common and critical accessibility issues to be violated by editors in Wagtail:
 
+-   `button-name`: `<button>` elements must always have a text label.
 -   `empty-heading`: This rule checks for headings with no text content. Empty headings are confusing to screen readers users and should be avoided.
--   `p-as-heading`: This rule checks for paragraphs that are styled as headings. Paragraphs should not be styled as headings, as this can cause confusion for users who rely on headings to navigate content.
+-   `empty-table-header`: Table header text should not be empty
+-   `frame-title`: `<iframe>` elements must always have a text label.
 -   `heading-order`: This rule checks for incorrect heading order. Headings should be ordered in a logical and consistent manner, with the main heading (h1) followed by subheadings (h2, h3, etc.).
+-   `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 this can cause confusion for users who rely on headings to navigate content.
 
 ### wagtail-accessibility
 

docs/releases/5.0.md

@@ -18,7 +18,8 @@ depth: 1
  * Add `WAGTAILIMAGES_EXTENSIONS` setting to restrict image uploads to specific file types (Aman Pandey, Ananjan-R)
  * Update user list column level to `Access level` to be easier to understand (Vallabh Tiwari)
  * Migrate `.button-longrunning` behaviour to a Stimulus controller with support for custom label element & duration (Loveth Omokaro)
- * Implement new simplified userbar designs (Albinas Starykova)
+ * Implement new simplified userbar designs (Albina Starykova)
+ * Add more Axe rules to the accessibility checker (Albina Starykova)
 
 ### Bug fixes
 

wagtail/admin/userbar.py

@@ -38,20 +38,40 @@ class AccessibilityItem(BaseItem):
                 "runOnly": {
                     "type": "rule",
                     "values": [
+                        "button-name",
                         "empty-heading",
+                        "empty-table-header",
+                        "frame-title",
                         "heading-order",
+                        "input-button-name",
+                        "link-name",
                         "p-as-heading",
                     ],
                 }
             },
             # Wagtail-specific translatable custom error messages.
             "messages": {
+                "button-name": _(
+                    "Button text is empty. Use meaningful text for screen reader users."
+                ),
                 "empty-heading": _(
-                    "Empty heading found. Use meaningful text in headings."
+                    "Empty heading found. Use meaningful text for screen reader users."
+                ),
+                "empty-table-header": _(
+                    "Table header text is empty. Use meaningful text for screen reader users."
+                ),
+                "frame-title": _(
+                    "Empty frame title found. Use a meaningful title for screen reader users."
                 ),
                 "heading-order": _(
                     "Incorrect heading hierarchy. Avoid skipping levels."
                 ),
+                "input-button-name": _(
+                    "Input button text is empty. Use meaningful text for screen reader users."
+                ),
+                "link-name": _(
+                    "Link text is empty. Use meaningful text for screen reader users."
+                ),
                 "p-as-heading": _(
                     "Misusing paragraphs as headings. Use proper heading tags."
                 ),