diagcess

Scientific diagram explorer by Progressive Accessibility Solutions.

Find out more at https://progressiveaccess.com/chemistry/, or give it a spin on our live site: https://live.progressiveaccess.com/.

Basic setup

Add the diagcess dependency (replacing the version number to the current latest version you want to use):

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diagcess@1.1.1/dist/diagcess.js" defer></script>

Create a setup method to initialize diagcess when the DOM content finishes uploading:

<script type="text/javascript" defer>
document.addEventListener("DOMContentLoaded", function() {
  diagcess.Base.init();
});
</script>

Finally, paste from your downloaded diagram at https://live.progressiveaccess.com:

<div class="ChemAccess-element" id="ChemAccess-element">
  <div class="svg">
    <!-- svg diagram goes here -->
  </div>
  <div class="cml">
    <!-- cml molecule goes here -->
  </div>
</div>

Advanced usage

Import methods

You can use diagcess in one of two ways:

Inline html script:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diagcess@1.0.0/dist/diagcess.js" defer></script>

Or, NPM module import (it's a UMD module, not a ES6 module, so note that import syntax probably won't work as you expect):

const diagcess = require("diagcess");

Alternative diagram loading

Diagrams can be loaded in one of 3 ways:

1. Inline (see above).

2. References to existing hosted data.

   <div class="ChemAccess-element" id="ChemAccess-element" data-src="https://link/to/hosted/svg" data-cml="https://link/to/hosted/cml">
   </div>

3. Runtime parameterization using URL queries.

   <div class="ChemAccess-element" id="mole">
   </div>

   Then you can visit http://your/page?mole=link/to/full/diagram

   The full diagram should be of the same general form as the inline one.

Keyboard Controls

Initialisation

Navigation

Navigation in Menu Explorer

Other Interaction

Magnification

Speech Output

Display Settings

Sound Output