Discussion on: Migrating and configuring Eslint with Angular 11

[retro321]

How to check for accessibility issues using eslint in angular?

[Giovanni Sarciotto]

That's a very good question. I know that for jsx (react) there are some accessibility plugins for ESLint, but I dont known any for angular. If you find any, share with us please :)

[Remi Kristelijn]

You can add these rules, a11y rules are amongst the FUNCTIONALITY group

Personally I find the a11y rules helping, but also the complexity rules

"rules": {
        // FUNCTIONALITY
        "@angular-eslint/contextual-decorator": "warn",
        "@angular-eslint/contextual-lifecycle": "warn",
        "@angular-eslint/no-attribute-decorator": "warn",
        "@angular-eslint/no-lifecycle-call": "warn",
        "@angular-eslint/no-output-native": "warn",
        "@angular-eslint/no-pipe-impure": "warn",
        "@angular-eslint/prefer-on-push-component-change-detection": "warn",
        "@angular-eslint/template/accessibility-alt-text": "warn",
        "@angular-eslint/template/accessibility-elements-content": "warn",
        "@angular-eslint/template/accessibility-label-for": "warn",
        "@angular-eslint/template/no-positive-tabindex": "warn",
        "@angular-eslint/template/accessibility-table-scope": "warn",
        "@angular-eslint/template/accessibility-valid-aria": "warn",
        "@angular-eslint/template/banana-in-box": "warn",
        "@angular-eslint/template/click-events-have-key-events": "warn",
        "@angular-eslint/template/mouse-events-have-key-events": "warn",
        "@angular-eslint/template/no-any": "warn",
        "@angular-eslint/template/no-autofocus": "warn",
        "@angular-eslint/template/no-distracting-elements": "warn",
        "@angular-eslint/template/no-negated-async": "warn",
        "@angular-eslint/use-injectable-provided-in": "warn",
        "@angular-eslint/use-lifecycle-interface": "warn",
        // MAINTAINABILTY
        "@angular-eslint/component-max-inline-declarations": "warn",
        "@angular-eslint/no-conflicting-lifecycle": "warn",
        "@angular-eslint/no-forward-ref": "warn",
        "@angular-eslint/no-input-prefix": "warn",
        "@angular-eslint/no-input-rename": "warn",
        "@angular-eslint/no-output-on-prefix": "warn",
        "@angular-eslint/no-output-rename": "warn",
        // no-unused-css not supported yet
        "@angular-eslint/prefer-output-readonly": "warn",
        "@angular-eslint/relative-url-prefix": "warn",
        "@angular-eslint/template/conditional-complexity": "warn",
        "@angular-eslint/template/cyclomatic-complexity": "warn",
        "@angular-eslint/template/i18n": "warn",
        "@angular-eslint/template/no-call-expression": "warn",
        "@angular-eslint/template/use-track-by-function": "warn",
        "@angular-eslint/use-component-selector": "warn",
        "@angular-eslint/use-component-view-encapsulation": "warn",
        "@angular-eslint/use-pipe-decorator": "warn",
        "@angular-eslint/use-pipe-transform-interface": "warn",
        // STYLE
        // angular-whitespace: N/A, This TSLint rule should be replaced by a dedicated code formatter, such as Prettier
        "@angular-eslint/component-class-suffix": "warn",
        "@angular-eslint/component-selector": "warn",
        "@angular-eslint/directive-class-suffix": "warn",
        "@angular-eslint/directive-selector": "warn",
        // import-destructuring-spacing: This TSLint rule should be replaced by a dedicated code formatter, such as Prettier
        "@angular-eslint/no-host-metadata-property": "warn",
        "@angular-eslint/no-inputs-metadata-property": "warn",
        "@angular-eslint/no-outputs-metadata-property": "warn",
        "@angular-eslint/no-queries-metadata-property": "warn",
        "@angular-eslint/pipe-prefix": "warn"
        // prefer-inline-decorator: N/A, This TSLint rule should be replaced by a dedicated code formatter, such as Prettier
      }

source: all available rules