No Code Attached Yet a11y
avatar bsylwek
bsylwek
2 Jul 2025

Steps to reproduce the issue

I installed Axe webtools for Firefox and found errors. Has anyone solved the following Issues? They occur on all Joomla sites if accessibility is enabled and this is very important. It would be good if Joomla developers would look at this and fix the bugs in the next Joomla 4 patch release. This is very important right now. I have Joomla 4.4.13 and Cassiopeia theme.

https://addons.mozilla.org/pl/firefox/a ... -devtools/

Ensure elements that have scrollable content are accessible by keyboard
more information https://dequeuniversity.com/rules/axe/4 ... AxeFirefox
Element Location:

.before-collapse

    To solve this problem, you need to fix at least (1) of the following:

    Element should have focusable content
    Element should be focusable

    Ensure the order of headings is semantically correct
    more information

    Element Location:

    #mod-1

    Menu

    To solve this problem, you need to fix the following: https://dequeuniversity.com/rules/axe/4 ... AxeFirefox

    Heading order invalid

    Ensure all page content is contained by landmarks

    Element Location:

    .main-bottom > .card-header

    Subscribe

    To solve this problem, you need to fix the following: https://dequeuniversity.com/rules/axe/4 ... AxeFirefox

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    https://dequeuniversity.com/rules/axe/4 ... AxeFirefox
    Element Location:

    .container-bottom-a

    To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks
    Top

    Expected result

    Actual result

    Device and system info

    • What version of Joomla were you using?
      Joomla 4.4.13 and Cassiopeia theme

    • What device were you using? (eg, phone, laptop)

    • What web browser were you using? (eg, Chrome, Safari)

    • If you were using assistive technology, please let us know the device or software you were using (eg VoiceOver, JAWS, sip-and-puff device, etc)

    Additional comments

    If you know which WCAG or ATAG criteria this violates, please indicate it here:

avatar bsylwek bsylwek - open - 2 Jul 2025
avatar joomla-cms-bot joomla-cms-bot - change - 2 Jul 2025
Labels Added: No Code Attached Yet a11y
avatar joomla-cms-bot joomla-cms-bot - labeled - 2 Jul 2025
avatar bsylwek bsylwek - change - 2 Jul 2025
The description was changed
avatar bsylwek bsylwek - edited - 2 Jul 2025
avatar wwwiiimmm
wwwiiimmm - comment - 3 Jul 2025

When Joomla is installed all modules have the tag div and the header is an h3.

The landmark issue can be solved by setting a different module tag.
Open the module and go to tab Advanced.
At the option Module Tag change div to something else, the usual options may be nav, aside, section, but you have more options. It depends on what you are displaying and where...

Under the same tab, at option Header Tag you can set the tag for the module title.
Depending on the order (of modules) and/or selected tag, changing this may solve the invalid heading order.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45679.

avatar bsylwek
bsylwek - comment - 3 Jul 2025

In the case of the change in the module that you described, the problem in axe disappeared. What about such elements that are not in the module and as I understand them are elements of the Cassiopeia template or others, e.g. the enabled accessibility add-on, there are several issues. The following issues are not in the module, so I guess only the change in the template code and the Accessibility plugin and js files in the media/vendor/accessibility/js location? But what exactly needs to be changed? I list them below

Ensure all page content is contained by landmarks
[more information https://dequeuniversity.com/rules/axe/4.10/region?application=AxeFirefox

#back-top

To solve this problem, you need to fix the following:

Some page content is not contained by landmarks

Ensure all page content is contained by landmarks
[more information https://dequeuniversity.com/rules/axe/4.10/region?application=AxeFirefox

._access-icon

To solve this problem, you need to fix the following:

Some page content is not contained by landmarks

Ensure all page content is contained by landmarks
[more information https://dequeuniversity.com/rules/axe/4.10/region?application=AxeFirefox
Element Location:

._text-center

XAccessibility

To solve this problem, you need to fix the following:

Some page content is not contained by landmarks

Ensure all page content is contained by landmarks
https://dequeuniversity.com/rules/axe/4.10/region?application=AxeFirefox

li[data-access-action="increaseText"]

  • Increase the text size
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information https://dequeuniversity.com/rules/axe/4.10/region?application=AxeFirefox
    Element Location:

    li[data-access-action="decreaseText"]

  • Reduce text size
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    li[data-access-action="increaseTextSpacing"]

  • Increase text spacing
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    li[data-access-action="decreaseTextSpacing"]

  • Reduce text spacing
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    li[data-access-action="invertColors"]

  • Invert the colors
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    li[data-access-action="underlineLinks"]

  • Highlight links
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    li[data-access-action="bigCursor"]

  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

  • Reading guide
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    li[data-access-action="textToSpeech"]

  • Text to speech
  • To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    avatar brianteeman
    brianteeman - comment - 3 Jul 2025

    the accessibility plugin is useless and should not be used.

    it does NOT make anything accessible

    avatar bsylwek
    bsylwek - comment - 3 Jul 2025

    For what purpose is it distributed with the Joomla system and other similar plugins with other competing CMS systems? I know that in reality usually disabled people have different other readers depending on the disability. This can often be confusing to the average person.

    avatar brianteeman
    brianteeman - comment - 3 Jul 2025

    it was first included at the request of the joomla accessibility team as a tool that some people might find useful.

    IT is not an accessibility overlay that claims to make anything accessible.

    IT is supposed to be a tool that might improve the use of a site for some people with accessibility needs that do not already have their own accessibility tools such as a screen reader. (for example the site has been badly designed with small fonts so the occasional user might find it useful to use the tool to increase the font size - something that they have never needed to do on other sites so they do not know how to do it in their browser). How useful it is will be subjective and site specific. Thats one of the reasons it is NOT enabled by default.

    Unfortunately for many the plugin itself creates its own problems assuming that you are relying on automated tests to tell you if something is accessible or not

    avatar bsylwek
    bsylwek - comment - 3 Jul 2025

    After disabling this Accessibility add-on, there is only one issue left, which is shown in Axe dev tools. How to solve this. It's not in any module but in the Cassiopeia template code?

    Ensure all page content is contained by landmarks
    more information Link opens in a new window
    Element Location:

    #back-top

    To solve this problem, you need to fix the following:

    Some page content is not contained by landmarks

    avatar brianteeman
    brianteeman - comment - 3 Jul 2025

    that is an option in the template style

    Image

    avatar bsylwek
    bsylwek - comment - 3 Jul 2025

    I know that when it is turned off it does not show any accessibility error but sometimes a button to the top of the page is useful when there is a longer page and it scrolls to the bottom you can quickly return with the button to the top. Is there anything I can change in the code so that the error does not occur?

    avatar wwwiiimmm
    wwwiiimmm - comment - 3 Jul 2025

    When AXE finds an issue, it does not mean your site is not accessible, nor does it mean your site is accessible when AXE finds no issues.

    AXE is a helpful, but automated, test.

    Your website is built for humans, not AXE.
    To be sure about accessibility, a human test is needed.

    Browse the page only using your keyboard.
    Can you tab through the page?
    Can you read/hear the content?
    Can you see/hear if you can reach the back-to-top button?
    Is it in a logical place?
    Are you able to use the button?


    This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45679.

    avatar bsylwek
    bsylwek - comment - 3 Jul 2025

    I understand, I just use tools Firefox Axe and https://wave.webaim.org that help in working on eliminating accessibility errors. Yes, I have the TAB key enabled to navigate the page and I have the menu enabled. Skip to navigation plugin
    https://forum.joomla.org/viewtopic.php?t=994294
    The text was listened to audio when the accessibility module was enabled. I currently do not have an audio reader because this add-on is disabled. I disabled the back to top button because it causes issues which I described above.

    Add a Comment

    Login with GitHub to post a comment