diagcess

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

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