• Best Practices Group
• Best Practices Handbook
• Accessibility

• WCAG
  • A, AA, AAA?
• Disability Act of 1973
• Section 508
• 

• Add labels to form elements
• Add alt attributes to images
• This line intentionally left blank
• "For simple application layouts, accessibility is simple."

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

• Who does this apply to?

  • Student-facing applications?
  • Everyone.

• Subset of WCAG 2.0

  • Is that bad?
  • Subsets are good.

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

• (i) frame title
• (j) blinking bad
• (k) text only page
  • most misunderstood, please don't use
• (l) scripts
• (m) required plugins, downloads
• (n) form element labels
• (o) skipping navigation
• (p) timing

• Section 508 is old
• Can't ignore WCAG 2.0
• WCAG 2.0 AA

• 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"
  aria-pressed=true 
  tabindex="0" role="toggle"
  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()">Open Modal</button>

<div id="modal_dialog" class="dialog">
  <p>Are you sure?</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()">Open Modal</button>

<div id="modal_dialog" class="dialog"
  tabindex="-1" role="dialog">
  <p>Are you sure?</p>
  <button id="ok">End it</button>
  <button id="cancel">Cancel</button>
</div>

All of the other things developers have to worry about

• Security
• API Development
• Data Modeling
• Responsive Design / Mobility

What have I talked about?

• Some extra tags?
• Some extra attributes?
• A seriously small subset of HTML5?

• <label>

  Enter your name:

• Focus Management is your Workflow
• DOM order matters
  • Maintainability
  • Better practice is better for a reason
  • Simplify Simplify Simplify

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

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

• Software developers thrive on creativity
• Accessibility is not exciting!
• Don't rely on 3rd party solutions / contractors
• Software developers also thrive on helping people out
• Personal Connection is Key