A11y Reference Website
Edit page
IntroductionAbout the project


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


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

rule will remove the
attribute on the
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,

will add a non-valid language code in the
attribute. Since
removes the attribute entirely, this rule will only be checked if
is enabled.

Adding a new rule

To add a new rule, it is necessary to:

  • Add a file to
    , containing the rule definition.
  • Include the rule definition in
  • 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