Accessible (accessibility, a11y) examples

[AutoSponge]

Goal

Set project milestone goal to make all examples WCAG2.0AA compliant. Set project goal to support accessibility and inclusive design.

Purpose

Beyond the ethical reasons for creating inclusive technologies, many commercial and government applications must have WCAG2.0AA compliance by law. To increase adoption of Revalidation and remove barriers to wide-spread use, Revalidation must demonstrate the ability to support accessible form design through examples.

Special Considerations

This effort may require (breaking?) changes to the library. Some concepts and techniques may require library maintainer or community decisions before adoption. While Revalidation may not lend itself to all available techniques, preference should be given to techniques based on established Web standards and WAI-ARIA best practices. This helps ensure that Revalidation supports inclusive design patterns now, and in the future.

For example, the validationMessage element property can be used to inform an app's state model which can then be rendered into a separate element (often used to provide familiar error messages to users and not hard-code messages in apps). It can also be used to hold a custom validation message that the browser will display under certain circumstances (common for custom errors or localization). While the Revalidation community may not want to prefer one DOM pattern over another, supporting both may be problematic for Revalidation's ideology as the element becomes both a source of state and a sink for it.

Testing

Revalidation should add axe-cli as a devDependency to test all demo/example code for validity. While this will not guarantee WCAG compliance, this static analysis will catch many common mistakes and make the demo more robust. Forms with various states (e.g., error) must have tests for each state.

Additional testing, usually in the areas of interaction or semantic structure, will require human testers. Therefore, it should never be assumed that examples are "accessible" because an automated test reported so. Examples can always become "more accessible" which is why WCAG2.0AA has been established as a threshold (bare minimum) for the milestone goal.

[AutoSponge]

I have a few more things to finish up then I can start a PR for this.

[busypeoples]

Excellent! Thank you very much!