diagcess v1.1.4
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:
- Inline (see above).
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>
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 |