Accessibility Testing

As of version 3.0, Emulsify has accessibility testing built in by default. Instead of writing a Gulp command to accomplish the task, we instead created a function to simply run a pa11y test (code). That function has been added to our CSS and Pattern Lab Gulp (watch) tasks, so it is run whenever a component stylesheet or Twig file is saved.

The test is run not just against the component code but the rendered Pattern Lab url that is generated from that component. This means that it tests the final code but also catches visual errors such as color contrast. Besides errors, we also show notices and warnings by default, exposing the handy recommendations that pa11y gives for things that automated tests can’t verify. However, these settings and many more (including the standard itself) are available to be changed via the configuration file (see here for instructions on creating a local config in Emulsify).

Available configuration options (and default settings):

includeNotices: true,
includeWarnings: true,
ignore: [
  'WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2',
  'WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.1.NoTitleEl',
  'WCAG2AA.Principle3.Guideline3_1.3_1_1.H57.2',
  'WCAG2AA.Principle3.Guideline3_2.3_2_1.G107',
],
hideElements: '',
rootElement: null,
rules: [],
standard: 'WCAG2AA',
wait: 250,
actions: [],