A11y Reference Website
Edit page
IntroductionAbout the project
Components
Rules

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