Mottie / va-page-checker

Highlight web components, accessibility issues, and other issues on VA.gov pages

VA page checker

Highlight web components, accessibility issues, and other issues on VA.gov pages

Features

Highlights

• VA design system web components:

  
  • USWDS v3 components (green highlights)
  • USWDS v1 components (dark red highlights)

• Elements that should be web components (dark red highlights):

  
  • Div modal -> va-modal
  • Plain button -> va-button
  • Plain checkbox -> va-checkbox
  • Plain number input -> va-number-input
  • Plain radio input -> va-radio-option
  • Plain search input -> va-search-input
  • Plain select -> va-select
  • Plain telephone link -> va-telephone
  • Plain text input -> va-text-input
  • Plain textarea -> va-textarea

• Accessibility issues (rules copied from Smashing magazine "Apps For All" by Heydon Pickering) (gold highlights):

  

  • buttons missing a type

  • disabled elements

  • links (a) missing an href

  • links (a) that are empty and missing an aria-label and aria-labelledby

  • buttons that are empty and missing an aria-label and aria-labelledby

  • images missing alt content

  • sections nested within sections

  • elements with a role="status" without an aria-live="polite"

  • elements with a role="alert" without an aria-live="assertive"

  • elements with a aria-live="polite" without a role="status"

  • elements with a aria-live="assertive" without a role="alert"

  • links (a) with target="_blank" missing rel="noreferrer noopener"

  • links (a) going outside of VA.gov domain missing rel="noreferrer noopener"

• DataDog privacy settings (purple highlights)

  
  • hidden privacy class or data-attribute
  • masked privacy class or data-attribute
  • action name data-attribute for hidden setting
  • action name data-attribute for masked setting

Hover over the highlighted outline to reveal the component

Install

Run locally

1. Download the zip or clone the repo git clone https://github.com/Mottie/va-page-checker
2. Open browser's extension page chrome://extension for Chrome, or edge://extensions for Edge
3. Enable "Developer mode"
4. Use "Load unpacked" button
5. Target the va-page-checker folder
6. Pin the "VA page checker" icon and toggle the button to highlight content

License

This browser extension is released under CC0.