class2.html

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

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

    <title>Class 2 ~ Web Accessibility ~ Girl Develop It</title>

    <meta name="description" content="This is the Girl Develop It Web Accessibility curriculum. It was originally developed by Sylvia Pellicore and modified by Marcy Sutton.

    This course is meant to be taught as a two-week class. The primary slides are designed for maximum presentability--one picture, one sentence. The vertical slides contain speaker notes, to make the slides more useful as a shared resource.

    Each of the slides is customizable according to the needs of a given class or audience.  The GitHub repository contains an Instructor Guide, with further information about the course.">
    <meta name="author" content="Girl Develop It">

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

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

    <!-- For syntax highlighting -->
    <!-- light editor--><link rel="stylesheet" href="lib/css/light.css">
    <!-- dark editor<link rel="stylesheet" href="lib/css/dark.css">-->
    <!--<link rel="stylesheet" href="lib/css/zenburn.css">-->

    <link rel="stylesheet" href="plugin/accessibility-helper/css/accessibility-helper.css">

    <!-- If the query includes 'print-pdf', include the PDF print sheet -->
    <script>
      if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
      }
    </script>

    <!-- If use the PDF print sheet so students can print slides-->

    <link rel="stylesheet" href="css/print/pdf.css" type="text/css" media="print">
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <!--[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">
        <!-- Opening slides -->
        <section>
					<img src="img/circle-gdi-logo.png" alt="Girl Develop It" style="max-height: 400px;" class="nonbordered">
					<h1>Intro to Web Accessibility</h1>
					<h2>Class 2</h2>
				</section>

				<!-- Welcome-->
				<section>
					<h2>Welcome!</h2>
					<p>Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.</p>
					<p class ="green">Some "rules"</p>
					<ul>
						<li>We are here for you!</li>
						<li>Every question is important</li>
						<li>Help each other</li>
						<li>Have fun</li>
					</ul>
				</section>

				<!-- Intro: What is Accessibility?-->
				<section>
					<h2>What is accessibility?</h2>
					<ul>
						<li>Accessibility is about making your sites useful to as many people as possible.</li>
						<li>Accessibility is about overcoming barriers.</li>
						<li>Accessibility is about helping your users.</li>
					</ul>
          <aside class="notes">Just a quick review</aside>
				</section>
				<section>
					<h2>What are the common problems?</h2>
					<div id="webaim-survey-problematic-items" style="background: url(img/webaim-survey-problematic-items.png) no-repeat center top; background-size: 75% auto; padding-top: 50%; width: 100%;">
						<ul class="visuallyhidden">
							<li>The presence of inaccessible Flash content</li>
							<li>CAPTCHA - images presenting text used to verify that you are a human user</li>
							<li>Links or buttons that do not make sense</li>
							<li>Images with missing or improper descriptions (alt text)</li>
							<li>Screens or parts of screens that change unexpectedly</li>
							<li>Complex or difficult forms</li>
							<li>Lack of keyboard accessibility</li>
							<li>Missing or improper headings</li>
							<li>Too many links or navigation items</li>
							<li>Complex data tables</li>
							<li>Inaccessible or missing search functionality</li>
							<li>Lack of "skip to main content" or "skip navigation" links</li>
						</ul>
					</div>
					<p>Source: <a href="http://webaim.org/projects/screenreadersurvey5/" target="_blank" title="Link opens in a new window">WebAIM Screen Reader Survey, February 2014<span class="visuallyhidden"> opens in a new window</span></a></p>
          <aside class="notes">Introduce the WebAIM Screen Reader survey and show the common problems. Marcy's version of the <a href="http://marcysutton.com/stuff/GDI-Accessibility/img/webaim-survey-problematic-items.png">infographic</a> highlights topics covered in the two classes. This can be helpful to keep open in a second browser tab so it can be referenced more than once.</aside>
				</section>

				<section>
					<h2>How do I code for accessibility?</h2>
					<h3>HTML</h3>
					<img src="img/wallace-gromit.jpg" alt="Wallace &amp; Gromit" style="position: absolute; right: 0;" />
					<ul style="padding-right: 30%;">
						<li>Headings &amp; Semantic Structure</li>
						<li>Form Labels &amp; Text Alternatives</li>
						<li>Tab Index</li>
						<li>External link indicators</li>
					</ul>
				</section>

				<section>
					<h2>HTML Headings</h2>
					<p>Semantic structure is one of the most important usability features for screen reader users, as it helps them more easily understand and navigate the page structure. Headings also help <em>all</em> your users can and understand content. <a href="http://accessiblehtmlheadings.com/" target="_blank" title="Link opens in a new window">Read more about headings<span class="visuallyhidden"> opens in a new window</span></a>.</p>
<pre><code class="html">// Headings should not skip levels until h1-h4 have been established
&lt;h1&gt;Most important&lt;/h1&gt;
&lt;h2&gt;Next most important&lt;/h2&gt;
&lt;h3&gt;Third most important&lt;/h3&gt;
&lt;h4&gt;Other heading&lt;/h4&gt;
</code></pre>
					<p>Tip: use the Firefox Web Developer Toolbar to inspect headings. Look under Information > View Document Outline.</p>
          <aside class="notes">The metaphor of an outline for a paper or article is helpful here.</aside>
				</section>

				<section>
					<h2>HTML5 Headings</h2>
					<h3>Use with caution</h3>
					<img src="img/html5-girl.png" alt="HTML5 Girl" />
					<p><a href="http://www.paciellogroup.com/blog/2013/10/html5-document-outline/" target="_blank" title="Link opens in a new window">The HTML5 Document Outline
					<span class="visuallyhidden"> opens in a new window</span></a><br> by the Paciello Group</p>

          <aside class="notes">Talk about <a href="http://tink.co.uk/2013/02/screen-reader-support-for-html5-sections/">screen reader testing</a> of HTML 5 tags &amp; headings and the current state of the HTML5 heading algorithm (h1's that start over with new landmarks). Mention <a href="http://accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/">bugs with JAWS and IE8.</a></aside>
				</section>

				<section>
					<h2>Form Labels</h2>
					<h3>How do they work?</h3>
					<!-- explanation here -->
					<div class="code-example">
						<label for="name-field">Name</label>
						<input type="text" id="name-field" name="name-field" placeholder="Type your furry friend's name" />
						<div class="float">
							<label for="species-dog">Dog</label>
							<input type="radio" id="species-dog" name="species" />
						</div>
						<div class="float">
							<label for="species-cat">Cat</label>
							<input type="radio" id="species-cat" name="species" />
						</div>
						<div class="clear"></div>
					</div>
<pre><code class="html" data-trim>&lt;label for="name-field"&gt;Label&lt;/label&gt;
&lt;input type="text" id="name-field" name="name-field"&gt;
</code></pre>
				</section>

				<section>
					<h2>Let's develop it</h2>
					<h3>Add labels to an HTML form</h3>
<pre><code class="html" data-trim>&lt;label for="name-field"&gt;Label&lt;/label&gt;
&lt;input type="text" id="name-field"
name="name-field" placeholder="Type your name" /&gt;
</code></pre>
				</section>

				<section>
					<h2>External Links</h2>
					<h3>Provide affordances to warn users.</h3>
					<img src="img/dont-make-me-think.jpg" alt="Don't Make Me Think by Steve Krug" style="float: right;max-width:25%;" class="nonbordered" />
					<img src="img/links-WCAG.png" alt="WCAG 2.0 Link requirements" class="nonbordered" />
					<img src="img/how-i-audit-a-website-external-link.png" alt="How I Audit a Website for Accessibility external link indicator" class="nonbordered" />
				</section>

				<section>
					<h2>External Links</h2>
					<h3>Let's Look at Some Code</h3>
<pre><code class="html" data-trim>
&lt;a href="goofy.html"&gt;Goofy page&lt;a&gt;

&lt;a href="http://disney.com" target="_blank"
title="Link opens in a new window"
class="external-link"&gt;
Disney.com
&lt;span class="offscreen"&gt;
opens in a new window
&lt;span&gt;
&lt;/a&gt;
</code></pre>
					<p>For links that open in new windows, an offscreen <code>span</code> inside the link is most reliable for screen readers, but <code>title=""</code> can also be used.</p>
          <aside class="notes">A common problem cited in the WebAIM survey is “unexpected screen changes”. Discuss how to warn users of links that open in new windows with offscreen text and title attributes. Include a discussion about how it's really about usability in general. Recommended reading: “Don't Make Me Think” by Steve Krug</aside>
				</section>

				<section>
					<h2>Tab Index</h2>
					<h3>What is it?</h3>
					<p>The tabindex attribute explicitly defines the tab order for focusable elements (typically links and form controls) within a page. It can be used to define whether elements should be focusable. (<a href="http://webaim.org/techniques/keyboard/tabindex" target="_blank" title="Link opens in a new window">WebAIM<span class="visuallyhidden"> opens in a new window</span></a>)</p>
					<div style="padding-top:20px;">
						<h3 tabindex="0">Focusable Heading</h3>
						<a href="#" tabindex="-1">Link focusable only by script</a>
						<div tabindex="0">Focusble div</div>
					</div>
					<aside class="notes">
            <p>Source: http://reference.sitepoint.com/html/a/tabindex</p>
            <p>Explain tab order. Show a demo of tabIndex=”” attributes on native and non-native elements to show how it affects the flow of a document (anchor, input, div, heading, etc.). Explain tab index values of -1, 0 and 1+ their specific purposes</p>
          </aside>
				</section>

				<section>
					<h2>Let's Develop It</h2>
					<h3>Explore tab-index on native and non-native elements</h3>
<pre><code class="html" data-trim>&lt;h1 tabindex="0"&gt;Focusable Heading&lt;h1&gt;
&lt;a href="#" tabindex="-1"&gt;Link focusable only by script&lt;/a&gt;
&lt;div tabindex="1"&gt;Div tabbable in new order&lt;div&gt;
</code></pre>
					<p>Note: <code>tabindex</code> values higher than 0 require managing the entire page's tab order. Use with caution!</p>
          <aside class="notes">Explicitly mention the pitfalls of positive tabindex values, including the extra maintance and testing. Tabindex is like z-index; any positive value will supercede everything else on the page.</aside>
				</section>

				<section>
					<h2>How do I code for accessibility?</h2>
					<h3>CSS</h3>
					<ul>
						<li>Visually Hidden Content</li>
						<li>Really Hidden</li>
					</ul>
				</section>

				<section>
					<h2>Visually Hidden Content</h2>
					<h3>How does it work?</h3>
<pre><code class="css" data-trim>/* Hide only visually, but have it available for screenreaders.
Copied from HTML5 Boilerplate*/

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
</code></pre>
						<p><a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">Hiding Content for Accessibility</a></p>
					</section>

					<section>
						<h2>Really Hidden</h2>
						<h3>How to show and hide content from all users</h3>
<pre><code class="css" data-trim>.reallyHidden {
	display: none;
	visibility: hidden;
}
.notHidden {
	display: block;
	visibility: visible;
}
</code></pre>
					</section>

					<section>
						<h2>Let's Develop It</h2>
						<p>Explore keyboard navigation with content that is hidden and offscreen</p>
					</section>

					<section>
						<h2>How do I code for accessibility?</h2>
						<h3>Accessible Rich <br>Internet Applications</h3>
						<ul>
							<li>Expands HTML's native vocabulary.</li>
							<li>Communicates state and purpose to assistive technologies.</li>
							<li>Used mainly for custom widgets and web applications.</li>
						</ul>
						<p style="margin-top:1em;"><a href="https://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/" target="_blank">What is WAI-ARIA, what does it do for me, and what not?<span class="visuallyhidden"> opens in a new window</span></a></p>
					</section>

					<section>
						<h2>ARIA Core Components</h2>
						<div class="inset-width">
							<div class="definition">
								<h4 style="margin-top: 0.75em">Roles</h4>
								<p>What does this thing do?</p>
<pre><code class="html xml">&lt;form role="search"&gt;</code></pre>
							</div>
							<div class="definition">
								<h4 style="margin-top: 0.75em">States</h4>
								<p>The current condition of this particular thing</p>
<pre><code class="html xml">&lt;input aria-disabled="true"&gt;</code></pre>
							</div>
							<div class="definition">
								<h4 style="margin-top: 0.75em">Properties</h4>
								<p>The nature of the thing</p>
<pre><code class="html xml">&lt;input aria-required="true"&gt;</code></pre>
							</div>
						</div>
					</section>

					<section>
						<h2>General Resources</h2>
						<ul>
							<li><a href="http://webaim.org/projects/screenreadersurvey4/" target="_blank" title="Link opens in a new window">WebAIM Screen Reader Survey<span class="visuallyhidden"> opens in a new window</span></a></li>
							<li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en" target="_blank" title="Link opens in a new window">Chrome Accessibility Developer Tools<span class="visuallyhidden"> opens in a new window</span></a>, a Chrome extension that does in-browser audits and highlights ARIA properties.</li>
							<li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" target="_blank" title="Link opens in a new window">Web Developer toolbar<span class="visuallyhidden"> opens in a new window</span></a>, a Firefox extension with helpful tools</li>
							<li><a href="http://a11yproject.com/" target="_blank">The Accessibility Project<span class="visuallyhidden"> opens in a new window</span></a></li>
							<li><a href="http://www.w3.org/TR/aria-in-html/" target="_blank" title="Link opens in a new window">Using ARIA in HTML<span class="visuallyhidden"> opens in a new window</span></a>
						</ul>
					</section>

      </div>
      <footer>
        <div class="copyright">
          Introduction to Web Accessibility -- Girl Develop It --
          <a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
        </div>
      </footer>
    </div>


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

    <script>

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

        transition: 'slide', // 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, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'plugin/zoom-js/zoom.js', async: true },
          { src: 'plugin/notes/notes.js', async: true },
          { src: 'plugin/accessibility-helper/js/accessibility-helper.js', async: true, condition: function() { return !!document.body.classList; } }
        ]
      });

    </script>

  </body>
</html>