Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, and please first use the search on the homepage. Provide us with the following info:
- ABP Framework version: v6.1.0
- UI Type: Angular / MVC
- Database System: EF Core (SQL Server)
- Tiered (for MVC) or Auth Server Separated (for Angular): yes
- Exception message and full stack trace: Images must have alternate text
- Steps to reproduce the issue: Scan the page with accessibility tool
Accessibility tests raises critical issues (using AXE DevTools) for images that do not have alternate text.
A good example of this is the avatar image:
Test results: Ensures <img src=""> elements have alternate text or a role of none or presentation https://dequeuniversity.com/rules/axe/4.7/image-alt?application=AxeChrome
To solve this problem, you need to fix at least (1) of the following:
- Element does not have an alt attribute
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute
- Element's default semantics were not overridden with role="none" or role="presentation"
Can you please update Lepton-x to address this issue.
Thanks
1 Answer(s)
-
0
Hi,
For time being you can add this code
export class AppComponent implements AfterViewInit{ ngAfterViewInit(): void { const images = document.querySelectorAll('img'); images.forEach(image => { const currentAlt = image.getAttribute('alt'); if (!currentAlt || currentAlt.trim() === '') { image.setAttribute('alt', 'Image'); } }); } }This issue will be fixed in the next release.
