Rules

Rules are how we manage the accessibility (or inaccessibility) of the web app. Each rule is connected to one success criterion, but each success criterion can have more than one rule connected to it.

All rules can be found under

src/data/rules

.

A rule works like this:

• If enabled, the rule is (in principle) complied with throughout the web app.
• If disabled, the rule is intentionally violated, breaking the success criterion.

As an example, disabling the

html-has-lang

rule will remove the

lang

attribute on the

html

tag. This breaks automatic language recognition for screen readers, possibly resulting in using the wrong pronounciation.

Some rules depend on each other. If switched off,

html-lang-valid

will add a non-valid language code in the

lang

attribute. Since

html-has-lang

removes the attribute entirely, this rule will only be checked if

html-has-lang

is enabled.

Adding a new rule

To add a new rule, it is necessary to:

• Add a file to

  src/data/rules

  , containing the rule definition.
• Include the rule definition in

  src/data/rules/index.js

  .
• In the component where you intend to add the rule violation/accessibility issue, get the rule settings using the following code:

  const { rules } = useContext(AccessibilityRulesContext)

  .
• Then check if the rule is enabled with

  rules[CONSTANTS["your-rule-name"]] !== false

  . If not, render inaccessible code.

PS: It is recommended to check if the rule is not equal to false, instead of checking if it is true. That way, the rule has to intentionally be disabled to introduce accessilility issues. If checking if it is true, we could end up introducing issues if the rules did not load correctly