index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Web Accessibility for Javascript Developers</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

<!-- Slide set: Introduce-the-speaker -->
<section>
  <section>
    <h1>Web Accessibility for Javascript Developers</h1>
  </section>

  <section>
    <h2>Who am I?</h2>
    <h3>Andrew Macpherson</h3>
    <p>Backend developer at <a href="http://www.annertech.com">Annertech</a></p>
    <p>Contributor at <a href="https://www.drupal.org">Drupal</a> project</p>
    <p><small>Twitter: <a href="http://twitter.com/martianwebdev">@martianwebdev</a><br />
    Github: <a href="https://github.com/fuzzbomb">fuzzbomb</a></small></p>
  </section>
</section>

<section>
  <h2>Why accessibility</h2>
</section>

<!-- Slide set: Accessibility Principles -->
<section>
  <section>
    <h2>Accessibility Principles</h2>
    <p><a href="">W3C Web Acessibility Initiative</a> (WAI)</p>
    <p><a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines 2.0</a> (WCAG)</p>
    <ul>
      <li>Perceivable</li>
      <li>Operable</li>
      <li>Understandable</li>
      <li>Robust</li>
    </ul>
    <p><em>"POUR"</em><p/>
  </section>
  <section>
    <h2>WCAG Success Criteria</h2>
    <p>WCAG is organized as a set of <em>success criteria</em>, each describing an accessibility practice in terms of:</p>
    <ul>
      <li>Intent &amp; Benefits</li>
      <li>Priority level (A, AA, AAA)</li>
      <li>Examples</li>
      <li>Sufficient techniques</li>
      <li>Common failures</li>
    </ul>
    <p>Example: <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">SC 1.3.1 Info and Relationships</a> describes the use of headings and labels to indicate the structure of a page.</p>
  </section>
</section>

<!-- Topics NOT covered -->
<section>
  <section>
  <h2>Things I <em>don't</em> want to cover in depth today</h2>
    <p>... because this talk is for JS developers!</p>
    <p>... because there isn't time,</p>
    <p>... but these things are still important topics.</p>
  </section>
  <section>
    <h3>Automated a11y testing</h3>
    <ul>
      <li>It's a HUGE topic.</li>
      <li>Lots of exciting recent developments, including DOM and headless browser testing.</li>
      <li>Many things <em>can't</em> be tested easily or reliably. Automated testing is a adjunct to human review.</li>
      <li>Tons of reports - sometimes this doesn't really help you understand the whole accessible experience.</li>
    </ul>
  </section>
  <section>
    <h3>Content Author's Contribution</h3>
    <p>Note: content authors/editor's decisions are just as important as designers and developers.</p>
    <ul>
      <li>Document outline, headings, sections, etc.</li>
      <li>Organising content, writing styles, use of diagrams, plain English, etc.</li>
      <li>Context - choice of text alternatives for images.</li>
      <li>Audio/Video content, captioning, etc.</li>
    </ul>
  </section>
  <section>
    <h3>"Compliance"</h3>
    <ul>
      <li>TL;DR - 2010 Equality Act basically says "don't discriminate".</li>
      <li>When focusing on compliance, sometimes you're being bureaurocratic instead of thinking about the accessible experience practically/holistically.</li>
      <li>Commissioning guides, and thinking about accessibility at organizational level - see BS 8878</li>
    </ul>
  </section>
  <section>
    <h3>Role of Design, IA, and MAinstream UX</h3>
    <p>Actually, I love talking about this. Just not today.</p>
    <ul>
      <Li>Colour Contrast</li>
      <li>Colour Blindness affects ~4% of population!</li>
      <li>Windows high-contrast mode.</li>
    </ul>
  </section>
</section>

<!-- Slide set: inaccessible widget, works with a mouse -->
<section>
  <section>
    <h2>Example UI widget</h2>
    <p>Let's start with an <em>inaccessible</em> example,<br />
    then see how we can improve it.</p>
    <p><img src="img/burger-menu-icon.png" alt="Screenshot of a mobile menu icon." /></p>
    <p>We'll make a mobile menu button - <em>a.k.a "Burger Menu"</em></p>
  </section>
  <section>
    <h3>Sample Code</h3>
    <p>Git repo: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo">fuzzbomb/mobile-menu-a11y-demo</a></p>
    <p>Improvements made during these slides are marked as git tags, which we'll refer to as we go along.</p>
    <p>A <a href="http://fuzzbomb.github.io/mobile-menu-a11y-demo/">working demo</a> of the finished menu widget is also available.</p>
  </section>
  <section>
    <h3>HTML markup</h3>
    <p>Our button is a &lt;div&gt;, and our menu is a list of links.</p>
    <pre><code class="html">
  <div id="main-menu">
    <div id="main-menu-button">
      <i class="fa fa-bars"></i>
      <span>Main Menu</span>
    </div>
    <nav>
      <ul>
        <li><a href="http://example.com/tech">Technology</a></li>
        <li><a href="http://example.com/science">Science</a></li>
        <li><a href="http://example.com/arts">Arts</a></li>
      </ul>
    </nav>
  </div>
    </code></pre>
  </section>
  <section>
    <h3>Javascript Behaviour</h3>
    <p>Bind a click handler to our &lt;div&gt; to toggle menu visibility.</p>
    <pre><code class="javascript">    $(document).ready(function() {
      // Initialize.
      var menuDisplayed = false;
      $('#main-menu nav').hide();
      // Add the open/close behaviour.
      $('#main-menu-button').click(function(event) {
        if (menuDisplayed === true) {
          $('#main-menu nav').hide();
          menuDisplayed = false;
        }
        else {
          $('#main-menu nav').show();
          menuDisplayed = true;
        }
      });
    }); </code></pre>
  </section>
  <section>
    <h3>DEMO 1</h3>
    <p><em>"Works with a mouse"</em></p>
    <p><small>Git tag: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo/releases/tag/milestone-start-works-with-mouse">milestone-start-works-with-mouse (dbd95a5)</a></small></p>
  </section>
</section>


<!-- Slide set: introducing the keyboard-only experience -->
<section>
  <section>
    <h2>The Keyboard-only Experience</h2>
    <p>Just a few simple controls.</p>
    <p>Not necessarily using assistive-technology<br />Might be a plain-old QWERTY keyboard.</p>
  </section>
  <section>
    <h3>Basic keyboard controls</h3>
    <ul>
      <li>TAB to move between <em>interactive</em> elements.<br />
         (SHIFT + TAB moves backwards among them.)</li>
      <li>ENTER and/or SPACE to <em>operate</em> interactive elements.</li>
      <li>Arrow keys help in some places (radios, select, slider)</li>
      <li>ESCAPE cancels things (e.g. dialogs).</li>
      <li>Navigate viewport with SPACE, PgUp, PgDn, Home, End</li>
      <li>Browser Menu Bar + Context menus</li>
      <li>Caret browsing, spatial navigation - some browsers only.</li>
    </ul>
  </section>
  <section>
    <h3>Focus styles</h3>
    <p>Sighted keyboard users <em>really</em> need to be sure what element has focus, before they press enter.</p>
    <p>Subtle focus styles <em>don't work</em> - they need to be clear. Beware of re-using mouse hover styles.</p>
    <p>This doesn't limit your creativity - take inspiration from games consoles and Smart TV.</p>
  </section>
  <section>
    <h3>Bypass Blocks - part 1</h3>
    <h4>"skip to main content" links</h4>
    <p>Allows quick access to interact with the page's main content, <em>without</em> traversing lots of sidebar links, or a header menu.</p>
    <p>Who benefits? <em>Primarily</em> sighted keyboard users. (Screen-readers offer other ways to get around a page.)</p>
    <p><a href="https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">WCAG Success Criterion 2.4.1 - Bypass Blocks</a></p>
  </section>
  <section>
    <h3>DEMO</h3>
    <!-- BBC homepage, volunteer? -->
  </section>
</section>

<!-- Mythbusting 1 -->
<section>
  <h2>Myth-busting - <em>"Off-Canvas"</em></h2>
  <p>Off-canvas != Off-viewport</p>
  <p>Be careful. Elements rendered off-viewport can be<br /> a help <em>or</em> a hindrance...</p>
  <p><em>Good:</em><br />"Invisible" labels are still accessible to screen-readers.</p>
  <p><em>Bad:</em><br />Focusable elements are traversed by sighted keybpoard users, who can't tell what is in focus.</p>
</section>

<!-- Slide set: Fixing the keyboard experience -->
<section>
  <section>
    <h2>Fixing the keyboard-only experience</h2>
    <p>The menu widget we have built does not work for keyboard users at all. The <em>expected</em> behaviour is:</p>
    <ol>
      <li>Press TAB until I can see the button has focus.</li>
      <li>Press space or enter to activate the button.</li>
    </ol>
  </section>
  <section>
    <h3><em>Allow</em> keyboard focus</h3>
     <pre><code class="html">
  <div id="main-menu">
    <div id="main-menu-button" tabindex=0>
      <i class="fa fa-bars"></i>
      <span>Main Menu</span>
    </div>
    // ... list of menu links
  </div>
    </code></pre>
    <p>Add a <code>tabindex=0</code> attribute to our &ltdiv&gt;.</p>
    <p>Keyboard focus is now possible, but the button<br /> does not yet respond to keypress.</p>
  </section>
  <section>
    <h3><em>Indicate</em> the focus</h3>
    <pre><code class="css">
    #main-menu-button {
      background-color: #444444;
      color: #ffffff;
    }

    #main-menu-button:focus {
      background-color: #ffffff;
      color: #444444;
    }
    </code></pre>
    <p>Use CSS to make it <em>very obvious</em> that the button has focus.</p>
    <p>In this example, we invert the colour contrast.<br />Avoid styles which are too subtle.</p>
  </section>
  <section>
    <h3><em>Respond</em> to keypress</h3>
    <pre><code class="javascript">
      $('#main-menu-button')
        .keypress( function(event) {
          // Only respond to enter or spacebar keys
          if (event.which == 13 || event.which == 32) {
            // Spacebar usually triggers page scrolling.
            event.preventDefault();
            $(this).trigger('click');
          }
        })
        .click(function(event) {
          // The open/close behaviour
          // ...
        });
    </code></pre>
    <p>Listen for keypress event, confirm which button was pressed, and trigger a click() event.</p>
  </section>
  <section>
    <h3>DEMO 2</h3>
    <p><em>"Works with a keyboard"</em></p>
    <p><small>Git tag: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo/releases/tag/milestone-works-with-mouse-and-keyboard">milestone-works-with-mouse-and-keyboard (3b8622c)</a></small></p>
  </section>
</section>

<!-- Slide set: introducing the screen-reader experience -->
<section>
  <section>
    <h2>The Screen-reader Experience</h2>
    <p><em>Whoah. Learning curve.</em></p>
  </section>
  <section>
    <h3>Two Crucial Tools</h3>
    <ol>
      <li>Headphones!</li>
      <li>The <em>stop-talking</em> key command.</li>
    </ol>
    <p>Be kind to your colleagues :-)</p>
  </section>
  <section>
    <h3>Slice &amp; Dice</h3>
    <p>Many ways to navigate or inspect a page...</p>
    <ul>
      <li>Document outline: sensible heading levels!</li>
      <li>ARIA Landmark Roles: header, footer, nav-bar, search box.</li>
      <li>Focus via TAB key, like a sighted keyboard user.</li>
      <li>Forms mode (some screenreaders offer extra forms tools).</li>
      <li>Browse a list of links.</li>
    </ul>
  </section>
  <section>
    <h3>Screenreader User habits</h3>
    <p>WebAIM Screenreader user survey</p>
    <ul>
      <li>What technology do you use?</li>
      <li>Preferred navigation methods?</li>
      <li>Dealing with images, frames, PDF, multimedia, ...</li>
    </ul>
  </section>
  <section>
    <h3>Bypass Blocks - Part 2</h3>
    <h4>ARIA Landmark Roles</h4>
    <p>&lt;ul role=navigation&gt;</p>
    <p>main, banner, contentinfo, navigation,<br />complementary, search, ...</p>
    <p>New HTML5 elements - main, header, footer, nav, aside.</p>
  </section>
  <section>
    <h3>DEMO</h3>
    <!-- BBC homepage, volunteer? -->
  </section>
</section>

<!-- Slide set: HTML semantics -->
<section>
  <section>
    <h2>Semantics Revisited</h2>
    <p>Re-cap. We already know this stuff...</p>
  </section>
  <section>
    <h3>HTML Elements</h3>
    <ul>
      <li>&lt;div&gt; means <em>nothing</em>></li>
      <li>&lt;span&gt; means <em>nothing</em>></li>
      <li>&lt;button&gt; - press it, makes something <em>happen</em>.</li>
      <li>&lt;a href&gt; - hyperlinks direct you <em>elsewhere</em>.</li>
      <li>Button vs Link. We'll run into that a lot.</li>
    </ul>
  </section>
  <section>
    <h3>Human-readable semantics</h3>
    <p>Attributes which often contain rich semantics, but are really only useful to a human audience: developers!</p>
    <ul>
      <li>class attribute</li>
      <li>data-* attributes</li>
      <li>ng-* attributes</li>
      <li>Others?</li>
    </ul>
    <p>None are understood by screen-readers.</p>
  </section>
  <section>
    <h3>Semantics for screen-readers</h3>
    <p>We want machine-readable semantics</p>
    <ul>
      <li>HTML Elements: headings, tables, forms, ...</li>
      <li>HTML attributes: disabled, required, checked, ...</li>
      <li>aria-* attributes</li>
      <li>SVG, MathML.</li>
    </ul>
  </section>
</section>

<!-- Slide set: WAI-ARIA intro -->
<section>
  <section>
    <h2>Introducing WAI-ARIA</h2>
    <p>HTML is NOT a user interface language.</p>
    <p>ARIA provides vocabulary of UI roles, states, and properties.</p>
    <p>They express the range of interaction found in native Desktop and Mobile UI widget APIs.</p>
    <p>Formal, machine-readable semantics.</p>
  </section>
  <section>
    <h3>An ARIA buffet</h3>
    <ul>
      <li>Roles: navigation, menubar, spinbutton, tablist, ...</li>
      <li>States: expanded, pressed, invalid, grabbed, ...</li>
      <li>Relationships: labelled-by, described-by, controls, ...</li>
      <li>Properties: haspopup, dropeffect, readonly, ...</li>
    </ul>
  </section>
  <section>
    <h3>The Golden Rules of ARIA</h3>
    </p>Do NOT use an aria-* role or property,<br />if an equiavlent one already exists in HTML.</p>
    <p>Host-language semantics are preferred.</p>
    <p>Use sparingly!</p>
  </section>
  <section>
    <h3>Other Uses of ARIA</h3>
    <ul>
      <li>Use in other languages: SVG, MathML, ...</li>
      <li>Sometimes <em>safer</em> to over-ride a HTML native role.<br />
          Avoids breaking CSS or JS which deals with elements by tag names.</li>
      <li>Complex relationships: text inputs in a table can be labelled by both Column and Row headers.</li>
      <li>ASCII art!<br />
          &lt;pre role=&quot;image&quot; aria-label=&quot;ASCII art picture of a fish&quot;&gt;<br />
          equivalent to &lt;img alt=&quot;ASCII art fish&quot;/&gt;</li>
    </ul>
  </section>
</section>

<!-- Slide set: Improving the screen-reader experience -->
<section>
  <section>
    <h2>Improving the screen-reader experience</h2>
    <p>Aim to provide a screenreader user with an idea of<br /> what the button can be <em>used for</em>.</p>
    <ol>
      <li>Describe the button:
        <ul>
          <li>Announce the <em>name</em> of the button</li>
          <li>Indicate it is a <em>button</em></li>
        </ul>
      </li>
      <li>Describe the <em>behaviour</em> of the button:
        <ul>
          <li>Expanded</li>
          <li>Collapsed</li>
        </ul>
      </li>
    </ol>
  </section>
  <section>
    <h3>Announce the <em>name</em> of the button</h3>
    <p>We were hiding the text label with CSS display:none (which prevents screenreaders from finding it) so we'll remove this.</p>
    <pre><code class="css">-#main-menu-button span {
-  display: none;
-} </code></pre>
    <p>The visuallyhidden class (from HTML5 Boilerplate) uses clip and overflow properties to hide the text in a 1px square box.</p>
    <pre><code class="html"><div id="main-menu-button" tabindex=0>
  <i class="fa fa-bars"></i>
  <span class="visuallyhidden">Main Menu</span>
</div> </code></pre>
    <p>Now a screenreader can announce the button name.</p>
  </section>
  <section>
    <h3>Indicate it is a <em>button</em></h3>
    <pre><code class="html"><div role="button" id="main-menu-button" tabindex=0>
  <i class="fa fa-bars"></i>
  <span class="visuallyhidden">Main Menu</span>
</div>
</code></pre>
    <p>Adding <code>role=button</code> to the &lt;div&gt; overrides the default HTML semantic, so screenreaders can announce it as a "button" (or sometimes "clickable").</p>
  </section>
  <section>
    <h3>Describe the <em>behaviour</em> of the button</h3>
    <p>We'll use two ARIA attributes in tandem. Note that both of these attributes need to go on the button element itself.</p>
    <ul>
      <li><code>aria-controls</code> indicates a <em>relationship</em> between<br />two elements (the button controls the list of links).</li>
      <li><code>aria-expanded</code> indicates whether the list is<br />currently shown.</li>
    </ul>
  </section>
  <section>
    <h3><code>aria-controls</code> property</h3>
    <p>aria-controls needs an ID to refer to.</p>
    <pre><code class="html"><div role="button" id="main-menu-button" tabindex=0>
  <i class="fa fa-bars"></i>
  <span class="visuallyhidden">Main Menu</span>
</div>
<nav id="main-menu-nav">
  <ul> ... list of links ... </ul>
</nav>
</code></pre>
    <pre><code class="javascript">$('#main-menu-button')
  .attr('aria-controls', 'main-menu-nav')
  .keypress( function(event) {
    /* Handle keypress */
  })
  .click(function(event) {
    /* The open/close behaviour acts on '#main-menu nav' */
  });</code></pre>
  </section>
  <section>
    <h3><code>aria-expanded</code> state</h3>
    <pre><code class="javascript">$('#main-menu-button')
  .attr('aria-controls', 'main-menu-nav')
  .attr('aria-expanded', false) // NEW, initialize
  .keypress( function(event) { /* Handle keypress */ })
  .click(function(event) {
    if (menuDisplayed === true) {
      $('#main-menu nav').hide();
      $(this).attr('aria-expanded', false) // NEW
      menuDisplayed = false;
    } else {
      $('#main-menu nav').show();
      $(this).attr('aria-expanded', true) // NEW
      menuDisplayed = true;
    }
  });</code></pre>
  <p>We initialize aria-expanded as false, to match the initial appearance of the menu, and update it whenever we show or hide the menu.</p>
  </section>
  <section>
    <h3>Notes about aria-expanded</h3>
    <ul>
      <li>aria-expanded doesn't actually hide the list of links - it just provides a way to indicate the state to a screenreader.</li>
      <li>CSS display:none is doing the real work of hiding content - this comes via jQuery.hide().</li>
      <li>DO NOT initialize aria-expanded in the HTML source. Always do this in the JS, in case the JS doesn't load for some reason.</li>
    </ul>
  </section>
  <section>
    <h3>Demo</h3>
    <p><em>"Works with a screenreader"</em></p>
    <p><small>Git tag: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo/releases/tag/milestone-works-with-mouse-keyboard-screenreader">milestone-works-with-mouse-keyboard-screenreader (ad3fa57)</a></small></p>
  </section>
</section>

<!-- Slide-set: refactor -->
<section>
  <section>
    <h2>Code improvements</h2>
    <p>We actually <em>broke</em> the golden rule of ARIA. Avoid using ARIA semantics to provide a role, where HTML already provides the role with an equivalent element.</p>
    <p>In our case we used:</p>
    <pre><code class="html">
      <div role=button></div>
    </code></pre>
    <p>When we ought to have used:</p>
    <pre><code class="html">
      <button></button>
    </code></pre>
  </section>
  <section>
    <h3>More improvements</h3>
    <p>After replacing the &lt;div role=button&gt; with a <em>real</em> HTML &lt;button&gt;, we can remove a few things to simplify the code...</p>
    <ul>
      <li>tabindex=0 is no longer needed - a &lt;button&gt; is focusable.</li>
      <li>The jQuery.keypress() handler isn't needed either! The browser handles a keypress for &lt;button&gt;.</li>
      <li>In fact, we <em>must</em> now remove the jQuery.keypress() handler, because the &lt;button&gt; will now have <em>two</em> keypress handlers, and the menu will be toggled twice from one keypress. Beware of introducing this bug!</li>
    </ul>
  </section>
</section>

<!-- Slide-set: reading list -->
<section>
  <section>
    <h2>Web Accessibility Reading List</h2>
    <p>TL;DR... <a href="http://a11yproject.com/">a11yproject.com</a></p>
    <p>A community-reviewed set of practical tips, with a gentle learning curve. If you only read one thing from my reading list, make it this website.</p>
    <p>In fact, you might do better perusing <em>their</em> <a href="http://a11yproject.com/resources.html">resources</a> list ;-)</p>
  </section>
  <section>
    <h3>Using Personas</h3>
    <p><a href="http://diveintoaccessibility.info/">Dive Into Accessibility</a></p>
    <p>A short open-source book which gives a great introduction to thinking about accessibility, along with techiniques.</p>
    <p>Particularly useful for introducing <em>personas</em> when considering accessibility. For every technique, it has a discussion of who benefits, and how.</p>
    <p>It's starting to look a little dated (19&quot; is a <em>large</em> monitor!), and a few techniques have changed, but few books match this one as an introduction to the topic.</p>
  </section>
  <section>
    <h3>More about WAI-ARIA</h3>
    <ul>
      <li><a href="http://heydonworks.com/practical_aria_examples/">HeydonWorks' Practical ARIA Examples</a><br />A great intro, several re-usable patterns.</li>
      <li><a href="https://www.marcozehe.de/category/aria/">Marco's ARIA Tips</a><br />More example patterns.</li>
      <li><a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a><br />In-depth W3C guide, try it after the introductory articles.</li>
      <li><a href="http://pauljadam.com/#/demos">PaulJAdam's Modern Web Accessibility Demos</a><br />A long list of working demos. Not fully documented, but <em>lots</em> to study under the hood.</li>
    </ul>
  </section>
  <section>
    <h3>Misc</h3>
    <ul>
      <li><a href="https://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/">Testing accessibility with NVDA screen-reader and Firefox</a></li>
      <li><a href="http://getbootstrap.com/components/">Twitter Bootstrap Components</a><br />Well documented, plenty detail about steps you need to take to make best use of Bootstrap's accessibility.</li>
      <li>Twitter hashtags - #a11y #aria</li>
    </ul>
  </section>
</section>

<section>
  <h2>Any Questions?</h2>
  <p>The End</p>
  <p><small>Slides: <a href="http://fuzzbomb.github.io/js-a11y-intro-slideshow/">fuzzbomb.github.io/js-a11y-intro-slideshow</a><br />Demo code: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo">github.com/fuzzbomb/mobile-menu-a11y-demo</a></small></p>
</section>
			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'fade', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>