The axe
plugin adds axe auditing to Gimbal. This plugin will check for violations reported by axe and check the impact of the violations against the configured thresholds.
First, you need to install the plugin to your project:
# with npm
npm install --save-dev @modus/gimbal-plugin-axe
# or with yarn
yarn add --dev @modus/gimbal-plugin-axe
Next, you need to add the plugin to your Gimbal configuration file:
plugins:
- '@modus/gimbal-plugin-axe'
{
"plugins": ["@modus/gimbal-plugin-axe"]
}
modules.exports = {
plugins: ['@modus/gimbal-plugin-axe'],
};
There are three configs that you can change:
disabledRules
- An optional string or array of strings that will disable certain rules. For more, see here.exclude
- An optional string or array of strings that will allow certain CSS selectors to be excluded from the axe analysis. For more, see here.include
- An optional string or array of strings that will only allow certain CSS selectors to be included in the axe analysis. For more, see here.rules
- An optional string or array of strings that will only allow certain axe rules to be run in the axe analysis. For more, see here.showSuccesses
- If set tofalse
, the output of the final report will now show the successful rules.tags
- An optional string or array of strings that will allow only the specified rule IDs in the axe analysis. For more, see here.threshold
- This is the object of thresholds. Each rule can have it's own threshold.
By default, there is a single threshold that is set to minor
meaning only minor violations will be allowed. Each rule can have it's own threshold defined:
plugins:
- plugin: '@modus/gimbal-plugin-axe'
thresholds:
bypass: serious
The acceptable levels in order from least to greater impact are: none, minor, moderate, serious, critical.
plugins:
- plugin: '@modus/gimbal-plugin-axe'
showSuccesses: true
thresholds:
impact: none