hint that that checks using axe for accessibility related best practices
npm install @hint/hint-axeaxe)axe is the accessibility engine for automated testing of HTML-based
user interfaces. These hints run the recommended set of WCAG 2.1
Level A and Level AA rules from [axe-core][axe core].
> The Web is an increasingly important resource in many aspects
of life: education, employment, government, commerce, health care,
recreation, and more. It is essential that the Web be accessible
in order to provide equal access and equal opportunity to
people with disabilities. An accessible Web can also help people
with disabilities more actively participate in society.
>
> The Web offers the possibility of **unprecedented access to
information and interaction** for many people with disabilities.
That is, the accessibility barriers to print, audio, and visual
media can be much more easily overcome through Web technologies.
>
> The document ["Social Factors in Developing a Web Accessibility
Business Case for Your Organization"][wai soc] discusses how the
Web impacts the lives of people with disabilities, the overlap with
digital divide issues, and Web accessibility as an aspect of corporate
social responsibility.
>
> Another important consideration for organizations is that web
accessibility is required by laws and policies in some cases.
From [WAI’s Introduction to Web Accessibility][wai].
By default, hint-axe contains hints which run all the
[WCAG 2.1][wcag 2.1] Level A and Level AA rules included in
[axe-core][axe core] with document as the target. These rules are
grouped into hints based on their assigned category within axe-core.
See each contained hint for the specific list of enabled rules within
that group and more information about each rule.
* [ARIA (axe/aria)][axe/aria]
* [Color (axe/color)][axe/color]
* [Forms (axe/forms)][axe/forms]
* [Keyboard (axe/keyboard)][axe/keyboard]
* [Language (axe/language)][axe/language]
* [Name Role Value (axe/name-role-value)][axe/name-role-value]
* [Parsing (axe/parsing)][axe/parsing]
* [Semantics (axe/semantics)][axe/semantics]
* [Sensory and Visual Cues (axe/sensory-and-visual-cues)][axe/sensory-and-visual-cues]
* [Structure (axe/structure)][axe/structure]
* [Tables (axe/tables)][axe/tables]
* [Text Alternatives (axe/text-alternatives)][axe/text-alternatives]
* [Time and Media (axe/time-and-media)][axe/time-and-media]
This hint uses [axe.run][axe.run] and the default values ([WCAG
2.1][wcag 2.1] Level A and Level AA rules) over the document.
You can modify what rules or categories are executed via an options
object that follows [axe’s documentation][axe docs].
Some examples of hint configurations that you can have in the
[.hintrc][hintrc] file:
Disable a rule included in the default configuration:
``json`
{
"connector": {...},
"formatters": [...],
"hints": {
"axe/language": ["error", {
"html-has-lang": "off"
}],
...
},
...
}
Enable a rule excluded from the default configuration:
`json`
{
"connector": {...},
"formatters": [...],
"hints": {
"axe/keyboard": ["error", [
"tabindex"
]],
...
},
...
}
or if you want to set a custom severity:
`json`
{
"connector": {...},
"formatters": [...],
"hints": {
"axe/keyboard": ["error", {
"tabindex": "error"
}],
...
},
...
}
Change the severity of an individual rule:
`json`
{
"connector": {...},
"formatters": [...],
"hints": {
"axe/color": ["error", {
"color-contrast": "warning"
}],
...
},
...
}
This package is installed automatically by webhint:
`bash`
npm install hint --save-dev
To use it, activate it via the [.hintrc][hintrc] configuration file:
`json`
{
"connector": {...},
"formatters": [...],
"hints": {
"axe/aria": "error",
"axe/color": "error",
...
},
"parsers": [...],
...
}
Note: The recommended way of running webhint is as a devDependency` of
your project.
* Deque University
* [axe core GitHub page][axe core]
* Web Accessibility Initiative (WAI)
[axe core]: https://github.com/dequelabs/axe-core/
[axe docs]: https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
[axe rules]: https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md
[axe.run]: https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axerun
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[wai soc]: https://www.w3.org/WAI/bcase/soc
[wai]: https://www.w3.org/WAI/intro/accessibility.php
[wcag 2.1]: https://www.w3.org/TR/WCAG21/
[axe/aria]: https://webhint.io/docs/user-guide/hints/hint-axe/aria/
[axe/color]: https://webhint.io/docs/user-guide/hints/hint-axe/color/
[axe/forms]: https://webhint.io/docs/user-guide/hints/hint-axe/forms/
[axe/keyboard]: https://webhint.io/docs/user-guide/hints/hint-axe/keyboard/
[axe/language]: https://webhint.io/docs/user-guide/hints/hint-axe/language/
[axe/name-role-value]: https://webhint.io/docs/user-guide/hints/hint-axe/name-role-value/
[axe/parsing]: https://webhint.io/docs/user-guide/hints/hint-axe/parsing/
[axe/semantics]: https://webhint.io/docs/user-guide/hints/hint-axe/semantics/
[axe/sensory-and-visual-cues]: https://webhint.io/docs/user-guide/hints/hint-axe/sensory-and-visual-cues/
[axe/structure]: https://webhint.io/docs/user-guide/hints/hint-axe/structure/
[axe/tables]: https://webhint.io/docs/user-guide/hints/hint-axe/tables/
[axe/text-alternatives]: https://webhint.io/docs/user-guide/hints/hint-axe/text-alternatives/
[axe/time-and-media]: https://webhint.io/docs/user-guide/hints/hint-axe/time-and-media/