• Visual impairments
• Motor and mobility impairments
• Hearing impairments

• Basic HTML
• Simple layout
• Forms-based interaction
• No JavaScript

• Add labels to form elements
• Add alt attributes to images
• Make links make sense

• Poor Focus Management
• No Keyboard Commands
• Unusable Custom Controls
• The user doesn't know when things change on the page

• Legal Responsibility
• Coding accessible HTML5
• Auditing
• Questions and fumbling for answers

• Who does this apply to?

  • Student-facing applications?
  • Everyone.

• Do we care?

  • Of course we care
  • Realistic about priority

• (a) alt attributes
• (b) subtitles
• (c) color
• (d) stylesheets
• (e) image maps!
• (f) seriously, image maps
• (g) row/column headers
• (h) data table cells

• (i) frames
• (j) blinking
• (k) text only page
  • most misunderstood
• (l) scripts
• (m) required plugins
• (n) form elements
• (o) skipping navigation
• (p) timing

• Bobby Approved
  • Where's Bobby?
  • '96 CAST
  • '04 Watchfire
  • '07 IBM
• WCAG 2.0
  • A
  • AA
  • AAA

• Use clean HTML and standard tags whenever possible
• Manage focus
• Add key handlers
• Add ARIA for screen readers

• Use CSS for layout, make sure DOM is in logical order
• Don't use generic div or span when there's another HTML tag that's more semantically appropriate!
  
  

  				<span onclick="">...  ⇒  <a href="">...
  				<div onclick="">...   ⇒  <button onclick="">...

• Label images and form controls
  
  

  				<img src="chart.png" alt="(description)">
  
  				<label for="firstname">First name:<label>
  				<input type="text" id="firstname"/>

• Make custom interactive elements focusable with tabindex:
  
  

  				<!-- Natural tab order -->
  				<div onclick="" tabindex="0">Clicky 1</div>
  
  				<!-- Custom tab order -->
  				<div onclick="" tabindex="7">Clicky 2</div>
  
  				<!-- Focusable but not in tab order -->
  				<div onclick="" tabindex="-1">Clicky 3</div>
  			

• Proactively place focus with element.focus() to create an effcient workflow.

Custom controls should respond to keys like Enter, Space, Arrows, Escape, etc. as appropriate

			<div id="reply_icon"
			     tabindex="0"
			     onclick="reply()"
			     onkeydown="return onReplyKeydown(event)">Reply</div>

			<script>
			  function onReplyKeydown(event) {
			    if (event.keyCode == 32 || event.keyCode == 13)  // Space / Enter
			      reply();
			  }
			</script>

<p>
Click on this button:
</p>
<div class="custombutton"
onclick="alert('sent!')">
Send
</div>

<p>
Click on this button:
</p>
<div class="custombutton" 
tabindex="0" role="button" 
onkeypress="onclick()"
onclick="alert('sent!')">
Send
</div>

<script>
function toggle() {
  var b = $('#tb');
  if (b.hasClass('toggled')) {
    b.removeClass('toggled');
  } else {
    b.addClass('toggled');
  }
}
</script>

<div id="tb"
     class="togglebutton"
     onclick="toggle()">
  Toggle
</div>

<script>
function toggle() {
  var b = $('#tb');
  if (b.hasClass('toggled')) {
    b.removeClass('toggled');
    b.attr('aria-pressed', false);
  } else {
    b.addClass('toggled');
    b.attr('aria-pressed', true);
  }
}
</script>
<div id="tb" class="togglebutton"
  tabindex="0" role="button"
  onkeypress="onclick()"
  onclick="toggle()">
Toggle</div>

<p>
  Click to begin calculation:
</p>
<button onclick="calculate()">
  Calculate
</button>

<div id="status">
  Status goes here.
</div>

<p>
  Click to begin calculation:
</p>
<button onclick="calculate()">
  Calculate
</button>

<div id="status" aria-live="polite">
  Status goes here.
</div>

<p>
  Rate from 1 to 5 stars:
</p>
<div id="stars" class="star_rating">
  <span class="star_cancel"></span>
  <span class="star_full"></span>
  <span class="star_full"></span>
  <span class="star_full"></span>
  <span class="star_empty"></span>
  <span class="star_empty"></span>
  <span class="star_caption">
    3 stars
  </span>
</div>

<p>
  Rate from 1 to 5 stars:
</p>
<div id="stars" class="star_rating"
tabindex="0"
role="slider"
aria-valuemin="0"
aria-valuemax="5"
aria-valuenow="3"
aria-valuetext="3 stars">
  <span class="star_cancel"></span>
  <span class="star_full"></span>
  <span class="star_full"></span>
  <span class="star_full"></span>
  <span class="star_empty"></span>
  <span class="star_empty"></span>
  <span class="star_caption">
    3 stars
  </span>
</div>

<script>
function confirm() {
  $('#modal_dialog').css('display', 'block');
}
</script>

<button onclick="confirm()">
  Finish Brown Bag
</button>

<div id="modal_dialog" class="dialog">
  <p>Are you sure you don't want to hear more?</p>
  <button id="ok">End it</button>
  <button id="cancel">Cancel</button>
</div>

<script>
function confirm() {
  $('#modal_dialog').css('display', 'block');
  $('#modal_dialog').focus();
}
</script>

<button onclick="confirm()">
  Finish Brown Bag
</button>

<div id="modal_dialog" class="dialog"
  tabindex="-1" role="dialog">
  <p>Are you sure you don't want to hear more?</p>
  <button id="ok">End it</button>
  <button id="cancel">Cancel</button>
</div>

• JAWS (and NVDA)
  • Firefox
  • IE
• VoiceOver
  • Safari
• ChromeVox
  • Chrome

Wave

• Accepted Standard
• Tests 508 and WCAG 2.0
• Can't help with internal sites

• Integrated Tools
  • Wave Toolbar (IE)
  • Firefox Web Developer Toolbar
  • Chrome Accessibility Extension (Web Developer Tools)
• These will make you feel better

• What you can expect:
  • Recommendations
  • Strategy!
• What you can hope for:
  • An official channel for getting help
    • Auditing your application
    • Fixing accessibility bugs

• This wasn't for you!
• But if you take nothing else away...
  • Standard tags
  • Descriptions
  • Focus
  • Just "unplug" your mouse
• Communicate
  • Work together
  • chat.huit.harvard.edu -> Accessibility

• User Experience
  • DOM order
    • Maintainability
    • Standards
  • Keyboard Controls
    • Power Users
    • Lazy Users
  • Focus
    • Power Users
    • Pleasant experience
  • Labels
    • Increased clickable area