#Accessibility of Web Components
http://marcysutton.github.io/accessibility-of-web-components/slides.html
By Marcy Sutton
Developer at Substantial
twitter: @marcysutton
##Presented at:
- 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
##Accessibility features
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
Browser requirements
To view the demos included in the slides, you will need the latest version of Chrome with the Enable Experimental JavaScript
flag turned on or Firefox 29 with the dom.webcomponents.enabled
flag set to true
.
Installation
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 git@github.com: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
.