Axe Accessibility Test Result: Missing Aria-Label

Created on 14 December 2023, 7 months ago
Updated 3 January 2024, 6 months ago

Problem/Motivation

We've begun running automated accessibility tests on our site using axe-core. It's report included this which comes from the Fluid UI module:

    {
        "id": "landmark-unique",
        "impact": "moderate",
        "tags": [
            "cat.semantics",
            "best-practice"
        ],
        "help": "Ensures landmarks are unique",
        "description": "Landmarks should have a unique role or role/label/title (i.e. accessible name) combination",
        "helpUrl": "https://dequeuniversity.com/rules/axe/4.8/landmark-unique?application=playwright",
        "nodes": [
            {
                "any": [
                    {
                        "id": "landmark-is-unique",
                        "data": {
                            "role": "navigation",
                            "accessibleText": null
                        },
                        "relatedNodes": [
                            {
                                "html": "<nav class=\"navbar navbar-top\" id=\"navbar-top\">",
                                "target": [
                                    "#navbar-top"
                                ]
                            }
                        ],
                        "impact": "moderate",
                        "message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
                    }
                ],
                "all": [],
                "none": [],
                "impact": "moderate",
                "html": "<nav class=\"flc-toc-tocContainer\"></nav>",
                "target": [
                    ".flc-toc-tocContainer"
                ],
                "failureSummary": "Fix any of the following:\n  The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
            }
        ]
    },

Proposed resolution

Add an aria-label or title to the ToC container nav. I think this would be a quick addition to templates/fluid-ui-block.html.twig.

πŸ› Bug report
Status

Fixed

Version

2.0

Component

Code

Created by

πŸ‡¨πŸ‡¦Canada ryanrobinson_wlu

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.69.0 2024