Olli is a library, that in a single function call, creates a scalable and standard infrastructure for acessible web-based visualizations by embedding a navigable tree that users can explore for a richer screen reader experience. Adapters specific to different visualization libaries break down a chart where an accessible rendering is then created using existing ARIA TreeView technology.
- Using an adapter design pattern, visualizations are deconstructed into a
VisualizationStructuretype detailing a chart's structural, hierarchical, and visual components. - The deconstructed chart is then transformed into a tree following the design dimensions outlined in this paper from EuroVis2022
- The tree is then traversed to create various HTML Elements that are then appeneded to the webpage with set ARIA labels and key-bindings.
All of these steps are done by calling olli({...}) in a single configuration containing the deconstructed
visualization, type of rendering to create, and the DOM Id of where to append the rendering.
The most basic way to use Olli is to add it to any basic HTML page.
Show instructions
-
Add the script tag inside the document
<head>:<html> ... <head> ... <script src="..." /> ... </head> ... </html>
-
Call Olli from a
<script>tag:... <script> ... olli({ visualization: vegaLiteAdapter(visSpec, additionalInfo), renderType: 'tree' domId: 'Accessible-Vis' }) </script>
Olli can also be easily added to normal JavaScript applications.
Show instructions
-
Install the preset:
npm install olli
-
Import
olli, and the adapter you want to use, into the file you want to use it inimport {olli, vegaLiteAdater} from 'olli' ...
-
Call
olliand set-up your configuration object:... olli({ visualization: vegaLiteAdapter(visSpec, additionalInfo), renderType: 'tree' domId: 'Accessible-Vis' }) ...
Olli can even be used with React, but due to how React handles the state of the DOM, olli has to be called
inside the `useEffect(() => {}) hook.
Show instructions
-
Install preset:
npm install olli
-
Import
olli, and the adapter you want to use, into the component you want to use it inimport {olli, vegaLiteAdater} from 'olli' ...
-
Call
olliand set-up your configuration object inside theuseEffect(() => {})hook:... useEffect(() => { olli({ visualization: vegaLiteAdapter(visSpec, additionalInfo), renderType: 'tree' domId: 'Accessible-Vis' }) }) ...
The configuration object is what's needed to generate an accessibile visualization. It is a simple object that includes the OlliVisSpec of your visualization, the type of rendering you want to create, an optional ARIA label for the rendering, and the DOM id of where you want the rendering placed on your webpage. If no render type is specified the default rendering will be the navigable TreeView.
Type specification of the configuration:
type OlliConfigOptions = {
visualization: OlliVisSpec,
domId: string,
renderType?: 'tree' | 'table',
ariaLabel?: string
}Configuration Example:
let olliConfig: OlliConfigOptions = {
visualization: VegaLiteAdapter(vlScenegraph, vlSpec),
domId: 'Accessible-Vis',
renderType: 'tree'
}If you want to help with Olli's development and want to see visualizations become more accessible, anyone is welcome to clone the repository and fix bugs or add new features
git clone https:...
cd olli
git branch [Your Branch Name]
git checkout Your Branch Name]There's a non-zero chance that an adapter may not exist yet for your visualization library, but that's ok! There's a simple interface outlined for adapters where you can either create your own, or submit an issue to add support for your library.
The adapter interface is as follows:
export type VisAdapter = (visObject: any, helperVisInformation: any) => VisualizationStructureFor an explanation on the types that exist for Olli and how visualizations are decontructed check out the
README under .\src\Adapters\
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent