No Code Attached Yet a11y
avatar SiddheshCodes4554
SiddheshCodes4554
20 Oct 2026

Steps to reproduce the issue

  1. Log in to the Joomla Administrator Dashboard (/administrator).
  2. Go to the Home Dashboard containing Quick Icons (e.g., Articles, Categories, Media).
  3. Inspect any quick icon item that contains an "Add" action button (e.g., the "+" button on Articles).
  4. Review the rendered HTML in DevTools:
    <li class="quickicon-linkadd j-links-link d-flex">
        <a class="d-flex" href="index.php?option=com_content&task=article.add" title="Create Article">
            <span class="icon-plus" aria-hidden="true"></span>
        </a>
    </li>

5.Navigate through the dashboard controls using keyboard navigation (Tab key) with a screen reader active (e.g., NVDA, JAWS, or VoiceOver), or inspect the Chrome/Edge DevTools Accessibility Tree computed name for this element.

Version

6.2

Expected result

All interactive links and buttons must provide an explicit, programmatically determinable accessible name.

The <a> element in layouts/joomla/quickicons/icon.php should have an explicit aria-label="<?php echo Text::_($displayData['name'] . '_ADD'); ?>" attribute matching its tooltip title. This ensures screen readers and assistive technology reliably announce the purpose of the button (e.g., "Create Article, link") when focused.

Actual result

The link only possesses an HTML title attribute, while its inner icon child has aria-hidden="true".

Because relying purely on the title attribute for accessible naming is discouraged and inconsistently supported across various screen readers and browsers, assistive technologies often announce it simply as "link" or an unlabelled link, leaving visually impaired users unaware of what the "+" button does.

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

Laptop / Desktop

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

Google Chrome (Version 125+), Mozilla Firefox, Apple Safari

Assistive Technology?

NVDA (NonVisual Desktop Access), macOS VoiceOver, Chrome DevTools Accessibility Tree Inspector

Additional Comments

  • WCAG Success Criteria Violated:

    • WCAG 2.1 - 4.1.2 Name, Role, Value (Level A): Interactive controls must have an accessible name determinable by assistive technologies.
    • WCAG 2.1 - 2.4.4 Link Purpose (In Context) (Level A): The purpose of each link should be determinable from the link text alone.
  • Proposed Solution:
    In file layouts/joomla/quickicons/icon.php (around line 75):
    Add the aria-label attribute to the <a> tag:

<?php // Add the link to the edit-form
if (isset($displayData['linkadd'])) : ?>
    <li class="quickicon-linkadd j-links-link d-flex">
        <a class="d-flex" href="<?php echo $displayData['linkadd']; ?>" title="<?php echo Text::_($displayData['name'] . '_ADD'); ?>" aria-label="<?php echo Text::_($displayData['name'] . '_ADD'); ?>">
            <span class="icon-plus" aria-hidden="true"></span>
        </a>
    </li>
</ul>
</li>
<?php endif; ?>


I would be happy to submit a Pull Request fixing this on the 5.4-dev branch.
avatar SiddheshCodes4554 SiddheshCodes4554 - open - 20 Oct 2026
avatar joomla-cms-bot joomla-cms-bot - change - 20 Oct 2026
Labels Added: No Code Attached Yet a11y
avatar joomla-cms-bot joomla-cms-bot - labeled - 20 Oct 2026
avatar SiddheshCodes4554
SiddheshCodes4554 - comment - 20 Oct 2026

/assign

avatar drmenzelit
drmenzelit - comment - 27 Oct 2026

@SiddheshCodes4554 we don't assign issues. You can submit a pull request, if you have a solution for the issue.
You can read the rules in the pinned issue on this page.
#47215

avatar drmenzelit
drmenzelit - comment - 27 Oct 2026

@SiddheshCodes4554 we don't assign issues. You can submit a pull request, if you have a solution for the issue.
You can read the rules in the pinned issue on this page.
#47215

Add a Comment

Login with GitHub to post a comment