/administrator).<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.
6.2
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.
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.
Laptop / Desktop
Google Chrome (Version 125+), Mozilla Firefox, Apple Safari
NVDA (NonVisual Desktop Access), macOS VoiceOver, Chrome DevTools Accessibility Tree Inspector
WCAG Success Criteria Violated:
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.| Labels |
Added:
No Code Attached Yet
a11y
|
||
@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
@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
/assign