README.md

Accessibility Linters for Angular applications

In this repository you can see the implementation of @angular-eslint and html-validate configured to find accessibility errors. To see the linter in action you must follow these steps:

1. Download the code.
2. Execute the npm install command
3. Execute npm run lint to see the analysis of angular-eslint
4. Execute npm run lint-a11y to see the analysis of html-validate

This repository is part of a Medium article called Accessibility Linters for Angular applications. I recommend you to read the full article.

Comparison table of angular-eslint and html-validate against Axe Accessibility Linter

In this table, we check each of the Axe rules to see if angular-eslint or html-validate can also validate them.

Axe Accessibility Linter	angular-eslint & html-validate
area-alt	template-accessibility-alt-text, area-alt
aria-allowed-attr	template-accessibility-valid-aria
aria-allowed-role
aria-command-name
aria-dialog-name
aria-input-field-name
aria-meter-name
aria-progressbar-name
aria-required-attr
aria-roles
aria-toggle-field-name
aria-tooltip-name
aria-treeitem-name
aria-valid-attr	template-accessibility-valid-aria
aria-valid-attr-value	template-accessibility-valid-aria
autocomplete-valid
button-name	template-accessibility-elements-content
frame-title
html-has-lang
image-alt	template-accessibility-alt-text, wcag/h37
input-button-name
input-image-alt	template-accessibility-alt-text, wcag/h37
label	template-accessibility-label-for, input-missing-label
link-name	wcag/h30
meta-refresh	meta-refresh
meta-viewport
nested-interactive
object-alt
role-img-alt
select-name
svg-img-alt
tabindex	template-accessibility-tabindex-no-positive
valid-lang