{
    "@context": {
        "reporter": "https:\/\/app.caat.report\/",
        "wcagem": "http:\/\/www.w3.org\/TR\/WCAG-EM\/#",
        "Evaluation": "wcagem:procedure",
        "defineScope": "wcagem:step1",
        "scope": "wcagem:step1a",
        "step1b": {
            "@id": "wcagem:step1b",
            "@type": "@id"
        },
        "conformanceTarget": "step1b",
        "accessibilitySupportBaseline": "wcagem:step1c",
        "additionalEvaluationRequirements": "wcagem:step1d",
        "exploreTarget": "wcagem:step2",
        "essentialFunctionality": "wcagem:step2b",
        "pageTypeVariety": "wcagem:step2c",
        "technologiesReliedUpon": "wcagem:step2d",
        "selectSample": "wcagem:step3",
        "structuredSample": "wcagem:step3a",
        "randomSample": "wcagem:step3b",
        "Website": "wcagem:website",
        "Webpage": "wcagem:webpage",
        "auditSample": "wcagem:step4",
        "reportFindings": "wcagem:step5",
        "documentSteps": "wcagem:step5a",
        "commissioner": "wcagem:commissioner",
        "evaluator": "wcagem:evaluator",
        "evaluationSpecifics": "wcagem:step5b",
        "WCAG": "http:\/\/www.w3.org\/TR\/WCAG\/#",
        "WCAG20": "http:\/\/www.w3.org\/TR\/WCAG20\/#",
        "WCAG21": "http:\/\/www.w3.org\/TR\/WCAG21\/#",
        "WAI": "http:\/\/www.w3.org\/WAI\/",
        "A": "WAI:WCAG2A-Conformance",
        "AA": "WAI:WCAG2AA-Conformance",
        "AAA": "WAI:WCAG2AAA-Conformance",
        "wcagVersion": "WAI:standards-guidelines\/wcag\/#versions",
        "reportToolVersion": "wcagem:reportToolVersion",
        "earl": "http:\/\/www.w3.org\/ns\/earl#",
        "Assertion": "earl:Assertion",
        "TestMode": "earl:TestMode",
        "TestCriterion": "earl:TestCriterion",
        "TestCase": "earl:TestCase",
        "TestRequirement": "earl:TestRequirement",
        "TestSubject": "earl:TestSubject",
        "TestResult": "earl:TestResult",
        "OutcomeValue": "earl:OutcomeValue",
        "Pass": "earl:Pass",
        "Fail": "earl:Fail",
        "CannotTell": "earl:CannotTell",
        "NotApplicable": "earl:NotApplicable",
        "NotTested": "earl:NotTested",
        "assertedBy": "earl:assertedBy",
        "mode": "earl:mode",
        "result": "earl:result",
        "subject": "earl:subject",
        "test": "earl:test",
        "outcome": "earl:outcome",
        "dcterms": "http:\/\/purl.org\/dc\/terms\/",
        "title": "dcterms:title",
        "description": "dcterms:description",
        "summary": "dcterms:summary",
        "date": "dcterms:date",
        "hasPart": "dcterms:hasPart",
        "isPartOf": "dcterms:isPartOf",
        "id": "@id",
        "type": "@type",
        "language": "@language"
    },
    "language": "en",
    "type": "Evaluation",
    "defineScope": {
        "id": "_:defineScope",
        "scope": {
            "description": "",
            "title": "Joomla! WCAG Audit"
        },
        "conformanceTarget": "AA",
        "step1b": "AA",
        "accessibilitySupportBaseline": "",
        "additionalEvaluationRequirements": "",
        "wcagVersion": "2.0"
    },
    "exploreTarget": {
        "id": "_:exploreTarget",
        "essentialFunctionality": "",
        "pageTypeVariety": "",
        "technologiesReliedUpon": []
    },
    "selectSample": {
        "id": "_:selectSample",
        "structuredSample": [
            {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            {
                "id": "_:subject_e5625254-e773-4979-b9a5-d715d82b7597",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:11:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/",
                "_description": "",
                "title": "02 \u2013 Frontend Template (Cassiopeia)"
            },
            {
                "id": "_:subject_6ff4ea05-175d-4efc-8c9c-d8f5ab3f4f17",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:23:52+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/",
                "_description": "",
                "title": "03 \u2013 Authentication Flows (FE + BE Login)"
            },
            {
                "id": "_:subject_478ea7bd-256d-41eb-9787-e7e779bcbfe9",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:20+02:00",
                "description": "",
                "_description": "",
                "title": "04 \u2013 MFA Captive View (FE + BE)"
            },
            {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            {
                "id": "_:subject_ef962b8c-b5fc-4a64-af15-acb150a2e68e",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:02+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_joomlaupdate",
                "_description": "",
                "title": "12 \u2013 Update Joomla"
            },
            {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            }
        ],
        "randomSample": []
    },
    "auditSample": [
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-31T15:44:56+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-31T15:44:56+02:00",
                "description": "## Extension promo images have no alt attribute\n\nThe images representing the extensions have no `alt` attributes at all, meaning that they are neither marked as pure decoration, nor have an image description. In these cases, screen readers and browsers will try to use the filename for the images as the text alternative.\n\n![Extensions with images without alt attributes](https:\/\/app.caat.report\/_Resources\/Persistent\/a\/7\/8\/a\/a78abc35badf68eda7adfd1dd5e5fd545ae2f971\/image.png)\n\n**Suggestion:** As these images are part of the card to open the details view of the plugin, consider adding an empty `alt` attribute (`alt=\"\"`) to the images.\n\n---\n\n## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-31T15:44:56+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-06T16:43:12+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-06T16:43:12+02:00",
                "description": "## QR Code has no alternative text\n\nThe QR Code when setting up Multi-Factor Authentication has no text alternative as an `alt` attribute is not present on the `<img>` element. This makes it more difficult for a screen reader user to locate and use the QR code.\n\n![Set up verification code screen with redacted key and QR code](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/e\/a\/7\/9ea73f35bd1e8828a5b3b38ca41278376cf13e36\/image.png)\n\nAt least add the `alt=\"QR Code\"` attribute to the element.\n\n**Note:** For making QR codes even more accessible, see [Accessible QR Codes \u2013 The Ultimate Guide](https:\/\/axesslab.com\/qr-codes\/).\n\n---\n\n## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-06T16:43:12+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-13T14:42:21+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-13T14:42:21+02:00",
                "description": "## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-13T14:42:21+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-13T14:42:21+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-13T14:42:21+02:00",
                "description": "## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-13T14:42:21+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-13T14:42:21+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-13T14:42:21+02:00",
                "description": "## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-13T14:42:21+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-13T14:42:21+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-13T14:42:21+02:00",
                "description": "## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-13T14:42:21+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-13T14:42:21+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-13T14:42:21+02:00",
                "description": "## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-13T14:42:21+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-13T14:42:21+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-13T14:42:21+02:00",
                "description": "## Missing\/Misleading text alternative for logo image\n\nThe Joomla! logo on the top left of the administration template has an empty `alt` attribute on the \"Home Dashboard\" page, and \"Back to Dashboard\" on subsequent pages.\n\n![Screenshot showing the logo div on the Dashboard page and the logo link on other pages.](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/c\/a\/b\/ccab54a2ad43ebbc32da97113eb58a07f3561c0c\/image.png)\n\nThe image is also not linked on the main dashboard page, but linked on other pages.\n\nThis is problematic in two ways: The link to the Dashboard is not consistent between pages, and some screen reader users rely on the consistent existence of controls to orient themselves on the page. In addition the visible label of the link is not included in the accessible name of the link. This means that voice input users can struggle to activate the link.\n\nTreat the logo like the \"Home Dashboard\" link. Ensure the logo link is also on the \"Home Dashboard\" page, include the visible \"Joomla!\" text and the words \"Home Dashboard\" for consistency. Use aria-current=\"page\" as the indicator that the user is on the Dashboard, as you do on the dedicated \"Home Dashboard\" link:\n\n```\n<a class=\"logo\" href=\"\u2026\" aria-current=\"page\">\r\n <img loading=\"eager\" decoding=\"async\" src=\"\u2026\" alt=\"Joomla! \u2013 Home Dashboard\">\r\n<\/a>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-13T14:42:21+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T13:36:05+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T13:36:05+02:00",
                "description": "## Very verbose link names when selecting a MFA method\n\nWhen a user selects which MFA method they want to use, they are presented with a list of links:\n\n![List of MFA methods](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/1\/a\/c\/11ac5667b6a46e117a379ee1462bc16e67fc2ed8\/image.png)\n\nThese links contain the link name (Passkey, Code by Email, \u2026) an image that represents that method, and a hint text that is the same text as the actual link name. As the images have `alt` attributes and all three elements are part of the link, the Passkey link\u2019s accessible name is \u201cMy Passkey Passkey Passkey\u201d while the \u201cCode by Email\u201d link\u2019s accessible name is \u201cCode by Email Code by Email Code by Email\u201d.\n\nThe passkey one just does not repeat the same value three times because the passkey was renamed to \u201cMy Passkey\u201d.\n\nThere is no need for such a convoluted naming. Ensure that the `alt` attribute of the graphics are empty (`alt=\"\"`) and remove the duplicated hint text (Code simplified):\n\n**Current code:**\n\n```\n<a class=\"\u2026\" href=\"\u2026\">\r\n  <div class=\"\u2026\">\r\n    <img src=\"\u2026\" alt=\"Backup Codes\" class=\"\u2026\">\r\n  <\/div>\r\n  <span class=\"\u2026\">\r\n    Backup Codes\r\n  <\/span>\r\n  <small class=\"\u2026\">\r\n    Backup Codes\r\n  <\/small>\r\n<\/a>\n```\n\n**Change to:**\n\n```\n<a class=\"\u2026\" href=\"\u2026\">\r\n  <div class=\"\u2026\">\r\n    <img src=\"\u2026\" alt=\"\" class=\"\u2026\">\r\n  <\/div>\r\n  <span class=\"\u2026\">\r\n    Backup Codes\r\n  <\/span>\r\n<\/a>\n```\n\n**Note:** The helper text does not meet contrast requirements, but as the suggestion is to remove it, we did not specify this in detail.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_478ea7bd-256d-41eb-9787-e7e779bcbfe9",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:20+02:00",
                "description": "",
                "_description": "",
                "title": "04 \u2013 MFA Captive View (FE + BE)"
            },
            "test": {
                "id": "WCAG20:text-equiv-all",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T13:36:05+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:media-equiv-av-only-alt",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:media-equiv-captions",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:media-equiv-audio-desc",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:media-equiv-real-time-captions",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:media-equiv-audio-desc-only",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-17T13:56:29+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-17T13:56:29+02:00",
                "description": "## Menu toggle button does not convey state, uses wrong role\n\nThe \u201cToggle Menu\u201d button is implemented using a link and also does not convey the current state to users of assistive technologies.\n\n![The expanded and collapsed menu states](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/f\/1\/e\/4f1e5e919f014fa8e7feee4fa0d1851b9949d5a1\/image.png)\n\nThis is the current HTML code:\n\n```\n<a id=\"menu-collapse\" href=\"#\" aria-label=\"Toggle Menu\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-on|off\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Toggle Menu<\/span>\r\n<\/a>\n```\n\n**Suggestion:** Instead of using a link without a target, use a `<button>` element. In addition to conveying the correct semantics to screen reader users, this also enables the use of the space key in addition to the return key to activate the button.\n\nUse `aria-pressed` on the `<button>` element to convey if the button is pressed or not.\n\nLastly, decide on the default state of the button and use that state as the button text.\n\n```\n<button id=\"menu-collapse\" aria-label=\"Collapse Menu\" aria-pressed=\"true|false\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-on|off\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Collapse Menu<\/span>\r\n<\/button>\n```\n\n**Alternative:** Instead of using the aria-pressed attribute of the button to determine the current state of the button, you can also decide to change the button text:\n\n```\n<button id=\"menu-collapse\" aria-label=\"Collapse Menu\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-off\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Collapse Menu<\/span>\r\n<\/button>\n```\n\n```\n<button id=\"menu-collapse\" aria-label=\"Show Menu\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-on\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Show Menu<\/span>\r\n<\/button>\n```\n\n**Note:** In general we do not recommend to use `aria-label` when the accessible name of the user interface element already has a visible text that can act as an accessible name. `aria-label` is often overlooked or miscopied and as its values are not immediately visible difficult to debug. Wherever you can either rely on the contents to label a user interface element or use `aria-labelledby` to point at an element ID with the visible accessible name.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-17T13:56:29+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-31T15:58:24+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-31T15:58:24+02:00",
                "description": "## Search results are not marked up in code\n\nThe \u201cInstall from Web\u201d view has no structure to indicate where the results of the search are. The skip link menu can only focus on the categories heading over the left side navigation, but there is no similar way to find the results quickly.\n\n![Extensions: Install view](https:\/\/app.caat.report\/_Resources\/Persistent\/a\/3\/c\/2\/a3c231d6d0388f7f9011f848202a431be521f7b2\/image.png)\n\nThe individual headings for extensions are also `<h4>` elements while the \u201cCategories\u201c heading is an `<h3>` element. Adding a \u201cResults\u201d heading level 3 would clarify the structure up.\n\n---\n\n## \u201cOpens in a new tab\/window\u201d icon is not conveyed to assistive technologies\n\nIn several places, \u201copens in a new tab\/window\u201d icons are shown in the interface, however this information is not conveyed programmatically as the icon is hidden from screen readers and other assistive technologies.\n\n![Links with \u201copen in new window icons\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/5\/e\/4\/05e4b01b14400d32ddb3e0e85b01481373af9730\/image.png)\n\nThe issue affects all links out to the directory listing or the developer website.\n\n**Suggestion:** Use `aria-description=\"Opens in a new window or tab\"` to indicate that the link opens in a new window or tab.\n\n---\n\n## File upload limit is not associated with upload button\n\nWhen uploading a plugin file, the maximum file size is available for visual users in context with the drag and drop\/file upload button.\n\n![Upload button](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/5\/5\/d\/c55d56a6a5a3e1348193bb418f2d7b2745a02e0c\/image.png)\n\nHowever, users of assistive technologies arrive at the button before noticing the upload limit, which might lead to larger files being uploaded.\n\n**Suggestion:** Use `aria-describedby` to assign the upload limit to the button by referencing the upload limit text\u2019s ID value as the `aria-describedby` value:\n\n```\n<p>\r\n  <button id=\"select-file-button\" type=\"button\" class=\"btn btn-success\" aria-describedby=\"maxUploadSize\">\r\n    Or browse for file\r\n  <\/button>\r\n<\/p>\r\n<p id=\"maxUploadSize\">Maximum upload size: <strong>\u200e128.00 MB<\/strong><\/p>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-31T15:58:24+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-31T11:41:49+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-31T11:41:49+02:00",
                "description": "## Text filters are difficult to use\n\nThe text filters are difficult and confusing to use. While the issues individually just barely meet the threshold of violations, their combination makes the UI difficult to use, especially on small screens.\n\n![Text Filters table](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/b\/c\/1\/cbc113c0ce236aeb103b323cc4c8f7643584d251\/image.png)\n\nThe UI uses vertical ellipsis (\u22ee) as an indentation symbol, but this is not explained anywhere and creates noise in screen readers which announce \ud83d\udde3\ufe0f *Vertical Ellipsis Vertical Ellipsis, Vertical Ellipsis Publisher.*\n\nThe table also shows cut off in a small viewport, which makes orientation difficult, especially with the constraint width due to extra padding on the page:\n\n![Table on mobile](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/3\/9\/f\/c39fd1cb8509aaf6bcebe45af0808f3f4e72e26b\/image.png)\n\nUnfortunately this kind of indentation cannot be conveyed well in tables. Consider using nested groups or `<fieldset>` elements instead, aligned by CSS grids. These would also allow to properly reflow the table in mobile.\n\n---\n\n## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-31T11:41:49+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-22T11:42:15+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-22T11:42:15+02:00",
                "description": "## Filter Options button has no indicator of state, focus is not guided to filter options\n\nThe filter options button does not indicate that it expands content on the page. The only indicator that the content is expanded is the existence of the filter options elsewhere on the page.\n\nThis is problematic as people who use zoom to interact with the page have the impression that nothing has happened. Screen reader users will also have a more difficult time to find the filter options as they are not in the proximity of the expanded button.\n\n![Filter options: Closed, expanded, and with the focus order overlaid](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/e\/2\/6\/2e26a5e69abe80c44d143edcdd688c206ca762e8\/image.png)\n\n**Suggestion:** Add the `aria-expanded` attribute to the filter options button. Show the options directly after the button that expands the options. Make sure that the button clearly communicates its expanded state visually, too, for example by using different icons.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-22T11:42:15+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-20T16:09:46+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-20T16:09:46+02:00",
                "description": "## Media manager: Visual information is not conveyed programmatically, keyboard navigation is inconsistent, elements lack roles and states, names\n\nTo allow screen reader and other assistive technologies to interact with the content in a meaningful way, information that is conveyed visually needs to also be available to those tools programmatically.\n\nOn websites and in web apps, this usually means clear accessible names, states and structure. The media manager interface misses to convey the information in various places.\n\nIn the **grid view**, the focusable icons for folders have no accessible name and no role. The checkmarks to select individual items have no role and hence also cannot receive the name through `aria-label`. Their status is not set. The checkboxes cannot be set using space or enter.\n\n![Folders and files, focusable with the keyboard but role-less](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/b\/d\/0\/9bd0010d44b32554dc5aebd5fa1bc4394eb6d077\/image.png)\n\nThe ellipsis button that shows the sub menu to manage files does not expand using the arrow keys, but once expanded behaves like a toolbar with arrow navigation. This is inconsistent and also not communicated through roles and properties.\n\nKeyboard interaction is inconsistent in the ellipsis menu in general. Sometimes the arrow key works as expected, occasionally the page scrolls, and sometimes the preview of a file is opened.\n\nPressing ESC does not close the ellipsis menu.\n\nThe **table view** is not keyboard accessible at all. Its columns can be sorted, but there is no programmatic indication of the current sorting direction.\n\nIn **both views**, the information panel cannot be filled when using the keyboard as activating an item immediately opens the folder or shows a preview of the file.\n\nThe **toolbar** also has accessibility issues:\n\n![Grid and table view toolbars](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/f\/0\/c\/9f0cd3cdb0b77b4bfc26b2ec76bb5cf2b8399c9a\/image.png)\n\n- The \u201cToggle select all\u201d checkbox is implemented as a regular checkbox, and hence works as expected. (Consider dropping the word \u201ctoggle\u201d from its accessible name, it is unnecessarily wordy and can be confusing. That the UI element toggles is implied by the fact that it is a checkbox.)\n- The file path navigation does not well convey what it is visually and also uses a navigation (`<nav>`) element that has the `aria-label` of `Breadcrumb`. As this is not a classical navigation like a page navigation, consider using a different element. Pick a better accessible name than \u201cBreadcrumb\u201d, for example \u201cCurrent path\u201d.\n- The search field that filters the results shows an alert visually when there are no matches, but does not convey it to the assistive technologies.\n- The sort button (\u201cChange ordering\u201d) opens two select boxes that allow you to select what to order by and in which direction, but the select boxes are positioned after other buttons and the button does not convey that something would open. This makes the actual sorting options difficult to find.\n- The buttons to change the grid size look disabled when the minimum\/maximum grid size is selected, but they are not made disabled programmatically. So the icons need to meet contrast requirements (at least 3\u22361 contrast).\n- The switch from grid to list view and vice versa is named \u201cToggle between grid and table views\u201d and gives users no indication on what mode is selected.\n- The toggle item info button does not indicate if the item info pane is shown or not.\n\nThe **folder tree** navigation is unclear to users and not properly implemented. Especially there roles need to be properly nested and expanded\/collapsed set properly. [See this example from W3C\/WAI.](https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/treeview\/examples\/treeview-1a\/) That said, even the WAI treeview works sub-optimally on platforms that do not support treeviews natively, namely macOS and iOS.\n\n![Tree view](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/a\/5\/8\/6a58eaa424987f8ddeb8db3c49c15c8ecbb5c433\/image.png)\n\nSuggestion\n----------\n\nInstead of fixing the individual issues, it makes sense to re-think how the media manager is built and works and plan it from the ground up in an accessible way.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-20T16:09:46+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T16:13:51+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T16:13:51+02:00",
                "description": "## Tags are just stand-alone links without context\n\nFor visual users the design and positioning of the tags on the page makes it clear that the links are tags. A user using assistive technology like a screen reader has no hints that the links are tags.\n\n![Tags: Millions Worldwide Love Joomla 6](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/3\/e\/1\/63e15fe56e1cc3d4cc3075e31e9360d925570d62\/image.png)\n\nUse a grouping container that is labeled or label the existing list.\n\n**Currently:**\n\n```\n<ul class=\"tags list-inline\" style=\"\">\r\n  <li class=\"list-inline-item tag-2 tag-list0\">\r\n    <a href=\"\u2026\" class=\"btn btn-sm btn-info\">Millions<\/a>\r\n  <\/li>\r\n  \u2026\r\n<\/ul>\n```\n\n**Suggested:**\n\n```\n<ul aria-label=\"Tags\" class=\"tags list-inline\" style=\"\">\r\n  <li class=\"list-inline-item tag-2 tag-list0\">\r\n    <a href=\"\u2026\" class=\"btn btn-sm btn-info\">Millions<\/a>\r\n  <\/li>\r\n  \u2026\r\n<\/ul>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_e5625254-e773-4979-b9a5-d715d82b7597",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:11:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/",
                "_description": "",
                "title": "02 \u2013 Frontend Template (Cassiopeia)"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T16:13:51+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T15:58:50+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T15:58:50+02:00",
                "description": "## Password requirements are not associated with the password fields\n\nWhen setting the password for the administrator of the Joomla installation, there is a password requirement of at least 12 characters.\n\n![Password field](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/2\/a\/b52aabccf9e3d734450cb2f5ba78848e73ee98f7\/image.png)\n\nHowever the only error information a screen reader or assistive technology user would get its that \u201cThis value is not valid\u201d as long as the password is less than 12 characters long. That there is a 12 character requirement is not conveyed to assistive technology users as they enter the password. There is an `<output>` element that only announces \u201cPassword doesn\u2019t meet the site\u2019s requirements.\u201d when an isufficient password is read.\n\nEnsure that the requirement \u201cEnter at least 12 characters\u201d is associated with the password field using `aria-describedby` attribute pointing at the message\u2018s ID attribute. Also consider using [autocomplete=\"new-password\"](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\/autocomplete#new-password).",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T15:58:50+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T11:36:08+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T11:36:08+02:00",
                "description": "## Disabled looking link is not properly disabled and has low contrast\n\nWhen updating Joomla, the user has to check a checkbox to enable the \u201cStart update\u201d button.\n\n![Update your site to Joomla! 6.1.2 notice](https:\/\/app.caat.report\/_Resources\/Persistent\/a\/3\/3\/f\/a33fd92026afc5fa235f6dea6fa0a095f7a3b1bd\/image.png)\n\nWhile there is an exception for disabled buttons having sufficient (4.5:1) contrast, the \u201cStart update\u201d button is a link that only looks disabled. It still can be focused and clicked, but there is nothing happening.\n\nTo make the button properly act like a disabled button, add `aria-disabled=\"true\"` and `tabindex=\"-1\"`. (Remove both attributes when enabling the button.) Alternatively, you can set the link to `inert` while disabled, which will prevent all interactions.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_ef962b8c-b5fc-4a64-af15-acb150a2e68e",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:02+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_joomlaupdate",
                "_description": "",
                "title": "12 \u2013 Update Joomla"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-programmatic",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T11:36:08+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-sequence",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-27T10:20:41+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-27T10:20:41+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.\n\n---\n\n## Button order confusing\n\nSometimes, the *Save &amp; Close* button has additional options which are signaled by a drop down arrow on the right of the button with the accessible label \u201cToggle Dropdown\u201d.\n\n![Save & Close with Toggle Dropdown button](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/c\/d\/a\/2cda6d43703d8e9aa4126089a71e88e75906ddb5\/image.png)\n\nIn the keyboard focus order, however, the dropdown button comes first, meaning that a user comes across the secondary information first, before the primary one.\n\n![Same screenshot but with keyboard interaction numbers showing the keyboard order.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/2\/e\/c\/92ecac318d451bb7dd732a5ec1fd6107054d3ad6\/image.png)\n\nFor screen reader users, the announcement is also confusing:\n\n\ud83d\udde3\ufe0f *Save, button; Toggle Dropdown, menu pop up, button; Save and Close, button*\n\nWhile the announcement of \u201cToggle Dropdown, menu pop up, button\u201d could mean that there are alternatives to saving the document, the actual options are for \u201cSave &amp; Close\u201d. In addition, the accessible name \u201cToggle Dropdown\u201d is non-descriptive, especially as the role of the element already conveys that this is a \u201cDropdown\u201d.\n\n**Suggestion:** Ensure that the order of the buttons in the code matches the order of the buttons on screen. Use a different accessible name for the \u201cToggle Dropdown\u201d button, for example \u201cSave options\u201d or similar.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-sequence",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-27T10:20:41+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-sequence",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-sequence",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-27T10:20:41+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-27T10:20:41+02:00",
                "description": "## Button order confusing\n\nSometimes, the *Save &amp; Close* button has additional options which are signaled by a drop down arrow on the right of the button with the accessible label \u201cToggle Dropdown\u201d.\n\n![Save & Close with Toggle Dropdown button](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/c\/d\/a\/2cda6d43703d8e9aa4126089a71e88e75906ddb5\/image.png)\n\nIn the keyboard focus order, however, the dropdown button comes first, meaning that a user comes across the secondary information first, before the primary one.\n\n![Same screenshot but with keyboard interaction numbers showing the keyboard order.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/2\/e\/c\/92ecac318d451bb7dd732a5ec1fd6107054d3ad6\/image.png)\n\nFor screen reader users, the announcement is also confusing:\n\n\ud83d\udde3\ufe0f *Save, button; Toggle Dropdown, menu pop up, button; Save and Close, button*\n\nWhile the announcement of \u201cToggle Dropdown, menu pop up, button\u201d could mean that there are alternatives to saving the document, the actual options are for \u201cSave &amp; Close\u201d. In addition, the accessible name \u201cToggle Dropdown\u201d is non-descriptive, especially as the role of the element already conveys that this is a \u201cDropdown\u201d.\n\n**Suggestion:** Ensure that the order of the buttons in the code matches the order of the buttons on screen. Use a different accessible name for the \u201cToggle Dropdown\u201d button, for example \u201cSave options\u201d or similar.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-sequence",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-27T10:20:41+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T15:58:50+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T15:58:50+02:00",
                "description": "## Password requirements are not associated with the password fields\n\nWhen setting the password for the administrator of the Joomla installation, there is a password requirement of at least 12 characters.\n\n![Password field](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/2\/a\/b52aabccf9e3d734450cb2f5ba78848e73ee98f7\/image.png)\n\nHowever the only error information a screen reader or assistive technology user would get its that \u201cThis value is not valid\u201d as long as the password is less than 12 characters long. That there is a 12 character requirement is not conveyed to assistive technology users as they enter the password. There is an `<output>` element that only announces \u201cPassword doesn\u2019t meet the site\u2019s requirements.\u201d when an isufficient password is read.\n\nEnsure that the requirement \u201cEnter at least 12 characters\u201d is associated with the password field using `aria-describedby` attribute pointing at the message\u2018s ID attribute. Also consider using [autocomplete=\"new-password\"](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\/autocomplete#new-password).",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-sequence",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T15:58:50+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:content-structure-separation-understanding",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-without-color",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-16T11:50:26+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-16T11:50:26+02:00",
                "description": "## Currently selected menu is indicated by color alone\n\nFor people who have low vision or other visual disabilities, distinguishing between different UI elements and seeing the state of various UI elements is important.\n\nThe current menu item is only indicated visually by using color alone.\n\n![Manage is selected and uses just a smidge lighter shade of dark blue than the surrounding items](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/5\/4\/0\/e54087613ac909a142c73aec564fba4d483c3b08\/image.png)\n\nThe color also does not have much contrast compared to other colors in the menu, which have the following background colors:\n\n- Non-selected menu: `--sidebarwrapper-bg` \/ `rgb(31, 48, 71)` \/ dark blue\n- Non-selected sub menu: `--main-nav-ul-bg` \/ `rgb(38, 60, 89)` \/ slightly lighter blue\n- Selected menu item: `--main-nav-mm-active-bg` \/ `rgb(46, 72, 107)` \/ even slightly ligher blue\n\nThese colors all lack the minimum required contrast to make them distinguishable (3\u22361), however the sub-menu items are indented, which makes them identifiable enough.\n\n![Three navigation colors and their (under 2) contrast ratios](https:\/\/app.caat.report\/_Resources\/Persistent\/a\/0\/5\/4\/a054b47d2c90a913094365d6ddb12e2324c102d9\/CleanShot%202026-07-16%20at%2013.11.41%402x.png)\n\nEnsure a non-color way to indicate the current page. Use an icon or other indicator. Alternatively you can ensure that the contrast between non-current items and current items is more than 3\u22361, like in the dark theme:\n\n![The dark theme has a light blue background color for the current item](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/f\/8\/4\/9f846a809d79950fb9b88bd1f70914ea3fa0cf51\/image.png)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-without-color",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-16T11:50:26+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-20T16:09:46+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-20T16:09:46+02:00",
                "description": "## Media manager: Visual information is not conveyed programmatically, keyboard navigation is inconsistent, elements lack roles and states, names\n\nTo allow screen reader and other assistive technologies to interact with the content in a meaningful way, information that is conveyed visually needs to also be available to those tools programmatically.\n\nOn websites and in web apps, this usually means clear accessible names, states and structure. The media manager interface misses to convey the information in various places.\n\nIn the **grid view**, the focusable icons for folders have no accessible name and no role. The checkmarks to select individual items have no role and hence also cannot receive the name through `aria-label`. Their status is not set. The checkboxes cannot be set using space or enter.\n\n![Folders and files, focusable with the keyboard but role-less](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/b\/d\/0\/9bd0010d44b32554dc5aebd5fa1bc4394eb6d077\/image.png)\n\nThe ellipsis button that shows the sub menu to manage files does not expand using the arrow keys, but once expanded behaves like a toolbar with arrow navigation. This is inconsistent and also not communicated through roles and properties.\n\nKeyboard interaction is inconsistent in the ellipsis menu in general. Sometimes the arrow key works as expected, occasionally the page scrolls, and sometimes the preview of a file is opened.\n\nPressing ESC does not close the ellipsis menu.\n\nThe **table view** is not keyboard accessible at all. Its columns can be sorted, but there is no programmatic indication of the current sorting direction.\n\nIn **both views**, the information panel cannot be filled when using the keyboard as activating an item immediately opens the folder or shows a preview of the file.\n\nThe **toolbar** also has accessibility issues:\n\n![Grid and table view toolbars](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/f\/0\/c\/9f0cd3cdb0b77b4bfc26b2ec76bb5cf2b8399c9a\/image.png)\n\n- The \u201cToggle select all\u201d checkbox is implemented as a regular checkbox, and hence works as expected. (Consider dropping the word \u201ctoggle\u201d from its accessible name, it is unnecessarily wordy and can be confusing. That the UI element toggles is implied by the fact that it is a checkbox.)\n- The file path navigation does not well convey what it is visually and also uses a navigation (`<nav>`) element that has the `aria-label` of `Breadcrumb`. As this is not a classical navigation like a page navigation, consider using a different element. Pick a better accessible name than \u201cBreadcrumb\u201d, for example \u201cCurrent path\u201d.\n- The search field that filters the results shows an alert visually when there are no matches, but does not convey it to the assistive technologies.\n- The sort button (\u201cChange ordering\u201d) opens two select boxes that allow you to select what to order by and in which direction, but the select boxes are positioned after other buttons and the button does not convey that something would open. This makes the actual sorting options difficult to find.\n- The buttons to change the grid size look disabled when the minimum\/maximum grid size is selected, but they are not made disabled programmatically. So the icons need to meet contrast requirements (at least 3\u22361 contrast).\n- The switch from grid to list view and vice versa is named \u201cToggle between grid and table views\u201d and gives users no indication on what mode is selected.\n- The toggle item info button does not indicate if the item info pane is shown or not.\n\nThe **folder tree** navigation is unclear to users and not properly implemented. Especially there roles need to be properly nested and expanded\/collapsed set properly. [See this example from W3C\/WAI.](https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/treeview\/examples\/treeview-1a\/) That said, even the WAI treeview works sub-optimally on platforms that do not support treeviews natively, namely macOS and iOS.\n\n![Tree view](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/a\/5\/8\/6a58eaa424987f8ddeb8db3c49c15c8ecbb5c433\/image.png)\n\nSuggestion\n----------\n\nInstead of fixing the individual issues, it makes sense to re-think how the media manager is built and works and plan it from the ground up in an accessible way.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-without-color",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-20T16:09:46+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-dis-audio",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T11:14:25+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T11:14:25+02:00",
                "description": "## Text contrast is low\n\nThe contrast of text elements must be at least 4.5\u22361, unless the text is larger than 19 pixels and bold or larger than 24 pixels. In those instances the minimum is 3\u22361.\n\nGuided Tour\n-----------\n\nThe cancel button of the \"Guided Tour\" has a contrast ratio of 2.26\u22361, which is less than 4.5\u22361.\n\n![Cancel button with X icon next to it.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/d\/6\/f\/9d6facd2d230360776c58809700d5e81d98ef2c7\/image.png)\n\n![Color Swatch rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) with contrast ratio 2.26:1 and foreground suggestion rgb(103, 103, 103)](https:\/\/app.caat.report\/_Resources\/Persistent\/7\/a\/e\/9\/7ae94eaecf535ea498a7ba326e4600665bc14923\/image.png)\n\n**Suggestion:** Change the text color to a color that matches the minimum contrast ratio, for example use `rgb(103, 103, 103)` for the text color on the beige `rbg(230, 230, 230)` background.\n\nEmpty Dashboard Card Message &amp; Character Counter\n----------------------------------------------------\n\nIn light mode, the **dashboard** message that shows in an empty dashboard card has a contrast of less than 4.5\u22361 as the `--text-muted-color` (`rgba(33, 37, 41, 0.75)`) is further lightened by an additional `0.7` `opacity` value, resulting in a 3.29\u22361 color contrast. The rendered font size is `16px`, too small for allowing a 3\u22361 contrast which requires text to be bold (which this is) and a font size of `18.5px` or larger.\n\n![Privacy dashboard empty card text](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/a\/a\/2\/1aa28a73e124cb585771e5b221785e770f6c32d6\/image.png)\n\nThe dark mode version of the message exceeds the minimum of 4.5\u22361.\n\nIn the **edit articles** view, the same color and opacity is used to show the remaining characters of the Meta Description field:\n\n![Meta description field contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/c\/1\/7\/4c17be0fb01b6051de4e846b02997f2b67546999\/image.png)\n\nThe same issue exists in the **Backend Options** view where the \u201cSite Meta Descriptions\u201d field has a similar information message.\n\n**Suggestion:** Remove the `opacity: 0.7;` modifier from the muted text \u2013 you already set a muted color here, further muting it through opacity makes little sense. Rather change the muted text color.\n\nInstaller Wizard\n----------------\n\nIn the installer wizard, the POPULAR badge in extension headings has a contrast of 1\u22361, as the text is white on white:\n\n![Extension title with the POPULAR badge in white on a white background](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/7\/a\/8\/97a8a6366c16404ac45329c44b39dd73f46f4d2d\/2026-08-04_15-21-56.png)\n\nTo make the badge easier to see, I have replaced the white background color with a purple background color:\n\n![Same heading with a purple bade and white text](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/8\/2\/0\/28209c77e61b8ecf6f62af4f5056207ea656ef3f\/image.png)\n\nEither remove the badge from the code or use a contrasting color scheme.\n\nMFA Setup\n---------\n\nAlmost all text on the MFA Setup page has insufficient contrast in both light and dark modes:\n\n![Screenshot of the MFA setup page in light and dark mode](https:\/\/app.caat.report\/_Resources\/Persistent\/8\/5\/6\/4\/8564b397c5a06222069f795f97a57907e5c638af\/image.png)\n\nThe same light gray text is also used on the MFA setup detail pages, where links have also insufficient contrast:\n\n![Screenshots of the YubiKey detail page](https:\/\/app.caat.report\/_Resources\/Persistent\/5\/e\/7\/c\/5e7c80bc13782e39aacb504e82296aa2d3718865\/image.png)\n\nUpdate Joomla\n-------------\n\nThe text of the tip in the backup on update box does not have sufficient contrast:\n\n![Tip text in the Backup on update box does not have sufficient contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/c\/0\/cac028ac6f231d0a5236d0149f6483c8f3291d2b\/image.png)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T11:14:25+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T11:14:25+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T11:14:25+02:00",
                "description": "## Text contrast is low\n\nThe contrast of text elements must be at least 4.5\u22361, unless the text is larger than 19 pixels and bold or larger than 24 pixels. In those instances the minimum is 3\u22361.\n\nGuided Tour\n-----------\n\nThe cancel button of the \"Guided Tour\" has a contrast ratio of 2.26\u22361, which is less than 4.5\u22361.\n\n![Cancel button with X icon next to it.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/d\/6\/f\/9d6facd2d230360776c58809700d5e81d98ef2c7\/image.png)\n\n![Color Swatch rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) with contrast ratio 2.26:1 and foreground suggestion rgb(103, 103, 103)](https:\/\/app.caat.report\/_Resources\/Persistent\/7\/a\/e\/9\/7ae94eaecf535ea498a7ba326e4600665bc14923\/image.png)\n\n**Suggestion:** Change the text color to a color that matches the minimum contrast ratio, for example use `rgb(103, 103, 103)` for the text color on the beige `rbg(230, 230, 230)` background.\n\nEmpty Dashboard Card Message &amp; Character Counter\n----------------------------------------------------\n\nIn light mode, the **dashboard** message that shows in an empty dashboard card has a contrast of less than 4.5\u22361 as the `--text-muted-color` (`rgba(33, 37, 41, 0.75)`) is further lightened by an additional `0.7` `opacity` value, resulting in a 3.29\u22361 color contrast. The rendered font size is `16px`, too small for allowing a 3\u22361 contrast which requires text to be bold (which this is) and a font size of `18.5px` or larger.\n\n![Privacy dashboard empty card text](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/a\/a\/2\/1aa28a73e124cb585771e5b221785e770f6c32d6\/image.png)\n\nThe dark mode version of the message exceeds the minimum of 4.5\u22361.\n\nIn the **edit articles** view, the same color and opacity is used to show the remaining characters of the Meta Description field:\n\n![Meta description field contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/c\/1\/7\/4c17be0fb01b6051de4e846b02997f2b67546999\/image.png)\n\nThe same issue exists in the **Backend Options** view where the \u201cSite Meta Descriptions\u201d field has a similar information message.\n\n**Suggestion:** Remove the `opacity: 0.7;` modifier from the muted text \u2013 you already set a muted color here, further muting it through opacity makes little sense. Rather change the muted text color.\n\nInstaller Wizard\n----------------\n\nIn the installer wizard, the POPULAR badge in extension headings has a contrast of 1\u22361, as the text is white on white:\n\n![Extension title with the POPULAR badge in white on a white background](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/7\/a\/8\/97a8a6366c16404ac45329c44b39dd73f46f4d2d\/2026-08-04_15-21-56.png)\n\nTo make the badge easier to see, I have replaced the white background color with a purple background color:\n\n![Same heading with a purple bade and white text](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/8\/2\/0\/28209c77e61b8ecf6f62af4f5056207ea656ef3f\/image.png)\n\nEither remove the badge from the code or use a contrasting color scheme.\n\nMFA Setup\n---------\n\nAlmost all text on the MFA Setup page has insufficient contrast in both light and dark modes:\n\n![Screenshot of the MFA setup page in light and dark mode](https:\/\/app.caat.report\/_Resources\/Persistent\/8\/5\/6\/4\/8564b397c5a06222069f795f97a57907e5c638af\/image.png)\n\nThe same light gray text is also used on the MFA setup detail pages, where links have also insufficient contrast:\n\n![Screenshots of the YubiKey detail page](https:\/\/app.caat.report\/_Resources\/Persistent\/5\/e\/7\/c\/5e7c80bc13782e39aacb504e82296aa2d3718865\/image.png)\n\nUpdate Joomla\n-------------\n\nThe text of the tip in the backup on update box does not have sufficient contrast:\n\n![Tip text in the Backup on update box does not have sufficient contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/c\/0\/cac028ac6f231d0a5236d0149f6483c8f3291d2b\/image.png)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T11:14:25+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-31T15:37:30+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-31T15:37:30+02:00",
                "description": "## Text contrast is low\n\nThe contrast of text elements must be at least 4.5\u22361, unless the text is larger than 19 pixels and bold or larger than 24 pixels. In those instances the minimum is 3\u22361.\n\nGuided Tour\n-----------\n\nThe cancel button of the \"Guided Tour\" has a contrast ratio of 2.26\u22361, which is less than 4.5\u22361.\n\n![Cancel button with X icon next to it.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/d\/6\/f\/9d6facd2d230360776c58809700d5e81d98ef2c7\/image.png)\n\n![Color Swatch rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) with contrast ratio 2.26:1 and foreground suggestion rgb(103, 103, 103)](https:\/\/app.caat.report\/_Resources\/Persistent\/7\/a\/e\/9\/7ae94eaecf535ea498a7ba326e4600665bc14923\/image.png)\n\n**Suggestion:** Change the text color to a color that matches the minimum contrast ratio, for example use `rgb(103, 103, 103)` for the text color on the beige `rbg(230, 230, 230)` background.\n\nEmpty Dashboard Card Message &amp; Character Counter\n----------------------------------------------------\n\nIn light mode, the **dashboard** message that shows in an empty dashboard card has a contrast of less than 4.5\u22361 as the `--text-muted-color` (`rgba(33, 37, 41, 0.75)`) is further lightened by an additional `0.7` `opacity` value, resulting in a 3.29\u22361 color contrast. The rendered font size is `16px`, too small for allowing a 3\u22361 contrast which requires text to be bold (which this is) and a font size of `18.5px` or larger.\n\n![Privacy dashboard empty card text](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/a\/a\/2\/1aa28a73e124cb585771e5b221785e770f6c32d6\/image.png)\n\nThe dark mode version of the message exceeds the minimum of 4.5\u22361.\n\nIn the **edit articles** view, the same color and opacity is used to show the remaining characters of the Meta Description field:\n\n![Meta description field contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/c\/1\/7\/4c17be0fb01b6051de4e846b02997f2b67546999\/image.png)\n\nThe same issue exists in the **Backend Options** view where the \u201cSite Meta Descriptions\u201d field has a similar information message.\n\n**Suggestion:** Remove the `opacity: 0.7;` modifier from the muted text \u2013 you already set a muted color here, further muting it through opacity makes little sense. Rather change the muted text color.\n\nInstaller Wizard\n----------------\n\nIn the installer wizard, the POPULAR badge in extension headings has a contrast of 1\u22361, as the text is white on white:\n\n![Extension title with the POPULAR badge in white on a white background](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/7\/a\/8\/97a8a6366c16404ac45329c44b39dd73f46f4d2d\/2026-08-04_15-21-56.png)\n\nTo make the badge easier to see, I have replaced the white background color with a purple background color:\n\n![Same heading with a purple bade and white text](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/8\/2\/0\/28209c77e61b8ecf6f62af4f5056207ea656ef3f\/image.png)\n\nEither remove the badge from the code or use a contrasting color scheme.\n\nMFA Setup\n---------\n\nAlmost all text on the MFA Setup page has insufficient contrast in both light and dark modes:\n\n![Screenshot of the MFA setup page in light and dark mode](https:\/\/app.caat.report\/_Resources\/Persistent\/8\/5\/6\/4\/8564b397c5a06222069f795f97a57907e5c638af\/image.png)\n\nThe same light gray text is also used on the MFA setup detail pages, where links have also insufficient contrast:\n\n![Screenshots of the YubiKey detail page](https:\/\/app.caat.report\/_Resources\/Persistent\/5\/e\/7\/c\/5e7c80bc13782e39aacb504e82296aa2d3718865\/image.png)\n\nUpdate Joomla\n-------------\n\nThe text of the tip in the backup on update box does not have sufficient contrast:\n\n![Tip text in the Backup on update box does not have sufficient contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/c\/0\/cac028ac6f231d0a5236d0149f6483c8f3291d2b\/image.png)\n\n---\n\n## $ icon\/Commercial badge has insufficient contrast\n\nThe icon for Commercial, a white $ on yellow background, and the corresponding full-word badge on the detail page of a plugin do not meet contrast requirements.\n\n![$CMP in yellow, green, red, and blue badges](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/2\/4\/0\/32407db21b46aced60089caf20436b72f5e157bb\/image.png)\n\n![Commercial, Component, Module, Plugin badges](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/8\/4\/2\/9842d92fb157fcd1106e4ebc602f8e5ad6fb53d4\/image.png)\n\nWhile for the icon, a 3:1 contrast is sufficient, using the same color for the full-text badge makes sense.\n\n**Suggestion:** Use a dark text color for the icon and word, consider to add a dark outline around both the icon and the badge.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-31T15:37:30+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T11:14:25+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T11:14:25+02:00",
                "description": "## Text contrast is low\n\nThe contrast of text elements must be at least 4.5\u22361, unless the text is larger than 19 pixels and bold or larger than 24 pixels. In those instances the minimum is 3\u22361.\n\nGuided Tour\n-----------\n\nThe cancel button of the \"Guided Tour\" has a contrast ratio of 2.26\u22361, which is less than 4.5\u22361.\n\n![Cancel button with X icon next to it.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/d\/6\/f\/9d6facd2d230360776c58809700d5e81d98ef2c7\/image.png)\n\n![Color Swatch rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) with contrast ratio 2.26:1 and foreground suggestion rgb(103, 103, 103)](https:\/\/app.caat.report\/_Resources\/Persistent\/7\/a\/e\/9\/7ae94eaecf535ea498a7ba326e4600665bc14923\/image.png)\n\n**Suggestion:** Change the text color to a color that matches the minimum contrast ratio, for example use `rgb(103, 103, 103)` for the text color on the beige `rbg(230, 230, 230)` background.\n\nEmpty Dashboard Card Message &amp; Character Counter\n----------------------------------------------------\n\nIn light mode, the **dashboard** message that shows in an empty dashboard card has a contrast of less than 4.5\u22361 as the `--text-muted-color` (`rgba(33, 37, 41, 0.75)`) is further lightened by an additional `0.7` `opacity` value, resulting in a 3.29\u22361 color contrast. The rendered font size is `16px`, too small for allowing a 3\u22361 contrast which requires text to be bold (which this is) and a font size of `18.5px` or larger.\n\n![Privacy dashboard empty card text](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/a\/a\/2\/1aa28a73e124cb585771e5b221785e770f6c32d6\/image.png)\n\nThe dark mode version of the message exceeds the minimum of 4.5\u22361.\n\nIn the **edit articles** view, the same color and opacity is used to show the remaining characters of the Meta Description field:\n\n![Meta description field contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/c\/1\/7\/4c17be0fb01b6051de4e846b02997f2b67546999\/image.png)\n\nThe same issue exists in the **Backend Options** view where the \u201cSite Meta Descriptions\u201d field has a similar information message.\n\n**Suggestion:** Remove the `opacity: 0.7;` modifier from the muted text \u2013 you already set a muted color here, further muting it through opacity makes little sense. Rather change the muted text color.\n\nInstaller Wizard\n----------------\n\nIn the installer wizard, the POPULAR badge in extension headings has a contrast of 1\u22361, as the text is white on white:\n\n![Extension title with the POPULAR badge in white on a white background](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/7\/a\/8\/97a8a6366c16404ac45329c44b39dd73f46f4d2d\/2026-08-04_15-21-56.png)\n\nTo make the badge easier to see, I have replaced the white background color with a purple background color:\n\n![Same heading with a purple bade and white text](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/8\/2\/0\/28209c77e61b8ecf6f62af4f5056207ea656ef3f\/image.png)\n\nEither remove the badge from the code or use a contrasting color scheme.\n\nMFA Setup\n---------\n\nAlmost all text on the MFA Setup page has insufficient contrast in both light and dark modes:\n\n![Screenshot of the MFA setup page in light and dark mode](https:\/\/app.caat.report\/_Resources\/Persistent\/8\/5\/6\/4\/8564b397c5a06222069f795f97a57907e5c638af\/image.png)\n\nThe same light gray text is also used on the MFA setup detail pages, where links have also insufficient contrast:\n\n![Screenshots of the YubiKey detail page](https:\/\/app.caat.report\/_Resources\/Persistent\/5\/e\/7\/c\/5e7c80bc13782e39aacb504e82296aa2d3718865\/image.png)\n\nUpdate Joomla\n-------------\n\nThe text of the tip in the backup on update box does not have sufficient contrast:\n\n![Tip text in the Backup on update box does not have sufficient contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/c\/0\/cac028ac6f231d0a5236d0149f6483c8f3291d2b\/image.png)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T11:14:25+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T11:14:25+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T11:14:25+02:00",
                "description": "## Text contrast is low\n\nThe contrast of text elements must be at least 4.5\u22361, unless the text is larger than 19 pixels and bold or larger than 24 pixels. In those instances the minimum is 3\u22361.\n\nGuided Tour\n-----------\n\nThe cancel button of the \"Guided Tour\" has a contrast ratio of 2.26\u22361, which is less than 4.5\u22361.\n\n![Cancel button with X icon next to it.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/d\/6\/f\/9d6facd2d230360776c58809700d5e81d98ef2c7\/image.png)\n\n![Color Swatch rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) with contrast ratio 2.26:1 and foreground suggestion rgb(103, 103, 103)](https:\/\/app.caat.report\/_Resources\/Persistent\/7\/a\/e\/9\/7ae94eaecf535ea498a7ba326e4600665bc14923\/image.png)\n\n**Suggestion:** Change the text color to a color that matches the minimum contrast ratio, for example use `rgb(103, 103, 103)` for the text color on the beige `rbg(230, 230, 230)` background.\n\nEmpty Dashboard Card Message &amp; Character Counter\n----------------------------------------------------\n\nIn light mode, the **dashboard** message that shows in an empty dashboard card has a contrast of less than 4.5\u22361 as the `--text-muted-color` (`rgba(33, 37, 41, 0.75)`) is further lightened by an additional `0.7` `opacity` value, resulting in a 3.29\u22361 color contrast. The rendered font size is `16px`, too small for allowing a 3\u22361 contrast which requires text to be bold (which this is) and a font size of `18.5px` or larger.\n\n![Privacy dashboard empty card text](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/a\/a\/2\/1aa28a73e124cb585771e5b221785e770f6c32d6\/image.png)\n\nThe dark mode version of the message exceeds the minimum of 4.5\u22361.\n\nIn the **edit articles** view, the same color and opacity is used to show the remaining characters of the Meta Description field:\n\n![Meta description field contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/c\/1\/7\/4c17be0fb01b6051de4e846b02997f2b67546999\/image.png)\n\nThe same issue exists in the **Backend Options** view where the \u201cSite Meta Descriptions\u201d field has a similar information message.\n\n**Suggestion:** Remove the `opacity: 0.7;` modifier from the muted text \u2013 you already set a muted color here, further muting it through opacity makes little sense. Rather change the muted text color.\n\nInstaller Wizard\n----------------\n\nIn the installer wizard, the POPULAR badge in extension headings has a contrast of 1\u22361, as the text is white on white:\n\n![Extension title with the POPULAR badge in white on a white background](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/7\/a\/8\/97a8a6366c16404ac45329c44b39dd73f46f4d2d\/2026-08-04_15-21-56.png)\n\nTo make the badge easier to see, I have replaced the white background color with a purple background color:\n\n![Same heading with a purple bade and white text](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/8\/2\/0\/28209c77e61b8ecf6f62af4f5056207ea656ef3f\/image.png)\n\nEither remove the badge from the code or use a contrasting color scheme.\n\nMFA Setup\n---------\n\nAlmost all text on the MFA Setup page has insufficient contrast in both light and dark modes:\n\n![Screenshot of the MFA setup page in light and dark mode](https:\/\/app.caat.report\/_Resources\/Persistent\/8\/5\/6\/4\/8564b397c5a06222069f795f97a57907e5c638af\/image.png)\n\nThe same light gray text is also used on the MFA setup detail pages, where links have also insufficient contrast:\n\n![Screenshots of the YubiKey detail page](https:\/\/app.caat.report\/_Resources\/Persistent\/5\/e\/7\/c\/5e7c80bc13782e39aacb504e82296aa2d3718865\/image.png)\n\nUpdate Joomla\n-------------\n\nThe text of the tip in the backup on update box does not have sufficient contrast:\n\n![Tip text in the Backup on update box does not have sufficient contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/c\/0\/cac028ac6f231d0a5236d0149f6483c8f3291d2b\/image.png)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T11:14:25+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T11:36:08+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T11:36:08+02:00",
                "description": "## Text contrast is low\n\nThe contrast of text elements must be at least 4.5\u22361, unless the text is larger than 19 pixels and bold or larger than 24 pixels. In those instances the minimum is 3\u22361.\n\nGuided Tour\n-----------\n\nThe cancel button of the \"Guided Tour\" has a contrast ratio of 2.26\u22361, which is less than 4.5\u22361.\n\n![Cancel button with X icon next to it.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/d\/6\/f\/9d6facd2d230360776c58809700d5e81d98ef2c7\/image.png)\n\n![Color Swatch rgba(128, 128, 128, 0.75) on rgb(230, 230, 230) with contrast ratio 2.26:1 and foreground suggestion rgb(103, 103, 103)](https:\/\/app.caat.report\/_Resources\/Persistent\/7\/a\/e\/9\/7ae94eaecf535ea498a7ba326e4600665bc14923\/image.png)\n\n**Suggestion:** Change the text color to a color that matches the minimum contrast ratio, for example use `rgb(103, 103, 103)` for the text color on the beige `rbg(230, 230, 230)` background.\n\nEmpty Dashboard Card Message &amp; Character Counter\n----------------------------------------------------\n\nIn light mode, the **dashboard** message that shows in an empty dashboard card has a contrast of less than 4.5\u22361 as the `--text-muted-color` (`rgba(33, 37, 41, 0.75)`) is further lightened by an additional `0.7` `opacity` value, resulting in a 3.29\u22361 color contrast. The rendered font size is `16px`, too small for allowing a 3\u22361 contrast which requires text to be bold (which this is) and a font size of `18.5px` or larger.\n\n![Privacy dashboard empty card text](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/a\/a\/2\/1aa28a73e124cb585771e5b221785e770f6c32d6\/image.png)\n\nThe dark mode version of the message exceeds the minimum of 4.5\u22361.\n\nIn the **edit articles** view, the same color and opacity is used to show the remaining characters of the Meta Description field:\n\n![Meta description field contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/c\/1\/7\/4c17be0fb01b6051de4e846b02997f2b67546999\/image.png)\n\nThe same issue exists in the **Backend Options** view where the \u201cSite Meta Descriptions\u201d field has a similar information message.\n\n**Suggestion:** Remove the `opacity: 0.7;` modifier from the muted text \u2013 you already set a muted color here, further muting it through opacity makes little sense. Rather change the muted text color.\n\nInstaller Wizard\n----------------\n\nIn the installer wizard, the POPULAR badge in extension headings has a contrast of 1\u22361, as the text is white on white:\n\n![Extension title with the POPULAR badge in white on a white background](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/7\/a\/8\/97a8a6366c16404ac45329c44b39dd73f46f4d2d\/2026-08-04_15-21-56.png)\n\nTo make the badge easier to see, I have replaced the white background color with a purple background color:\n\n![Same heading with a purple bade and white text](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/8\/2\/0\/28209c77e61b8ecf6f62af4f5056207ea656ef3f\/image.png)\n\nEither remove the badge from the code or use a contrasting color scheme.\n\nMFA Setup\n---------\n\nAlmost all text on the MFA Setup page has insufficient contrast in both light and dark modes:\n\n![Screenshot of the MFA setup page in light and dark mode](https:\/\/app.caat.report\/_Resources\/Persistent\/8\/5\/6\/4\/8564b397c5a06222069f795f97a57907e5c638af\/image.png)\n\nThe same light gray text is also used on the MFA setup detail pages, where links have also insufficient contrast:\n\n![Screenshots of the YubiKey detail page](https:\/\/app.caat.report\/_Resources\/Persistent\/5\/e\/7\/c\/5e7c80bc13782e39aacb504e82296aa2d3718865\/image.png)\n\nUpdate Joomla\n-------------\n\nThe text of the tip in the backup on update box does not have sufficient contrast:\n\n![Tip text in the Backup on update box does not have sufficient contrast](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/c\/0\/cac028ac6f231d0a5236d0149f6483c8f3291d2b\/image.png)\n\n---\n\n## Disabled looking link is not properly disabled and has low contrast\n\nWhen updating Joomla, the user has to check a checkbox to enable the \u201cStart update\u201d button.\n\n![Update your site to Joomla! 6.1.2 notice](https:\/\/app.caat.report\/_Resources\/Persistent\/a\/3\/3\/f\/a33fd92026afc5fa235f6dea6fa0a095f7a3b1bd\/image.png)\n\nWhile there is an exception for disabled buttons having sufficient (4.5:1) contrast, the \u201cStart update\u201d button is a link that only looks disabled. It still can be focused and clicked, but there is nothing happening.\n\nTo make the button properly act like a disabled button, add `aria-disabled=\"true\"` and `tabindex=\"-1\"`. (Remove both attributes when enabling the button.) Alternatively, you can set the link to `inert` while disabled, which will prevent all interactions.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_ef962b8c-b5fc-4a64-af15-acb150a2e68e",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:02+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_joomlaupdate",
                "_description": "",
                "title": "12 \u2013 Update Joomla"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T11:36:08+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T13:36:05+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T13:36:05+02:00",
                "description": "## Very verbose link names when selecting a MFA method\n\nWhen a user selects which MFA method they want to use, they are presented with a list of links:\n\n![List of MFA methods](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/1\/a\/c\/11ac5667b6a46e117a379ee1462bc16e67fc2ed8\/image.png)\n\nThese links contain the link name (Passkey, Code by Email, \u2026) an image that represents that method, and a hint text that is the same text as the actual link name. As the images have `alt` attributes and all three elements are part of the link, the Passkey link\u2019s accessible name is \u201cMy Passkey Passkey Passkey\u201d while the \u201cCode by Email\u201d link\u2019s accessible name is \u201cCode by Email Code by Email Code by Email\u201d.\n\nThe passkey one just does not repeat the same value three times because the passkey was renamed to \u201cMy Passkey\u201d.\n\nThere is no need for such a convoluted naming. Ensure that the `alt` attribute of the graphics are empty (`alt=\"\"`) and remove the duplicated hint text (Code simplified):\n\n**Current code:**\n\n```\n<a class=\"\u2026\" href=\"\u2026\">\r\n  <div class=\"\u2026\">\r\n    <img src=\"\u2026\" alt=\"Backup Codes\" class=\"\u2026\">\r\n  <\/div>\r\n  <span class=\"\u2026\">\r\n    Backup Codes\r\n  <\/span>\r\n  <small class=\"\u2026\">\r\n    Backup Codes\r\n  <\/small>\r\n<\/a>\n```\n\n**Change to:**\n\n```\n<a class=\"\u2026\" href=\"\u2026\">\r\n  <div class=\"\u2026\">\r\n    <img src=\"\u2026\" alt=\"\" class=\"\u2026\">\r\n  <\/div>\r\n  <span class=\"\u2026\">\r\n    Backup Codes\r\n  <\/span>\r\n<\/a>\n```\n\n**Note:** The helper text does not meet contrast requirements, but as the suggestion is to remove it, we did not specify this in detail.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_478ea7bd-256d-41eb-9787-e7e779bcbfe9",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:20+02:00",
                "description": "",
                "_description": "",
                "title": "04 \u2013 MFA Captive View (FE + BE)"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-contrast",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T13:36:05+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-scale",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:visual-audio-contrast-text-presentation",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-04T14:38:11+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-04T14:38:11+02:00",
                "description": "## The list of extensions is not keyboard operable\n\nThe list and grid of extensions consists of clickable `<div>` elements. Keyboard users are unable to open the extension information and install an extension. The keyboard order skips over most of the UI and only interacts with the link that leads to the external ratings.\n\n![Screenshots of the grid and list view with the focus order only touching the ratings](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/7\/5\/6\/c75629243f57aeb3c097303bdd26a015533c214f\/image.png)\n\n**Suggestion:** Ensure that every item uses a link or a button to open the details view. Consider ordering the information in a way that prioritizes the plugin name and information. Maybe this view is due for a full redesign?\n\n---\n\n## Animated scrolling causes bad experiences\n\nWhen clicking the green Install button in the \u201cInstall From Web\u201d section, the page scrolls down to the \u201cPlease confirm the installation by selecting the Install button\u201d section.\n\n![Install button](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/1\/2\/e\/612e9dfcfa76e53f6486673572bf6101aaa4a2ec\/image.png)\n\n![Part of the page that is scrolled to](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/d\/5\/b5d5c517d763d37a05c7904277604055444ed88f\/image.png)\n\nThis sudden and unexpected movement can create issues for people with vestibular disorders. Either remove the scrolling animation (and replace the functionality with a `<dialog>` element, or by showing the real installation button at the top) or *at least* respect user\u2019s prefers reduced motion preferences.\n\nIn addition, the keyboard focus is not set to the section the user has scrolled to, so when a keyboard user presses the tab key to go to the next item, they end up at the top after scrolling to the top.\n\nPressing the \u201cCancel\u201d button hides the section that has been scrolled to and loses the focus, causing a keyboard user to start from the top.\n\n(See attached video for details. Flashing\/scrolling warning.)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-04T14:38:11+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T13:48:39+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T13:48:39+02:00",
                "description": "## Multiple useless buttons\n\nWhen choosing an MFA method, there are multiple buttons that have no functionality and are just obstacles for keyboard users:\n\n![Tablet view of the MFA selector](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/1\/a\/c\/11ac5667b6a46e117a379ee1462bc16e67fc2ed8\/2026-08-07_13-23-19.png)\n\n- The cog\/Toggle Toolbar button opens an empty toolbar.\n- The ellipsis\/More Elements button does nothing.\n- The hamburger\/Toggle Menu button changes to an X but does nothing else.\n\n**Suggestion:** Remove unused buttons.",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_478ea7bd-256d-41eb-9787-e7e779bcbfe9",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:20+02:00",
                "description": "",
                "_description": "",
                "title": "04 \u2013 MFA Captive View (FE + BE)"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T13:48:39+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T11:16:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T11:16:28+02:00",
                "description": "## Calendar widget is not keyboard and screen reader accessible\n\nWhen setting the \u201cStart Publishing\u201d, \u201cEnd Publishing\u201d, and \u201cCreated Date\u201d dates for an article, the date picker component is completely inaccessible by people using the keyboard and for screen reader users.\n\n![Date Picker](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/8\/c\/5\/e8c50df73f38003012f3afe6ec77815e2ac42e0d\/image.png)\n\nThe keyboard focus stays in the input field with the date, and while some arrow key input is shown as changes in the date picker, the datepicker is not set up to be interacted with using the keyboard. For example, it is impossible to confirm a (visibly selected) date, or a time.\n\nThere is no feedback for screen reader users to know where they are in the calendar grid. The links for next year\/month use links without href attributes, which makes them unfocusable.\n\nThe select boxes for hour and minute have no accessible names.\n\n**Suggestion:** Replace this implementation with an accessible implementation.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T11:16:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T11:16:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T11:16:28+02:00",
                "description": "## Calendar widget is not keyboard and screen reader accessible\n\nWhen setting the \u201cStart Publishing\u201d, \u201cEnd Publishing\u201d, and \u201cCreated Date\u201d dates for an article, the date picker component is completely inaccessible by people using the keyboard and for screen reader users.\n\n![Date Picker](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/8\/c\/5\/e8c50df73f38003012f3afe6ec77815e2ac42e0d\/image.png)\n\nThe keyboard focus stays in the input field with the date, and while some arrow key input is shown as changes in the date picker, the datepicker is not set up to be interacted with using the keyboard. For example, it is impossible to confirm a (visibly selected) date, or a time.\n\nThere is no feedback for screen reader users to know where they are in the calendar grid. The links for next year\/month use links without href attributes, which makes them unfocusable.\n\nThe select boxes for hour and minute have no accessible names.\n\n**Suggestion:** Replace this implementation with an accessible implementation.\n\n---\n\n## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T11:16:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-17T12:29:55+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-17T12:29:55+02:00",
                "description": "## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-17T12:29:55+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-17T12:29:55+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-17T12:29:55+02:00",
                "description": "## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-17T12:29:55+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-22T14:03:27+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-22T14:03:27+02:00",
                "description": "## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.\n\n---\n\n## Article rows can only be reordered using drag and drop\n\nOn the article list view, the rows of articles can be reordered using drag and drop. This functionality is not otherwise available to users who do not use pointer devices or are able to use dragging movements.\n\n![Drag handles](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/3\/f\/2\/63f2afabb79f4d943c9d515fc8e93b353c6c5ddb\/image.png)\n\nThe ability to reorder the articles needs to be accessible for people using keyboard input as well as people who cannot perform drag and drop movements. The easiest way is to add arrows next to the drag handles that allow reordering of the articles.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-22T14:03:27+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-20T16:09:46+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-20T16:09:46+02:00",
                "description": "## Media manager: Visual information is not conveyed programmatically, keyboard navigation is inconsistent, elements lack roles and states, names\n\nTo allow screen reader and other assistive technologies to interact with the content in a meaningful way, information that is conveyed visually needs to also be available to those tools programmatically.\n\nOn websites and in web apps, this usually means clear accessible names, states and structure. The media manager interface misses to convey the information in various places.\n\nIn the **grid view**, the focusable icons for folders have no accessible name and no role. The checkmarks to select individual items have no role and hence also cannot receive the name through `aria-label`. Their status is not set. The checkboxes cannot be set using space or enter.\n\n![Folders and files, focusable with the keyboard but role-less](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/b\/d\/0\/9bd0010d44b32554dc5aebd5fa1bc4394eb6d077\/image.png)\n\nThe ellipsis button that shows the sub menu to manage files does not expand using the arrow keys, but once expanded behaves like a toolbar with arrow navigation. This is inconsistent and also not communicated through roles and properties.\n\nKeyboard interaction is inconsistent in the ellipsis menu in general. Sometimes the arrow key works as expected, occasionally the page scrolls, and sometimes the preview of a file is opened.\n\nPressing ESC does not close the ellipsis menu.\n\nThe **table view** is not keyboard accessible at all. Its columns can be sorted, but there is no programmatic indication of the current sorting direction.\n\nIn **both views**, the information panel cannot be filled when using the keyboard as activating an item immediately opens the folder or shows a preview of the file.\n\nThe **toolbar** also has accessibility issues:\n\n![Grid and table view toolbars](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/f\/0\/c\/9f0cd3cdb0b77b4bfc26b2ec76bb5cf2b8399c9a\/image.png)\n\n- The \u201cToggle select all\u201d checkbox is implemented as a regular checkbox, and hence works as expected. (Consider dropping the word \u201ctoggle\u201d from its accessible name, it is unnecessarily wordy and can be confusing. That the UI element toggles is implied by the fact that it is a checkbox.)\n- The file path navigation does not well convey what it is visually and also uses a navigation (`<nav>`) element that has the `aria-label` of `Breadcrumb`. As this is not a classical navigation like a page navigation, consider using a different element. Pick a better accessible name than \u201cBreadcrumb\u201d, for example \u201cCurrent path\u201d.\n- The search field that filters the results shows an alert visually when there are no matches, but does not convey it to the assistive technologies.\n- The sort button (\u201cChange ordering\u201d) opens two select boxes that allow you to select what to order by and in which direction, but the select boxes are positioned after other buttons and the button does not convey that something would open. This makes the actual sorting options difficult to find.\n- The buttons to change the grid size look disabled when the minimum\/maximum grid size is selected, but they are not made disabled programmatically. So the icons need to meet contrast requirements (at least 3\u22361 contrast).\n- The switch from grid to list view and vice versa is named \u201cToggle between grid and table views\u201d and gives users no indication on what mode is selected.\n- The toggle item info button does not indicate if the item info pane is shown or not.\n\nThe **folder tree** navigation is unclear to users and not properly implemented. Especially there roles need to be properly nested and expanded\/collapsed set properly. [See this example from W3C\/WAI.](https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/treeview\/examples\/treeview-1a\/) That said, even the WAI treeview works sub-optimally on platforms that do not support treeviews natively, namely macOS and iOS.\n\n![Tree view](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/a\/5\/8\/6a58eaa424987f8ddeb8db3c49c15c8ecbb5c433\/image.png)\n\nSuggestion\n----------\n\nInstead of fixing the individual issues, it makes sense to re-think how the media manager is built and works and plan it from the ground up in an accessible way.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-keyboard-operable",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-20T16:09:46+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:keyboard-operation-trapping",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-15T16:50:28+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-15T16:50:28+02:00",
                "description": "## User session time limit\n\nThe time limit to be logged out due to inactivity logs users out without a notice. Ensure that users can do one of the following actions:\n\n- **Turn off:** The user is allowed to turn off the time limit before encountering it; or\n- **Adjust:** The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or\n- **Extend:** The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, \"press the space bar\"), and the user is allowed to extend the time limit at least ten times.\n\nAlternatively, extend the time limit to over 20 hours.\n\n---\n\n## Keyboard shortcuts time limit\n\nWhen using the `J` plus other key shortcuts, there is a time limit between hitting one key and the next. This sequence is relatively short and some users with disabilities will find it difficult to press two buttons in short sequence.\n\nAllow users, for example in their personal accessibility settings, to adjust the time limit between the two keystrokes to up to 10 times of the initial length.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_ef962b8c-b5fc-4a64-af15-acb150a2e68e",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:02+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_joomlaupdate",
                "_description": "",
                "title": "12 \u2013 Update Joomla"
            },
            "test": {
                "id": "WCAG20:time-limits-required-behaviors",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-15T16:50:28+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:time-limits-pause",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-04T14:38:11+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-04T14:38:11+02:00",
                "description": "## Animated scrolling causes bad experiences\n\nWhen clicking the green Install button in the \u201cInstall From Web\u201d section, the page scrolls down to the \u201cPlease confirm the installation by selecting the Install button\u201d section.\n\n![Install button](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/1\/2\/e\/612e9dfcfa76e53f6486673572bf6101aaa4a2ec\/image.png)\n\n![Part of the page that is scrolled to](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/d\/5\/b5d5c517d763d37a05c7904277604055444ed88f\/image.png)\n\nThis sudden and unexpected movement can create issues for people with vestibular disorders. Either remove the scrolling animation (and replace the functionality with a `<dialog>` element, or by showing the real installation button at the top) or *at least* respect user\u2019s prefers reduced motion preferences.\n\nIn addition, the keyboard focus is not set to the section the user has scrolled to, so when a keyboard user presses the tab key to go to the next item, they end up at the top after scrolling to the top.\n\nPressing the \u201cCancel\u201d button hides the section that has been scrolled to and loses the focus, causing a keyboard user to start from the top.\n\n(See attached video for details. Flashing\/scrolling warning.)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:time-limits-pause",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-04T14:38:11+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:seizure-does-not-violate",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-skip",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T11:22:06+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T11:22:06+02:00",
                "description": "## No skip links available\n\nIn the frontend Cassopeia template, there are no skip links implemented by default. While screen reader and other assistive technology users can navigate by landmarks (banner\/navigation\/main), this is not possible for keyboard-only users.\n\nWhen editing an entry, providing a skip link directly to the edit form is useful for efficient keyboard navigation.\n\n**Suggestion:** Allow keyboard-only users to at least skip the main navigation with a \u201cskip to content\u201d link. You might also want to include a skip link to other important parts of the page, for example to the login form.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_e5625254-e773-4979-b9a5-d715d82b7597",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:11:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/",
                "_description": "",
                "title": "02 \u2013 Frontend Template (Cassiopeia)"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-skip",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T11:22:06+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T11:22:06+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T11:22:06+02:00",
                "description": "## No skip links available\n\nIn the frontend Cassopeia template, there are no skip links implemented by default. While screen reader and other assistive technology users can navigate by landmarks (banner\/navigation\/main), this is not possible for keyboard-only users.\n\nWhen editing an entry, providing a skip link directly to the edit form is useful for efficient keyboard navigation.\n\n**Suggestion:** Allow keyboard-only users to at least skip the main navigation with a \u201cskip to content\u201d link. You might also want to include a skip link to other important parts of the page, for example to the login form.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-skip",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T11:22:06+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-title",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T14:19:57+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T14:19:57+02:00",
                "description": "## Unclear page title\n\n10 \u2013 Frontend User Forms\n------------------------\n\nWhen editing a module, the page title is always \u201cModule Settings\u201d, regardless of which module has been selected for editing.\n\nUse descriptive titles like \u201cMain Menu Module Settings\u201d.\n\n13 \u2013 Install Joomla\n-------------------\n\nAll installation steps have the same title. This can be confusing. Different titles also support people with disabilities when they complete a form by announcing the next step.\n\nUse the fieldset legend to make the `<title>` element more concrete: \u201cDatabase Configuration \u2013 Install Joomla\u201d",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-title",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T14:19:57+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T14:19:57+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T14:19:57+02:00",
                "description": "## Unclear page title\n\n10 \u2013 Frontend User Forms\n------------------------\n\nWhen editing a module, the page title is always \u201cModule Settings\u201d, regardless of which module has been selected for editing.\n\nUse descriptive titles like \u201cMain Menu Module Settings\u201d.\n\n13 \u2013 Install Joomla\n-------------------\n\nAll installation steps have the same title. This can be confusing. Different titles also support people with disabilities when they complete a form by announcing the next step.\n\nUse the fieldset legend to make the `<title>` element more concrete: \u201cDatabase Configuration \u2013 Install Joomla\u201d",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-title",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T14:19:57+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-27T10:20:41+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-27T10:20:41+02:00",
                "description": "## Closing a dialog does not return the focus to the element triggering the dialog\n\nWhen opening a dialog from the *CMS Content* menu in the editor, and closing that dialog with ESC or via other means, the focus often gets lost and reset to the top of the page.\n\nThe expected behavior would be to put the focus back on the button or menu item that opened the dialog. As the menu items that trigger the dialog are hidden once the dialog is closed, the focus should be returned to the *CMS Content* button.\n\n---\n\n## Calendar widget is not keyboard and screen reader accessible\n\nWhen setting the \u201cStart Publishing\u201d, \u201cEnd Publishing\u201d, and \u201cCreated Date\u201d dates for an article, the date picker component is completely inaccessible by people using the keyboard and for screen reader users.\n\n![Date Picker](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/8\/c\/5\/e8c50df73f38003012f3afe6ec77815e2ac42e0d\/image.png)\n\nThe keyboard focus stays in the input field with the date, and while some arrow key input is shown as changes in the date picker, the datepicker is not set up to be interacted with using the keyboard. For example, it is impossible to confirm a (visibly selected) date, or a time.\n\nThere is no feedback for screen reader users to know where they are in the calendar grid. The links for next year\/month use links without href attributes, which makes them unfocusable.\n\nThe select boxes for hour and minute have no accessible names.\n\n**Suggestion:** Replace this implementation with an accessible implementation.\n\n---\n\n## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.\n\n---\n\n## Button order confusing\n\nSometimes, the *Save &amp; Close* button has additional options which are signaled by a drop down arrow on the right of the button with the accessible label \u201cToggle Dropdown\u201d.\n\n![Save & Close with Toggle Dropdown button](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/c\/d\/a\/2cda6d43703d8e9aa4126089a71e88e75906ddb5\/image.png)\n\nIn the keyboard focus order, however, the dropdown button comes first, meaning that a user comes across the secondary information first, before the primary one.\n\n![Same screenshot but with keyboard interaction numbers showing the keyboard order.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/2\/e\/c\/92ecac318d451bb7dd732a5ec1fd6107054d3ad6\/image.png)\n\nFor screen reader users, the announcement is also confusing:\n\n\ud83d\udde3\ufe0f *Save, button; Toggle Dropdown, menu pop up, button; Save and Close, button*\n\nWhile the announcement of \u201cToggle Dropdown, menu pop up, button\u201d could mean that there are alternatives to saving the document, the actual options are for \u201cSave &amp; Close\u201d. In addition, the accessible name \u201cToggle Dropdown\u201d is non-descriptive, especially as the role of the element already conveys that this is a \u201cDropdown\u201d.\n\n**Suggestion:** Ensure that the order of the buttons in the code matches the order of the buttons on screen. Use a different accessible name for the \u201cToggle Dropdown\u201d button, for example \u201cSave options\u201d or similar.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-27T10:20:41+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Calendar widget is not keyboard and screen reader accessible\n\nWhen setting the \u201cStart Publishing\u201d, \u201cEnd Publishing\u201d, and \u201cCreated Date\u201d dates for an article, the date picker component is completely inaccessible by people using the keyboard and for screen reader users.\n\n![Date Picker](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/8\/c\/5\/e8c50df73f38003012f3afe6ec77815e2ac42e0d\/image.png)\n\nThe keyboard focus stays in the input field with the date, and while some arrow key input is shown as changes in the date picker, the datepicker is not set up to be interacted with using the keyboard. For example, it is impossible to confirm a (visibly selected) date, or a time.\n\nThere is no feedback for screen reader users to know where they are in the calendar grid. The links for next year\/month use links without href attributes, which makes them unfocusable.\n\nThe select boxes for hour and minute have no accessible names.\n\n**Suggestion:** Replace this implementation with an accessible implementation.\n\n---\n\n## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-22T11:42:15+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-22T11:42:15+02:00",
                "description": "## Filter Options button has no indicator of state, focus is not guided to filter options\n\nThe filter options button does not indicate that it expands content on the page. The only indicator that the content is expanded is the existence of the filter options elsewhere on the page.\n\nThis is problematic as people who use zoom to interact with the page have the impression that nothing has happened. Screen reader users will also have a more difficult time to find the filter options as they are not in the proximity of the expanded button.\n\n![Filter options: Closed, expanded, and with the focus order overlaid](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/e\/2\/6\/2e26a5e69abe80c44d143edcdd688c206ca762e8\/image.png)\n\n**Suggestion:** Add the `aria-expanded` attribute to the filter options button. Show the options directly after the button that expands the options. Make sure that the button clearly communicates its expanded state visually, too, for example by using different icons.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-22T11:42:15+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-27T10:20:41+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-27T10:20:41+02:00",
                "description": "## Button order confusing\n\nSometimes, the *Save &amp; Close* button has additional options which are signaled by a drop down arrow on the right of the button with the accessible label \u201cToggle Dropdown\u201d.\n\n![Save & Close with Toggle Dropdown button](https:\/\/app.caat.report\/_Resources\/Persistent\/2\/c\/d\/a\/2cda6d43703d8e9aa4126089a71e88e75906ddb5\/image.png)\n\nIn the keyboard focus order, however, the dropdown button comes first, meaning that a user comes across the secondary information first, before the primary one.\n\n![Same screenshot but with keyboard interaction numbers showing the keyboard order.](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/2\/e\/c\/92ecac318d451bb7dd732a5ec1fd6107054d3ad6\/image.png)\n\nFor screen reader users, the announcement is also confusing:\n\n\ud83d\udde3\ufe0f *Save, button; Toggle Dropdown, menu pop up, button; Save and Close, button*\n\nWhile the announcement of \u201cToggle Dropdown, menu pop up, button\u201d could mean that there are alternatives to saving the document, the actual options are for \u201cSave &amp; Close\u201d. In addition, the accessible name \u201cToggle Dropdown\u201d is non-descriptive, especially as the role of the element already conveys that this is a \u201cDropdown\u201d.\n\n**Suggestion:** Ensure that the order of the buttons in the code matches the order of the buttons on screen. Use a different accessible name for the \u201cToggle Dropdown\u201d button, for example \u201cSave options\u201d or similar.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-27T10:20:41+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-04T14:38:11+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-04T14:38:11+02:00",
                "description": "## Animated scrolling causes bad experiences\n\nWhen clicking the green Install button in the \u201cInstall From Web\u201d section, the page scrolls down to the \u201cPlease confirm the installation by selecting the Install button\u201d section.\n\n![Install button](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/1\/2\/e\/612e9dfcfa76e53f6486673572bf6101aaa4a2ec\/image.png)\n\n![Part of the page that is scrolled to](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/d\/5\/b5d5c517d763d37a05c7904277604055444ed88f\/image.png)\n\nThis sudden and unexpected movement can create issues for people with vestibular disorders. Either remove the scrolling animation (and replace the functionality with a `<dialog>` element, or by showing the real installation button at the top) or *at least* respect user\u2019s prefers reduced motion preferences.\n\nIn addition, the keyboard focus is not set to the section the user has scrolled to, so when a keyboard user presses the tab key to go to the next item, they end up at the top after scrolling to the top.\n\nPressing the \u201cCancel\u201d button hides the section that has been scrolled to and loses the focus, causing a keyboard user to start from the top.\n\n(See attached video for details. Flashing\/scrolling warning.)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-order",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-04T14:38:11+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-refs",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T16:13:51+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T16:13:51+02:00",
                "description": "## Tags are just stand-alone links without context\n\nFor visual users the design and positioning of the tags on the page makes it clear that the links are tags. A user using assistive technology like a screen reader has no hints that the links are tags.\n\n![Tags: Millions Worldwide Love Joomla 6](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/3\/e\/1\/63e15fe56e1cc3d4cc3075e31e9360d925570d62\/image.png)\n\nUse a grouping container that is labeled or label the existing list.\n\n**Currently:**\n\n```\n<ul class=\"tags list-inline\" style=\"\">\r\n  <li class=\"list-inline-item tag-2 tag-list0\">\r\n    <a href=\"\u2026\" class=\"btn btn-sm btn-info\">Millions<\/a>\r\n  <\/li>\r\n  \u2026\r\n<\/ul>\n```\n\n**Suggested:**\n\n```\n<ul aria-label=\"Tags\" class=\"tags list-inline\" style=\"\">\r\n  <li class=\"list-inline-item tag-2 tag-list0\">\r\n    <a href=\"\u2026\" class=\"btn btn-sm btn-info\">Millions<\/a>\r\n  <\/li>\r\n  \u2026\r\n<\/ul>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_e5625254-e773-4979-b9a5-d715d82b7597",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:11:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/",
                "_description": "",
                "title": "02 \u2013 Frontend Template (Cassiopeia)"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-refs",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T16:13:51+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:cantTell",
                    "type": [
                        "OutcomeValue",
                        "CannotTell"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-mult-loc",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-descriptive",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-descriptive",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-descriptive",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-descriptive",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-16T15:55:37+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-16T15:55:37+02:00",
                "description": "## The focus indicator is undefined and can produce difficult or invisible indicators\n\nFocus indicators are essential as they allow users that use the keyboard or keyboard interfaces to navigate user interfaces efficiently. The indicator style highlights visually where a user is and acts (with the indicators of the previous UI component\u2019s indicators) as a guide through the structure of the site.\n\n01 \u2013 Backend Template (Atum)\n----------------------------\n\nThe Joomla! Admin template, especially in the navigation, focus styles are often undefined. The browser\u2019s default focus styles often do not meet the requirements.\n\nThe following graphic shows the \u201cToggle Menu\u201d button (top) and its hover state (middle) and focus state (bottom):\n\n![The three states](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/8\/b\/a\/c8ba60d5200ce2d35dbe9da39f9b3f23e5757743\/image.png)\n\nThe focused and unfocused states are the same, so it is impossible for a user to know where they are on the page.\n\nIn the buttons on the top of the page, here for example the post installation message, the hover style is a brighter blue while the focus style has a blue outline around the button in Safari. While other browsers have more visible focus styles, relying on the default can make it barely visible, especially on dark backgrounds.\n\n![Post Installation Messages button](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/8\/f\/c\/08fcf5f421357a7fb38ecd8486ed3fed15f050c7\/image.png)\n\nUsing the hover style for focus is often not sufficient (and it wouldn\u2019t be here) as hover styles can be more subtle as the user is already following the cursor with their eyes. This is not necessarily true for keyboard focus.\n\n06 \u2013 Media Manager\n------------------\n\nA visible focus indicator is missing or undefined here as well, for example when the Toolbar button is focused, there is no visual indicator.\n\n![Focused toolbar button](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/5\/b\/d\/15bdaab8d66c1f34c704ae43304cbf8beaedc7e4\/image.png)\n\nSuggestion\n----------\n\nTo implement a general focus indicator that is visible on many different backgrounds, follow [Sara Soueidan\u2019s tutorial](https:\/\/www.sarasoueidan.com\/blog\/focus-indicators\/#a-%E2%80%98universal%E2%80%99-focus-indicator).",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-visible",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-16T15:55:37+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-04T14:38:11+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-04T14:38:11+02:00",
                "description": "## Animated scrolling causes bad experiences\n\nWhen clicking the green Install button in the \u201cInstall From Web\u201d section, the page scrolls down to the \u201cPlease confirm the installation by selecting the Install button\u201d section.\n\n![Install button](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/1\/2\/e\/612e9dfcfa76e53f6486673572bf6101aaa4a2ec\/image.png)\n\n![Part of the page that is scrolled to](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/d\/5\/b5d5c517d763d37a05c7904277604055444ed88f\/image.png)\n\nThis sudden and unexpected movement can create issues for people with vestibular disorders. Either remove the scrolling animation (and replace the functionality with a `<dialog>` element, or by showing the real installation button at the top) or *at least* respect user\u2019s prefers reduced motion preferences.\n\nIn addition, the keyboard focus is not set to the section the user has scrolled to, so when a keyboard user presses the tab key to go to the next item, they end up at the top after scrolling to the top.\n\nPressing the \u201cCancel\u201d button hides the section that has been scrolled to and loses the focus, causing a keyboard user to start from the top.\n\n(See attached video for details. Flashing\/scrolling warning.)",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:navigation-mechanisms-focus-visible",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-04T14:38:11+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:meaning-doc-lang-id",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:inapplicable",
                    "type": [
                        "OutcomeValue",
                        "NotApplicable"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:meaning-other-lang-id",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-receive-focus",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-21T15:20:36+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-21T15:20:36+02:00",
                "description": "## Rotation selection button create unpredictable result\n\nWhen using the Angle Buttons when editing a graphic or photo, when using the keyboard, the rotation is automatically applied using the arrow keys to interact with the (invisible radio buttons.\n\n![Angle Buttons for rotation, 270 (degrees) selected](https:\/\/app.caat.report\/_Resources\/Persistent\/f\/8\/2\/3\/f823f2daa30311746582862b39886229b1023068\/image.png)\n\nThis results in the keyboard focusing the 0 degree button, when using the arrow key to go to 90, the image automatically flips 90 degrees. Going to the next button does not flip the image 180 degrees from the initial setting, but 180 degrees from the now 90 degree image. Going to 270 degrees then rotates an additional 270 degrees.\n\n**Suggestion:** Add an apply button and let users select an angle first and then apply it. Alternatively make the buttons buttons instead of radio buttons, so that users have the ability to skip options they don\u2019t want to apply. Also make clear that the buttons add the degrees to the current rotation. Consider displaying somewhere what the combined rotation is.\n\nSee the attached video for details.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-receive-focus",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-21T15:20:36+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-unpredictable-change",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-22T14:09:56+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-22T14:09:56+02:00",
                "description": "## Changing an option in a select reloads the page\n\nChanging a setting in a `<select>` element causes a reload of the page, which is a change of context. Users who use the keyboard to navigate the page need to start from the top of the page again, as do screen reader users.\n\nInstead of reloading the whole page, refresh only the content on the page that changes. If that is not possible and you have to refresh the page, warn users and set the focus to the element that has caused the reload.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-unpredictable-change",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-22T14:09:56+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-22T14:09:56+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-22T14:09:56+02:00",
                "description": "## Changing an option in a select reloads the page\n\nChanging a setting in a `<select>` element causes a reload of the page, which is a change of context. Users who use the keyboard to navigate the page need to start from the top of the page again, as do screen reader users.\n\nInstead of reloading the whole page, refresh only the content on the page that changes. If that is not possible and you have to refresh the page, warn users and set the focus to the element that has caused the reload.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-unpredictable-change",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-22T14:09:56+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:cantTell",
                    "type": [
                        "OutcomeValue",
                        "CannotTell"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-consistent-locations",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:consistent-behavior-consistent-functionality",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:minimize-error-identified",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T15:58:50+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T15:58:50+02:00",
                "description": "## Password requirements are not associated with the password fields\n\nWhen setting the password for the administrator of the Joomla installation, there is a password requirement of at least 12 characters.\n\n![Password field](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/2\/a\/b52aabccf9e3d734450cb2f5ba78848e73ee98f7\/image.png)\n\nHowever the only error information a screen reader or assistive technology user would get its that \u201cThis value is not valid\u201d as long as the password is less than 12 characters long. That there is a 12 character requirement is not conveyed to assistive technology users as they enter the password. There is an `<output>` element that only announces \u201cPassword doesn\u2019t meet the site\u2019s requirements.\u201d when an isufficient password is read.\n\nEnsure that the requirement \u201cEnter at least 12 characters\u201d is associated with the password field using `aria-describedby` attribute pointing at the message\u2018s ID attribute. Also consider using [autocomplete=\"new-password\"](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\/autocomplete#new-password).",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:minimize-error-identified",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T15:58:50+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:minimize-error-cues",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:minimize-error-cues",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:minimize-error-cues",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:minimize-error-cues",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T15:58:50+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T15:58:50+02:00",
                "description": "## Password requirements are not associated with the password fields\n\nWhen setting the password for the administrator of the Joomla installation, there is a password requirement of at least 12 characters.\n\n![Password field](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/2\/a\/b52aabccf9e3d734450cb2f5ba78848e73ee98f7\/image.png)\n\nHowever the only error information a screen reader or assistive technology user would get its that \u201cThis value is not valid\u201d as long as the password is less than 12 characters long. That there is a 12 character requirement is not conveyed to assistive technology users as they enter the password. There is an `<output>` element that only announces \u201cPassword doesn\u2019t meet the site\u2019s requirements.\u201d when an isufficient password is read.\n\nEnsure that the requirement \u201cEnter at least 12 characters\u201d is associated with the password field using `aria-describedby` attribute pointing at the message\u2018s ID attribute. Also consider using [autocomplete=\"new-password\"](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\/autocomplete#new-password).",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:minimize-error-cues",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T15:58:50+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:passed",
                    "type": [
                        "OutcomeValue",
                        "Pass"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:minimize-error-suggestions",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:minimize-error-reversible",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-31T13:36:58+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-31T13:36:58+02:00",
                "description": "## File upload limit is not associated with upload button\n\nWhen uploading a plugin file, the maximum file size is available for visual users in context with the drag and drop\/file upload button.\n\n![Upload button](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/5\/5\/d\/c55d56a6a5a3e1348193bb418f2d7b2745a02e0c\/image.png)\n\nHowever, users of assistive technologies arrive at the button before noticing the upload limit, which might lead to larger files being uploaded.\n\n**Suggestion:** Use `aria-describedby` to assign the upload limit to the button by referencing the upload limit text\u2019s ID value as the `aria-describedby` value:\n\n```\n<p>\r\n  <button id=\"select-file-button\" type=\"button\" class=\"btn btn-success\" aria-describedby=\"maxUploadSize\">\r\n    Or browse for file\r\n  <\/button>\r\n<\/p>\r\n<p id=\"maxUploadSize\">Maximum upload size: <strong>\u200e128.00 MB<\/strong><\/p>\n```",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_4ed7177b-4d7a-43e7-bd7e-de82ec0bf023",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:42:05+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_installer",
                "_description": "",
                "title": "07 \u2013 Installer Wizard (com_installer\/Install)"
            },
            "test": {
                "id": "WCAG20:minimize-error-reversible",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-31T13:36:58+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-09T15:58:50+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-09T15:58:50+02:00",
                "description": "## Password requirements are not associated with the password fields\n\nWhen setting the password for the administrator of the Joomla installation, there is a password requirement of at least 12 characters.\n\n![Password field](https:\/\/app.caat.report\/_Resources\/Persistent\/b\/5\/2\/a\/b52aabccf9e3d734450cb2f5ba78848e73ee98f7\/image.png)\n\nHowever the only error information a screen reader or assistive technology user would get its that \u201cThis value is not valid\u201d as long as the password is less than 12 characters long. That there is a 12 character requirement is not conveyed to assistive technology users as they enter the password. There is an `<output>` element that only announces \u201cPassword doesn\u2019t meet the site\u2019s requirements.\u201d when an isufficient password is read.\n\nEnsure that the requirement \u201cEnter at least 12 characters\u201d is associated with the password field using `aria-describedby` attribute pointing at the message\u2018s ID attribute. Also consider using [autocomplete=\"new-password\"](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Reference\/Attributes\/autocomplete#new-password).",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_9ed32741-d497-4791-a168-15ea4fea12f5",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:07:04+02:00",
                "description": "",
                "_description": "",
                "title": "13 \u2013 Install Joomla"
            },
            "test": {
                "id": "WCAG20:minimize-error-reversible",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-09T15:58:50+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:untested",
                    "type": [
                        "OutcomeValue",
                        "NotTested"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:ensure-compat-parses",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-17T12:25:32+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-17T12:25:32+02:00",
                "description": "",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_1",
                "type": [
                    "TestSubject",
                    "Website"
                ],
                "date": "2026-07-07T12:03:58+02:00",
                "description": "",
                "title": "Joomla! WCAG Audit"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-17T12:25:32+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Calendar widget is not keyboard and screen reader accessible\n\nWhen setting the \u201cStart Publishing\u201d, \u201cEnd Publishing\u201d, and \u201cCreated Date\u201d dates for an article, the date picker component is completely inaccessible by people using the keyboard and for screen reader users.\n\n![Date Picker](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/8\/c\/5\/e8c50df73f38003012f3afe6ec77815e2ac42e0d\/image.png)\n\nThe keyboard focus stays in the input field with the date, and while some arrow key input is shown as changes in the date picker, the datepicker is not set up to be interacted with using the keyboard. For example, it is impossible to confirm a (visibly selected) date, or a time.\n\nThere is no feedback for screen reader users to know where they are in the calendar grid. The links for next year\/month use links without href attributes, which makes them unfocusable.\n\nThe select boxes for hour and minute have no accessible names.\n\n**Suggestion:** Replace this implementation with an accessible implementation.\n\n---\n\n## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_c01526ad-a0fc-41e8-be71-cf5680569414",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:47:46+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=article&layout=edit&id=11",
                "_description": "",
                "title": "09 \u2013 Backend Edit Form Pattern"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Calendar widget is not keyboard and screen reader accessible\n\nWhen setting the \u201cStart Publishing\u201d, \u201cEnd Publishing\u201d, and \u201cCreated Date\u201d dates for an article, the date picker component is completely inaccessible by people using the keyboard and for screen reader users.\n\n![Date Picker](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/8\/c\/5\/e8c50df73f38003012f3afe6ec77815e2ac42e0d\/image.png)\n\nThe keyboard focus stays in the input field with the date, and while some arrow key input is shown as changes in the date picker, the datepicker is not set up to be interacted with using the keyboard. For example, it is impossible to confirm a (visibly selected) date, or a time.\n\nThere is no feedback for screen reader users to know where they are in the calendar grid. The links for next year\/month use links without href attributes, which makes them unfocusable.\n\nThe select boxes for hour and minute have no accessible names.\n\n**Suggestion:** Replace this implementation with an accessible implementation.\n\n---\n\n## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.\n\n---\n\n## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_a24701f2-164a-4336-a6cb-2bbd2586ab76",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:52:18+02:00",
                "description": "",
                "_description": "",
                "title": "10 \u2013 Frontend User Forms"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-17T13:56:29+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-17T13:56:29+02:00",
                "description": "## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.\n\n---\n\n## Menu toggle button does not convey state, uses wrong role\n\nThe \u201cToggle Menu\u201d button is implemented using a link and also does not convey the current state to users of assistive technologies.\n\n![The expanded and collapsed menu states](https:\/\/app.caat.report\/_Resources\/Persistent\/4\/f\/1\/e\/4f1e5e919f014fa8e7feee4fa0d1851b9949d5a1\/image.png)\n\nThis is the current HTML code:\n\n```\n<a id=\"menu-collapse\" href=\"#\" aria-label=\"Toggle Menu\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-on|off\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Toggle Menu<\/span>\r\n<\/a>\n```\n\n**Suggestion:** Instead of using a link without a target, use a `<button>` element. In addition to conveying the correct semantics to screen reader users, this also enables the use of the space key in addition to the return key to activate the button.\n\nUse `aria-pressed` on the `<button>` element to convey if the button is pressed or not.\n\nLastly, decide on the default state of the button and use that state as the button text.\n\n```\n<button id=\"menu-collapse\" aria-label=\"Collapse Menu\" aria-pressed=\"true|false\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-on|off\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Collapse Menu<\/span>\r\n<\/button>\n```\n\n**Alternative:** Instead of using the aria-pressed attribute of the button to determine the current state of the button, you can also decide to change the button text:\n\n```\n<button id=\"menu-collapse\" aria-label=\"Collapse Menu\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-off\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Collapse Menu<\/span>\r\n<\/button>\n```\n\n```\n<button id=\"menu-collapse\" aria-label=\"Show Menu\">\r\n <span id=\"menu-collapse-icon\" class=\"icon-fw icon-toggle-on\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sidebar-item-title\">Show Menu<\/span>\r\n<\/button>\n```\n\n**Note:** In general we do not recommend to use `aria-label` when the accessible name of the user interface element already has a visible text that can act as an accessible name. `aria-label` is often overlooked or miscopied and as its values are not immediately visible difficult to debug. Wherever you can either rely on the contents to label a user interface element or use `aria-labelledby` to point at an element ID with the visible accessible name.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_35ebd70d-141c-4469-a28d-8d484dd392d3",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:09:03+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php",
                "_description": "",
                "title": "01 \u2013 Backend Template (Atum)"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-17T13:56:29+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-17T12:29:55+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-17T12:29:55+02:00",
                "description": "## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_7da173ed-4ad2-4b8b-adb3-97014b50a3e0",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:55+02:00",
                "description": "",
                "_description": "",
                "title": "05 \u2013 MFA Setup - Method \/ Methods Views"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-17T12:29:55+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-17T12:29:55+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-17T12:29:55+02:00",
                "description": "## Tooltip is inaccessible\n\nTooltips are little windows that show additional secondary information, usually on hover with a pointer device like a mouse. However, not every user can use a pointer device. Also, the user might need to move the pointer to read the content of the tooltip. This means there are additional requirements for tooltips that the Joomla! backend does not meet.\n\n01 \u2013 Backend Template\n---------------------\n\n![Screenshot of the popular articles with the Joomla page having a lock on its left side which displays a tooltip \u201cChecked out stfms1a-blog Monday 06 July 2026 12:24\u201d](https:\/\/app.caat.report\/_Resources\/Persistent\/c\/a\/e\/7\/cae793a5d6d5b5acf2cc04b5ceac2182edfc4885\/image.png)\n\nThe implemented tooltip has several problems and requirements:\n\n1. It cannot be operated using the keyboard. This means that keyboard users are unable to see the content of the tooltip at all. The tooltip invoker (the lock icon in this case) needs to be keyboard focusable. Current, a `<div>` element is used, which is not focusable. Use either a `<button>`, *or* `tabindex=\"0\"` on the `<div>`.\n2. The invoker points at the tooltip for an accessible name using the aria-labelledby attribute. This is generally OK, but as the `<div>` is a generic element and thus cannot have an accessible name, either use a `<button>` element, or add a `role=\"button\"`.\n3. Ensure that the tooltip stays open when the user hovers over the tooltip and moves the focus away from the invoker.\n4. Allow the user to close the tooltip using the invoker button.\n\n08 \u2013 Backend List View Pattern\n------------------------------\n\n![Tooltip on the article list pattern](https:\/\/app.caat.report\/_Resources\/Persistent\/d\/a\/c\/a\/daca55628ebac2982d47a8e2c27466b7e0fff1e3\/image.png)\n\nThe tooltip in the article table is neither dismifssible (without moving the pointer or focus) nor hoverable by the pointer.\n\n06 \u2013 MFA Setup\n--------------\n\nThe \u201cDefault\u201d tooltip that appears when hovering the star\/default icon in the Passkeys list (and maybe elsewhere) also fails the requirements:\n\n![Default tooltip over star icon](https:\/\/app.caat.report\/_Resources\/Persistent\/e\/a\/f\/b\/eafb958fb160505cf71b9434a454fe7c513ca8a5\/image.png)\n\n10 \u2013 Frontend User Forms\n------------------------\n\nThe edit buttons in the frontend have tooltips assigned to them that detail what gets edited. These tooltips do not show in small viewports and cannot be dismissed without moving the keyboard focus.\n\nSuggestion\n----------\n\nIn general, we advise against using tooltips as they can easily introduce accessibility issues. A small expand\/collapse section (preferably implemented using the `<details>` element) that opens inline avoids most of the issues.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_b4f4b335-198b-47b4-b217-1bd2c60cd218",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:46:25+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_content&view=articles",
                "_description": "",
                "title": "08 \u2013 Backend List View Pattern"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-17T12:29:55+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-20T16:09:46+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-20T16:09:46+02:00",
                "description": "## Media manager: Visual information is not conveyed programmatically, keyboard navigation is inconsistent, elements lack roles and states, names\n\nTo allow screen reader and other assistive technologies to interact with the content in a meaningful way, information that is conveyed visually needs to also be available to those tools programmatically.\n\nOn websites and in web apps, this usually means clear accessible names, states and structure. The media manager interface misses to convey the information in various places.\n\nIn the **grid view**, the focusable icons for folders have no accessible name and no role. The checkmarks to select individual items have no role and hence also cannot receive the name through `aria-label`. Their status is not set. The checkboxes cannot be set using space or enter.\n\n![Folders and files, focusable with the keyboard but role-less](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/b\/d\/0\/9bd0010d44b32554dc5aebd5fa1bc4394eb6d077\/image.png)\n\nThe ellipsis button that shows the sub menu to manage files does not expand using the arrow keys, but once expanded behaves like a toolbar with arrow navigation. This is inconsistent and also not communicated through roles and properties.\n\nKeyboard interaction is inconsistent in the ellipsis menu in general. Sometimes the arrow key works as expected, occasionally the page scrolls, and sometimes the preview of a file is opened.\n\nPressing ESC does not close the ellipsis menu.\n\nThe **table view** is not keyboard accessible at all. Its columns can be sorted, but there is no programmatic indication of the current sorting direction.\n\nIn **both views**, the information panel cannot be filled when using the keyboard as activating an item immediately opens the folder or shows a preview of the file.\n\nThe **toolbar** also has accessibility issues:\n\n![Grid and table view toolbars](https:\/\/app.caat.report\/_Resources\/Persistent\/9\/f\/0\/c\/9f0cd3cdb0b77b4bfc26b2ec76bb5cf2b8399c9a\/image.png)\n\n- The \u201cToggle select all\u201d checkbox is implemented as a regular checkbox, and hence works as expected. (Consider dropping the word \u201ctoggle\u201d from its accessible name, it is unnecessarily wordy and can be confusing. That the UI element toggles is implied by the fact that it is a checkbox.)\n- The file path navigation does not well convey what it is visually and also uses a navigation (`<nav>`) element that has the `aria-label` of `Breadcrumb`. As this is not a classical navigation like a page navigation, consider using a different element. Pick a better accessible name than \u201cBreadcrumb\u201d, for example \u201cCurrent path\u201d.\n- The search field that filters the results shows an alert visually when there are no matches, but does not convey it to the assistive technologies.\n- The sort button (\u201cChange ordering\u201d) opens two select boxes that allow you to select what to order by and in which direction, but the select boxes are positioned after other buttons and the button does not convey that something would open. This makes the actual sorting options difficult to find.\n- The buttons to change the grid size look disabled when the minimum\/maximum grid size is selected, but they are not made disabled programmatically. So the icons need to meet contrast requirements (at least 3\u22361 contrast).\n- The switch from grid to list view and vice versa is named \u201cToggle between grid and table views\u201d and gives users no indication on what mode is selected.\n- The toggle item info button does not indicate if the item info pane is shown or not.\n\nThe **folder tree** navigation is unclear to users and not properly implemented. Especially there roles need to be properly nested and expanded\/collapsed set properly. [See this example from W3C\/WAI.](https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/treeview\/examples\/treeview-1a\/) That said, even the WAI treeview works sub-optimally on platforms that do not support treeviews natively, namely macOS and iOS.\n\n![Tree view](https:\/\/app.caat.report\/_Resources\/Persistent\/6\/a\/5\/8\/6a58eaa424987f8ddeb8db3c49c15c8ecbb5c433\/image.png)\n\nSuggestion\n----------\n\nInstead of fixing the individual issues, it makes sense to re-think how the media manager is built and works and plan it from the ground up in an accessible way.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_5e965ecb-3142-4fdc-87a2-611c16b23e13",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:41:20+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_media",
                "_description": "",
                "title": "06 \u2013 Media Manager (com_media)"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-20T16:09:46+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-07-26T12:09:48+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-07-26T12:09:48+02:00",
                "description": "## Tag selectors very difficult to use\n\nThe tag selection interface is working poorly with the keyboard and when using screen readers. The user first has to move past the existing tags with the keyboard. Screen reader users focus on the \u201cRemove item\u201d buttons, which means they can only review which tags are selected by repeatedly hearing \u201dRemove item\u201d again and again.\n\n![Tag selector](https:\/\/app.caat.report\/_Resources\/Persistent\/3\/7\/6\/c\/376ca53ab42274d1ad3dcd0263d93d4f8d693de0\/image.png)\n\nIn addition, the remove buttons come before the \u201cType or select some tags\u201d text field and while the visual \u201cTags\u201d label communicates the purpose of the next UI elements well, this is not really available for users of assistive technologies.\n\nIn addition, focused but not selected options in the combobox are announced as selected. Removing a tag makes the page lose track of the focus and puts the focus to the top of the page. The \u201cRemove\u201d buttons are too small (less than 24\u00d724 pixels).\n\nThe same tag selector is also present in the **Backend Options** under \u201cLog Priorities\u201d:\n\n![Log priorities](https:\/\/app.caat.report\/_Resources\/Persistent\/0\/6\/b\/b\/06bb953bb28254abb994c69d969f6acb1c4b0104\/image.png)\n\n**Suggestion:** Remove the actual tags from before the dropdown. Show the tags after the selector. Refer to the selected tags using `aria-describedby` and by marking them selected in the dropdown. Do not mark unselected but focused options as selected. Use a `<fieldset>` element or a `group` `role` to make clear that the user is interacting with tags.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_78b292c3-b2fc-445c-89ad-f92ef87a5d38",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T15:04:57+02:00",
                "description": "https:\/\/stf-ms1a.sandbox.joomla.org\/blog\/administrator\/index.php?option=com_config",
                "_description": "",
                "title": "11 \u2013 Backend Options including Permissions"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-07-26T12:09:48+02:00"
            }
        },
        {
            "type": "Assertion",
            "date": "2026-08-07T13:36:05+02:00",
            "mode": {
                "type": "TestMode",
                "@value": "earl:manual"
            },
            "result": {
                "type": "TestResult",
                "date": "2026-08-07T13:36:05+02:00",
                "description": "## Very verbose link names when selecting a MFA method\n\nWhen a user selects which MFA method they want to use, they are presented with a list of links:\n\n![List of MFA methods](https:\/\/app.caat.report\/_Resources\/Persistent\/1\/1\/a\/c\/11ac5667b6a46e117a379ee1462bc16e67fc2ed8\/image.png)\n\nThese links contain the link name (Passkey, Code by Email, \u2026) an image that represents that method, and a hint text that is the same text as the actual link name. As the images have `alt` attributes and all three elements are part of the link, the Passkey link\u2019s accessible name is \u201cMy Passkey Passkey Passkey\u201d while the \u201cCode by Email\u201d link\u2019s accessible name is \u201cCode by Email Code by Email Code by Email\u201d.\n\nThe passkey one just does not repeat the same value three times because the passkey was renamed to \u201cMy Passkey\u201d.\n\nThere is no need for such a convoluted naming. Ensure that the `alt` attribute of the graphics are empty (`alt=\"\"`) and remove the duplicated hint text (Code simplified):\n\n**Current code:**\n\n```\n<a class=\"\u2026\" href=\"\u2026\">\r\n  <div class=\"\u2026\">\r\n    <img src=\"\u2026\" alt=\"Backup Codes\" class=\"\u2026\">\r\n  <\/div>\r\n  <span class=\"\u2026\">\r\n    Backup Codes\r\n  <\/span>\r\n  <small class=\"\u2026\">\r\n    Backup Codes\r\n  <\/small>\r\n<\/a>\n```\n\n**Change to:**\n\n```\n<a class=\"\u2026\" href=\"\u2026\">\r\n  <div class=\"\u2026\">\r\n    <img src=\"\u2026\" alt=\"\" class=\"\u2026\">\r\n  <\/div>\r\n  <span class=\"\u2026\">\r\n    Backup Codes\r\n  <\/span>\r\n<\/a>\n```\n\n**Note:** The helper text does not meet contrast requirements, but as the suggestion is to remove it, we did not specify this in detail.",
                "outcome": {
                    "id": "earl:failed",
                    "type": [
                        "OutcomeValue",
                        "Fail"
                    ]
                }
            },
            "subject": {
                "id": "_:subject_478ea7bd-256d-41eb-9787-e7e779bcbfe9",
                "type": [
                    "TestSubject",
                    "Webpage"
                ],
                "date": "2026-07-10T14:24:20+02:00",
                "description": "",
                "_description": "",
                "title": "04 \u2013 MFA Captive View (FE + BE)"
            },
            "test": {
                "id": "WCAG20:ensure-compat-rsv",
                "type": [
                    "TestCriterion",
                    "TestRequirement"
                ],
                "date": "2026-08-07T13:36:05+02:00"
            }
        }
    ],
    "reportFindings": {
        "date": {
            "type": "http:\/\/www.w3.org\/TR\/NOTE-datetime",
            "@value": "Mon Aug 17 2026"
        },
        "summary": "Summary\n-------\n\nAxess Lab has tested the Joomla! backend and frontend templates to find accessibility issues. To do so, we tested a number of pre-selected samples against the requirements of the [Web Content Accessibility Guidelines (WCAG)](https:\/\/www.w3.org\/TR\/WCAG22\/).\n\nThe conformance target is Level AA of WCAG, meaning that all success criteria in levels A and AA must be met. The AA level is considered baseline minimum accessibility. While meeting a success criterion means that it is possible to use the page in the way the success criterion requires, there is not qualitative determination on how well a person with disability can use the site.\n\nTo carry out the audit, the tests were conducted manually by inspecting the code and by using testing tools like [Polypane](https:\/\/polypane.app) and [axe Devtools](https:\/\/www.deque.com\/axe\/devtools\/). Some complex interactions were also assessed using assistive technologies like screen readers.\n\nThe report below is organized by sample, severity, and responsibility tags (Development, Editorial, Design). You\u2019ll also find all issues with a description and suggestions for addressing the issues.\n\nWe found overall 42 issues of which we determined 4 as critical, 15 as serious, 16 as moderate, and 7 as minor. We also added one best practice suggestion to the report, which is not an error, but more an easy to fix distraction.\n\nThe serious issues have to do with things that actively block using Joomla! with certain disabilities. This includes the media manager which cannot be operated using the keyboard. The editor also sometimes disappears when scrolling on small viewports. People with low vision might use small viewports on large screens to enlarge a site.\n\nThe main blocker was also the extension list, which has several accessibility issues.\n\nWhile 41 issues looks like a big number of issues, it is better than average for a project like this. There are clearly parts that have gotten more attention for accessibility, and parts that have less.\n\nIn general, this is a good status for the complexity of such an interface. However there are certain aspects which should work much better for people with disabilities using it. Using the keyboard has many challenges and contrasts can improve in many places. There are inaccessible tooltips and the session timeout is not handled well.\n\nThe next step is prioritizing and fixing the issues.",
        "title": "",
        "commissioner": "Open Source Matters",
        "evaluator": "Axess Lab",
        "documentSteps": [
            {
                "id": "_:about"
            },
            {
                "id": "_:defineScope"
            },
            {
                "id": "_:exploreTarget"
            },
            {
                "id": "_:selectSample"
            }
        ],
        "evaluationSpecifics": ""
    }
}