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/[email protected]/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/[email protected]/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

| Key | Result | | ------------ | ------------------------ | | Enter | Starts default explorer. | | Left-Click | Starts default explorer. | | A | Starts key explorer. | | B | Starts menu explorer. | | Esc | Exit explorer. |

Navigation

| Lefthand-Key | Righthand-Key | Result | | ------------ | ------------- | ------------------------ | | D | Down | Go to next level | | F | Right | Go to next component | | S | Left | Go to previous component | | E | Up | Go to previous level |

Navigation in Menu Explorer

| Key | Result | |---------|-----------------------------------| | Enter | Press buttons in menu exploration | | Space | Press button in menu exploration |

Other Interaction

Magnification

| Key | Result | | ------- | -------------------- | | N | No magnification | | M | Step magnification | | Comma | Direct magnification |

Speech Output

| Key | Result | |-----|----------------------------------| | X | Toggle expert mode | | W | Additional details on an element | | L | Next language (if available) |

Display Settings

| Key | Result | |-----|----------------------------------| | Z | Toggle subtitles | | V | Toggle screenread style subtitle | | C | Next high contrast color | | T | Toggle monochrome display |

Sound Output

| Key | Result | | ------- | --------------------------------- | | K | Kill sound | | O | Start sonification (if available) | | P | Repeat sonification | | Y | Stop self-voicing (if available) | | U | Repeat last utterance | | Space | Repeat last sound |