#Accessibility of Web Components
http://marcysutton.github.io/accessibility-of-web-components/slides.html(link is external)

JSConf Video(link is external)

By Marcy Sutton(link is external)

Developer at Substantial(link is external)

twitter: @marcysutton(link is external)

##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(link is external). 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.

1. Install Node.js(link is external)

2. Install Grunt(link is external)

3. Clone the reveal.js repository

$ git clone git@github.com:hakimel/reveal.js.git

5. Navigate to the reveal.js folder

$ cd reveal.js

6. Install dependencies

$ npm install

7. Serve the presentation and monitor source files for changes

$ grunt serve

8. Open http://localhost:8000(link is external) to view your presentation

You can change the port by using grunt serve --port 8001.