Skip to content

Instantly share code, notes, and snippets.

@joelhsmith
Last active November 15, 2023 22:46
Show Gist options
  • Save joelhsmith/21bb103e987da65c67f6420488643380 to your computer and use it in GitHub Desktop.
Save joelhsmith/21bb103e987da65c67f6420488643380 to your computer and use it in GitHub Desktop.
Custom Lighthouse config with all a11y audits and a few from Best Practices and SEO that are accessibility related.
/**
* Lighthouse custom config file for running A11y audits in Lighthouse.
* Includes all a11y audits and a few from Best Practices and SEO that are accessibility related.
* Organized into custom 'groups'
*
* Run:
lighthouse https://cats.com --config-path=/path/to/this/file/lh-config-a11y-extras.js --disable-device-emulation --output=json --output-path=catsaudit.json --chrome-flags="--headless --window-size=1300,600"
*
*/
module.exports = {
passes: [{
recordTrace: true,
pauseAfterLoadMs: 5000,
useThrottling: true,
gatherers: [
'runtime-exceptions',
'chrome-console-messages',
'accessibility',
'dobetterweb/doctype',
],
}],
audits: [
'accessibility/accesskeys',
'accessibility/aria-allowed-attr',
'accessibility/aria-required-attr',
'accessibility/aria-required-children',
'accessibility/aria-required-parent',
'accessibility/aria-roles',
'accessibility/aria-valid-attr-value',
'accessibility/aria-valid-attr',
'accessibility/audio-caption',
'accessibility/button-name',
'accessibility/bypass',
'accessibility/color-contrast',
'accessibility/definition-list',
'accessibility/dlitem',
'accessibility/document-title',
'accessibility/duplicate-id',
'accessibility/frame-title',
'accessibility/html-has-lang',
'accessibility/html-lang-valid',
'accessibility/image-alt',
'accessibility/input-image-alt',
'accessibility/label',
'accessibility/layout-table',
'accessibility/link-name',
'accessibility/list',
'accessibility/listitem',
'accessibility/meta-refresh',
'accessibility/meta-viewport',
'accessibility/object-alt',
'accessibility/tabindex',
'accessibility/td-headers-attr',
'accessibility/th-has-data-cells',
'accessibility/valid-lang',
'accessibility/video-caption',
'accessibility/video-description',
'accessibility/manual/custom-controls-labels',
'accessibility/manual/custom-controls-roles',
'accessibility/manual/focus-traps',
'accessibility/manual/focusable-controls',
'accessibility/manual/heading-levels',
'accessibility/manual/logical-tab-order',
'accessibility/manual/managed-focus',
'accessibility/manual/offscreen-content-hidden',
'accessibility/manual/use-landmarks',
'accessibility/manual/visual-order-follows-dom',
'accessibility/manual/interactive-element-affordance',
'errors-in-console',
'manual/pwa-cross-browser',
'dobetterweb/doctype',
],
groups: {
'general': {
title: 'Color Contrast Is Satisfactory',
description: 'These are opportunities to improve the legibility of your content.',
},
'a11y-describe-contents': {
title: 'Elements Describe Contents Well',
description: 'These are opportunities to make your content easier to understand for a user of assistive technology, like a screen reader.',
},
'a11y-well-structured': {
title: 'Elements Are Well Structured',
description: 'These are opportunities to make sure your HTML is appropriately structured.',
},
'a11y-aria': {
title: 'ARIA Attributes Follow Best Practices',
description: 'These are opportunities to improve the usage of ARIA in your application which may enhance the experience for users of assistive technology, like a screen reader.',
},
'a11y-correct-attributes': {
title: 'Elements Use Attributes Correctly',
description: 'These are opportunities to improve the configuration of your HTML elements.',
},
'a11y-element-names': {
title: 'Elements Have Discernible Names',
description: 'These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader.',
},
'a11y-language': {
title: 'Page Specifies Valid Language',
description: 'These are opportunities to improve the interpretation of your content by users in different locales.',
},
'a11y-meta': {
title: 'Meta Tags Used Properly',
description: 'These are opportunities to improve the user experience of your site.',
},
'a11y-manual-checks': {
title: 'Manual Checks',
description: 'Lorem ipsem.',
},
'robust': {
title: 'Robust',
description: 'Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.',
},
'legible': {
title: 'Adequate Font Sizes',
description: 'Small text is harder to read. Links in small text results in small touch and pointer targets, which make it hard for people to click links and navigate the website. [Learn more](https://material.io/design/usability/accessibility.html#layout-typography).',
},
},
categories: {
'accessibility': {
title: 'Accessibility',
description: 'These checks highlight opportunities to [improve the accessibility of your web app](https://developers.google.com/web/fundamentals/accessibility). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged.',
manualDescription: 'These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://developers.google.com/web/fundamentals/accessibility/how-to-review).',
auditRefs: [
// Standard A11y automated audits
{id: 'accesskeys', weight: 3, group: 'a11y-correct-attributes'},
{id: 'aria-allowed-attr', weight: 3, group: 'a11y-aria'},
{id: 'aria-required-attr', weight: 3, group: 'a11y-aria'},
{id: 'aria-required-children', weight: 3, group: 'a11y-aria'},
{id: 'aria-required-parent', weight: 3, group: 'a11y-aria'},
{id: 'aria-roles', weight: 3, group: 'a11y-aria'},
{id: 'aria-valid-attr-value', weight: 3, group: 'a11y-aria'},
{id: 'aria-valid-attr', weight: 3, group: 'a11y-aria'},
{id: 'audio-caption', weight: 1, group: 'a11y-correct-attributes'},
{id: 'button-name', weight: 9, group: 'a11y-element-names'},
{id: 'bypass', weight: 9, group: 'a11y-describe-contents'},
{id: 'color-contrast', weight: 11, group: 'a11y-color-contrast'},
{id: 'definition-list', weight: 4, group: 'a11y-well-structured'},
{id: 'dlitem', weight: 4, group: 'a11y-well-structured'},
{id: 'document-title', weight: 2, group: 'a11y-describe-contents'},
{id: 'duplicate-id', weight: 2, group: 'a11y-well-structured'},
{id: 'frame-title', weight: 4, group: 'a11y-describe-contents'},
{id: 'html-has-lang', weight: 2, group: 'a11y-language'},
{id: 'html-lang-valid', weight: 2, group: 'a11y-language'},
{id: 'image-alt', weight: 8, group: 'a11y-correct-attributes'},
{id: 'input-image-alt', weight: 9, group: 'a11y-correct-attributes'},
{id: 'label', weight: 10, group: 'a11y-describe-contents'},
{id: 'layout-table', weight: 4, group: 'a11y-describe-contents'},
{id: 'link-name', weight: 10, group: 'a11y-element-names'},
{id: 'list', weight: 5, group: 'a11y-well-structured'},
{id: 'listitem', weight: 5, group: 'a11y-well-structured'},
{id: 'meta-refresh', weight: 2, group: 'a11y-meta'},
{id: 'meta-viewport', weight: 2, group: 'a11y-meta'},
{id: 'object-alt', weight: 4, group: 'a11y-describe-contents'},
{id: 'tabindex', weight: 3, group: 'a11y-correct-attributes'},
{id: 'td-headers-attr', weight: 1, group: 'a11y-correct-attributes'},
{id: 'th-has-data-cells', weight: 1, group: 'a11y-correct-attributes'},
{id: 'valid-lang', weight: 2, group: 'a11y-language'},
{id: 'video-caption', weight: 1, group: 'a11y-describe-contents'},
{id: 'video-description', weight: 1, group: 'a11y-describe-contents'},
// Standard A11y manual audits
{id: 'logical-tab-order', weight: 0, group: 'a11y-manual-checks'},
{id: 'focusable-controls', weight: 0, group: 'a11y-manual-checks'},
{id: 'managed-focus', weight: 0, group: 'a11y-manual-checks'},
{id: 'focus-traps', weight: 0, group: 'a11y-manual-checks'},
{id: 'custom-controls-labels', weight: 0, group: 'a11y-manual-checks'},
{id: 'custom-controls-roles', weight: 0, group: 'a11y-manual-checks'},
{id: 'visual-order-follows-dom', weight: 0, group: 'a11y-manual-checks'},
{id: 'offscreen-content-hidden', weight: 0, group: 'a11y-manual-checks'},
{id: 'heading-levels', weight: 0, group: 'a11y-manual-checks'},
{id: 'use-landmarks', weight: 0, group: 'a11y-manual-checks'},
{id: 'interactive-element-affordance', weight: 0, group: 'a11y-manual-checks'},
// Extras
{id: 'errors-in-console', weight: 2, group: 'robust'},
{id: 'pwa-cross-browser', weight: 0, group: 'a11y-manual-checks'},
{id: 'doctype', weight: 2, group: 'robust'},
],
},
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment