#Accessibility of Web Components
- JSConf US, May 30 2014
- Seattle JS, May 15 2014
- Inclusive Design 24, May 15 2014
- JSConf Australia (Accessibility of the Shadow DOM), April 10 2014
This presentation uses Reveal.js along with a custom plugin I wrote for improved accessibility. (Separate repo coming soon)
- Dynamic skip navigation
- Really hidden offscreen slides (requires linear transitions)
- Slide focus management
To view the demos included in the slides, you will need the latest version of Chrome with the
dom.webcomponents.enabled flag set to
Should you want to run this presentation from source for some reason, the full setup gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source.
The full experience of the infamous taco-summoning Web Component requires a Twilio account and set-up of a separate repository. The Twilio App repo will allow you to create a Node server for Twilio authentication. Otherwise, the button simply shows taco gifs. Cool, but less magical.
Building from source locally
Some reveal.js features require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.
$ git clone firstname.lastname@example.org:hakimel/reveal.js.git
- Navigate to the reveal.js folder
$ cd reveal.js
- Install dependencies
$ npm install
- Serve the presentation and monitor source files for changes
$ grunt serve
- Open http://localhost:8000 to view your presentation
You can change the port by using
grunt serve --port 8001.