VPAT-HTML

VPAT-HTML is a tool for generating Voluntary Product Accessibility Template html tables from json 🏗ℹ

Usage

const VPAT = require('vpat-html');
const support = {
  // ...
}
const html = new VPAT(support);

Features

  // define support for a given guideline:
  '1194.21-a': true,
  '1194.21-a': {
    supported: true,
  },
  '1194.21-a': {},
  '1194.21-a': VPAT.SUPPORTED,

  // define lack of support for a given guideline:
  '1194.21-a': null,
  '1194.21-a': undefined,
  '1194.21-a': false,
  '1194.21-a': {
    supported: false,
  },
  '1194.21-a': VPAT.NOT_SUPPORTED,

  // define n/a for a given guideline: 
  '1194.21-a': NaN,
  '1194.21-a': {
    supported: -1,
  },
  '1194.21-': {
    supported: NaN,
  },
  '1194.21-a': VPAT.NOT_APPLICABLE,

  // define partial support for a given guideline: 
  '1194.21-a': '',
  '1194.21-a': {
    supported: '',
  },
  '1194.21-a': 'partial',
  '1194.21-a': {
    supported: 'partial',
  },
  '1194.21-a': 'exceptions',
  '1194.21-a': {
    supported: 'exceptions',
  },
  '1194.21-a': VPAT.SUPPORTED_WITH_EXCEPTIONS,

  // define your own text for a given guideline: 
  '1194.21-a': {
    supported: VPAT.SUPPORTED_WITH_EXCEPTIONS,
    text: 'Supports with exceptions: some additional text'
  },

  // define remarks or explanations for a given feature: 
  '1194.21-a': {
    notes: '<ul><li>Drag-and-drop operations are not accessible to keyboard-only users</li></ul>',
  },

  // define support for a section 
  '1194.21': {
    supports: true,
  },

  // define support for a sub-section 
  '1194.21-a': {
    supports: true,
  },

  // define support for a sub-sub-section 
  '1194.23-j-1': {
    supports: true,
  },
}

Additional Configuration

const support = {
  '1194.21': {
    supported: 'n/a',
  },
}
const options = {
  colors: {
    supported: '#27ae60',
    notSupported: '#e74c3c',
    exceptions: '#d35400',
    notApplicable: '#7f8c8d',
    zebra1: '#fff', 
    zebra2: '#ecf0f1',
    border: '#7f8c8d',
  },
}

Default Support

By default, vpat-html assumes "Not Applicable" for non-defined features. If you want to change this default,

const support = {
  '1194.21': {
    supported: 'n/a',
  },
}
const options: {
  defaultSupport: VPAT.SUPPORTED,
}
const html = new VPAT(support, options);

Custom HTML

Templates can be modifed. Templates are implemented with handlebars.

# custom row template
const options = {
  templates: {
    row: '<tr><td>Section</td><td>{{description}}</td><td>{{support}}</td><td>{{notes}}</td></tr>',
  },
};
const html = new VPAT(support, options);