Validate a11y attributes

Which @angular/* package(s) are relevant/releated to the feature request?

compiler-cli

Description

We should have the Angular compiler validate the types for a11y features of the DOM, such as role or aria-* attributes to make sure they are always set to valid values. This could allow the compiler to error or warn on bad a11y values and help users identify mistakes in their code which can lead to a more accessible experience.

Proposed solution

This could potentially be done as an extended diagnostic, or possibly through a *.d.ts typecheck or other direct compiler integration. I’m not sure which would be more appropriate here.

Alternatives considered

N/A

[twerske]

Additional checks to consider

• check for a title attribute in the Route definitions
• Heading levels should have a meaningful hierarchy, e.g.: (check nesting order of h1, h2 etc)
• Form labels and labelFor could likely be statically checked or at least add warnings for
• Buttons can check for a label
• All ARIA strings can be checked to confirm if they are empty strings "" which would be invalid/not best practice

Another source we can check for additional checks is what the axe tool’s static HTML checks are: https://github.com/dequelabs/axe-core

[twerske]

Love this idea! A great small start would be adding a check for alt on <img> elements.