Scanning public Angular apps with axe, and naming the component behind each finding
The plan was to offer people a free accessibility scan of their Angular app. Most real Angular apps sit behind a login, though, and the public ones are often brochure sites with little to test. So I scanned Angular apps that are public and widely used instead, to see what the ecosystem looks like. Two things came out of it. The raw scanner reported on the wrong page three times. And when it was…
I conducted a study of public Angular applications to assess accessibility using the axe-core tool. Many Angular apps are secured behind logins, but I chose public ones to understand the broader ecosystem. While the scanner correctly identified problems within the DOM, it failed to indicate which component to address. Running axe-core on interactive pages occasionally returned false positives, such as GitHub's 404 styling or an empty shell on ngx-admin's dashboard.
However, when accurate, the scanner provided CSS selectors for the problematic nodes. To attribute these findings to specific components, I developed a headless reporting mode for Angular development builds. This method analyzes Angular's debug API to map DOM nodes to their corresponding components. The report organizes violations by component, enabling a --fail-on flag for CI integration.
Only open-source applications were examined, limiting the scope but allowing for comprehensive analysis. The investigation covered ngx-admin, a popular Angular admin template, and the RealWorld reference app. Both scans revealed significant accessibility issues, primarily stemming from missing accessible names and missing alt text.
For ngx-admin, report mode attributed 83 violations across nine rules to specific components, enabling targeted fixes. RealWorld's live demo presented three shell-level issues due to an empty feed, with image-alt and link-name violations traced back to ArticleMetaComponent. Overall, the scanner effectively identifies accessibility problems but requires additional steps to link findings to their respective components.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
