SlideShare a Scribd company logo
Progressive
Enhancement
 with ARIA
   Aaron Gustafson
We are creating
 richer online
 experiences

                  2
3
...and the barriers
                       which prohibit them.
photo by drcorneilus                          4
Accessibility is crucial




photo by TimothyJ                              5
Google is a voracious consumer
                of the web. And it’s blind.




photo by Ed Yourdon                            6
But accessibility
isn’t only about
   supporting
 screen readers.

                    7
What if you can’t use a mouse?




photo by lastquest                               8
What if you don’t see a change?
photo by placenamehere                        9
We can and must build better.




photo by Guillermo                                   10
Progressive Enhancement with ARIA!                        Accessibility Summit — 30 September 2010




Building better
                                      Every great experience on the web
                                      begins with two key things: clear,
                                      well-written prose and the HTTP
                                      protocol.




  Text & HTTP



                                                                                                      11
Progressive Enhancement with ARIA!                      Accessibility Summit — 30 September 2010




Building better
                                      Semantics (markup) convey the
                                      underlying meaning of
                                      the content...




        (x)HTML

  Text & HTTP



                                                                                                    12
Progressive Enhancement with ARIA!                        Accessibility Summit — 30 September 2010




Building better
                                      Semantics (markup) convey the
                                      underlying meaning of
                                      the content...
                                      but if poorly applied, meaning can
                                      be obscured.



        (x)HTML

  Text & HTTP



                                                                                                      12
Progressive Enhancement with ARIA!                       Accessibility Summit — 30 September 2010




Building better
                                      CSS can enhance usability through
                                      visual clues...




               CSS

        (x)HTML

  Text & HTTP



                                                                                                     13
Progressive Enhancement with ARIA!                         Accessibility Summit — 30 September 2010




Building better
                                      CSS can enhance usability through
                                      visual clues...
                                      but it can also reduce accessibility
                                      if misused.


               CSS

        (x)HTML

  Text & HTTP



                                                                                                       13
Progressive Enhancement with ARIA!                        Accessibility Summit — 30 September 2010




Building better
                                      JavaScript can be used to build
                                      more intuitive interfaces...


      JavaScript

               CSS

        (x)HTML

  Text & HTTP



                                                                                                      14
Progressive Enhancement with ARIA!                        Accessibility Summit — 30 September 2010




Building better
                                      JavaScript can be used to build
                                      more intuitive interfaces...
                                      but it cannot be relied on 100% of
                                      the time.
      JavaScript

               CSS

        (x)HTML

  Text & HTTP



                                                                                                      14
Progressive Enhancement with ARIA!                          Accessibility Summit — 30 September 2010




Building better
                                      WAI-ARIA extends the semantics
                                      of the document to provide
             ARIA                     additional insight into the state of
                                      the interface and how to interact
      JavaScript                      with it.

               CSS

        (x)HTML

  Text & HTTP



                                                                                                        15
Progressive Enhancement with ARIA!                                     Accessibility Summit — 30 September 2010




Progressive Enhancement

             ARIA



                                      User Experience
      JavaScript

               CSS
                                                  BASIC                                      ADVANCED

                                                          Browser Capabilities
        (x)HTML

  Text & HTTP



                                                                                                                   16
WAI-ARIA is a new(ish) tool




photo by Saffanna                                 17
Semantics+


             18
Map OS concepts to the web

photo by steve-uk                                19
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




                                     HTML


                                                                                       20
Progressive Enhancement with ARIA!       Accessibility Summit — 30 September 2010




                http://tinyurl.com/cwyvny
              http://habilis.net/validator-sac/




                                                                                    20
Call attention to important pieces
photo by Verity Cridland                21
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Structural Roles




                                                                                 22
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles

                                      role="banner"




                                                                                         23
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="main"




                                                                                         24
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="article"




                                                                                         25
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="complementary"




                                                                                         26
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="list"




                                                                                         27
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles


                                      role="list"




                                                                                         28
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="list"




                                                                                         29
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles



                                      role="list"




                                                                                         30
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles


                                      role="listitem"




                                                                                         31
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles

                                      role="form"




                                                                                         32
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="article"




                                                                                         33
Progressive Enhancement with ARIA!           Accessibility Summit — 30 September 2010




Structural Roles




                                      role="contentinfo"




                                                                                         34
Progressive Enhancement with ARIA!                   Accessibility Summit — 30 September 2010




Structural Roles
Document Structure
article                                heading       presentation
columnheader                           img           region
definition                             list          row
directory                              listitem      rowheader
document                               math          separator
group                                  note

Landmarks
application                            contentinfo   navigation
banner                                 form          search
complementary                          main




                                                                                                  35
Explain what something is
                          & how it works




photo by DavePress                               36
Progressive Enhancement with ARIA!              Accessibility Summit — 30 September 2010




Widget Roles
<span role="button">OK</span>
(of course <button>OK</button> would be better)




                                                                                             37
Progressive Enhancement with ARIA!              Accessibility Summit — 30 September 2010




Widget Roles
<span role="button">OK</span>
(of course <button>OK</button> would be better)

<div role="alert">
  <p>Something went wrong.</p>
</div>




                                                                                             37
Progressive Enhancement with ARIA!              Accessibility Summit — 30 September 2010




Widget Roles
<span role="button">OK</span>
(of course <button>OK</button> would be better)

<div role="alert">
  <p>Something went wrong.</p>
</div>

<div role="alertdialog">
  <p>Something went wrong.</p>
  <img src="x.png" alt="dismiss"
       role="button" />
</div>




                                                                                             37
Progressive Enhancement with ARIA!                        Accessibility Summit — 30 September 2010




Widget Roles
alert                                  marquee            slider
alertdialog                            menuitem           spinbutton
button                                 menuitemcheckbox   status
checkbox                               menuitemradio      tab
combobox                               option             tabpanel
dialog                                 progressbar        textbox
gridcell                               radio              timer
link                                   radiogroup         tooltip
log                                    scrollbar          treeitem

Widget Container Roles
grid                                   menubar            tree
listbox                                tablist            treegrid
menu                                   toolbar




                                                                                                       38
Progressive Enhancement with ARIA!                Accessibility Summit — 30 September 2010




Widget Properties
aria-activedescendant                  aria-multiline
aria-atomic                            aria-multiselectable
aria-autocomplete                      aria-orientation
aria-controls                          aria-owns
aria-describedby                       aria-posinset
aria-dropeffect                        aria-readonly
aria-flowto                            aria-relevant
aria-haspopup                          aria-required
aria-label                             aria-setsize
aria-labelledby                        aria-sort
aria-level                             aria-valuemax
aria-live                              aria-valuemin




                                                                                               39
Indicate what’s going on




photo by exfordy                              40
Progressive Enhancement with ARIA!                  Accessibility Summit — 30 September 2010




Widget States

                                      B       B
                                      (off)   (on)




                                                                                                41
Progressive Enhancement with ARIA!                  Accessibility Summit — 30 September 2010




Widget States

                                      B       B
                                      (off)   (on)



<button>
  <img src="bold-off.png" alt="bold" />
</button>


<button>
  <img src="bold-on.png" alt="bold" />
</button>


                                                                                                41
Progressive Enhancement with ARIA!                  Accessibility Summit — 30 September 2010




Widget States

                                      B       B
                                      (off)   (on)



<button>
  <img src="bold-off.png" alt="not bold" />
</button>


<button>
  <img src="bold-on.png" alt="bold" />
</button>


                                                                                                41
Progressive Enhancement with ARIA!                  Accessibility Summit — 30 September 2010




Widget States

                                      B       B
                                      (off)   (on)



<button role="button" aria-pressed="false">
  <img src="bold-off.png" alt="not bold" />
</button>


<button role="button" aria-pressed="true">
  <img src="bold-on.png" alt="bold" />
</button>


                                                                                                41
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Complex Widgets




                                                                                 42
Progressive Enhancement with ARIA!                        Accessibility Summit — 30 September 2010




Complex Widgets

                                      role="application"




                                                                                                      42
Progressive Enhancement with ARIA!                             Accessibility Summit — 30 September 2010




Complex Widgets




                                      role="slider"
                                      aria-labelledby="label_handle_valueA"
                                      aria-valuemin="0"
                                      aria-valuemax="71"
                                      aria-valuenow="22"
                                      aria-valuetext="Apr 04"
                                                                                                           42
Progressive Enhancement with ARIA!                         Accessibility Summit — 30 September 2010




Complex Widgets




                                      role="presentation"




                                                                                                       42
Progressive Enhancement with ARIA!                 Accessibility Summit — 30 September 2010




Widget States
aria-busy
aria-checked
aria-disabled
aria-expanded
aria-grabbed
aria-hidden
aria-invalid
aria-pressed
aria-selected
aria-valuenow (the W3C defines this as a “property”)
aria-valuetext (ditto)




                                                                                                 43
Highlight “living” content
photo by kevin1024                                44
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Live Regions




                                                                                 45
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Live Regions



<span id="chars_left_notice" class="numeric">
  <strong id="status-field-char-counter"
          class="char-counter">140</strong>
</span>




                                                                                 46
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Live Regions



<span id="chars_left_notice" class="numeric"
      aria-live="polite">
  <strong id="status-field-char-counter"
          class="char-counter">140</strong>
</span>




                                                                                 47
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Live Regions



<span id="chars_left_notice" class="numeric"
      aria-live="polite">
  <strong id="status-field-char-counter"
          class="char-counter">140</strong>
  characters left
</span>




                                                                                 48
Progressive Enhancement with ARIA!                 Accessibility Summit — 30 September 2010




Notification Options
off
change not announced

polite
change announced after user completes her current activity

assertive
user agent should interrupt the user’s activity, but not immediately




                                                                                                49
Manage focus with slight-of-hand




photo by cfpg                      50
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




tabindex helps manage focus
<div tabindex="0">
  <p>This <code>div</code> can now receive focus
using a keyboard’s <kbd>tab</kbd> key. How cool
is that?</p>
</div>
<div tabindex="-1">
  <p>This <code>div</code> won’t be focused by a
user via the <kbd>tab</kbd> key, but JavaScript
can <code>focus()</code> it. Nifty, huh?</p>
</div>




                                                                                 51
Piecing it all together
photo by Richard Jones                             52
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Let’s Build a Tabbed Interface




                                                                                 53
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




Traditional approach
<h1>Pumpkin Pie</h1>
<div class="container">
  <div class="section">
    <h2>Overview</h2>
    <img src="pie.jpg" alt="">
    <p>Whether you're hosting a festive party or a casual
    get-together with friends, our Pumpkin Pie will make
    entertaining easy!</p>
    ...
  </div>
  ...
  <ul class="tabs">
    <li><a href="#">Overview</a></li>
    <li><a href="#">Ingredients</a></li>
    <li><a href="#">Directions</a></li>
    <li><a href="#">Nutrition</a></li>
  </ul>
</div>
                                                                                         54
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Static HTML with no style




                                                                                 55
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




A little typography




                                                                                 56
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Typography and color




                                                                                 57
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Taking another look




                                                                                 58
Progressive Enhancement with ARIA!             Accessibility Summit — 30 September 2010




Taking another look




                                      .tabbed
                                                                                           58
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




Required source
<h1>Pumpkin Pie</h1>
<div class="tabbed">
  <h2>Overview</h2>
  <img src="pie.jpg" alt="" />
  <p>Whether you're hosting a festive party or a casual
  get-together with friends, our Pumpkin Pie will make
  entertaining easy!</p>
  ...
  <h2>Ingredients</h2>
  <ul>
    <li>1 (9<abbr title="inch">in</abbr>) unbaked deep
        dish pie crust</li>
    <li>½ cup white sugar</li>
    ...
  </ul>
  <h2>Directions</h2>
  ...
</div>
                                                                                         59
Progressive Enhancement with ARIA!                     Accessibility Summit — 30 September 2010




Understanding the flow



                  Split the
               content & make               Page
                 some tabs




                                            JS?
                                      Yes          No




                                                                                                   60
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Mouse-based interaction




                                                                                 61
Progressive Enhancement with ARIA!                           Accessibility Summit — 30 September 2010




Assigning ARIA Roles




                               role="application"
                               aria-activedescendant="folder-1"


                                                                                                         62
Progressive Enhancement with ARIA!                    Accessibility Summit — 30 September 2010




Assigning ARIA Roles
                                      role="tablist"




                                                                                                  63
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Assigning ARIA Roles
      role="tab"
      aria-selected="true"
      aria-controls="folder-1"




                                                                                 64
Progressive Enhancement with ARIA!                         Accessibility Summit — 30 September 2010




Assigning ARIA Roles
                                      role="tab"
                                      aria-selected="false"
                                      aria-controls="folder-4"




                                                                                                       65
Progressive Enhancement with ARIA!                               Accessibility Summit — 30 September 2010




Assigning ARIA Roles




                                 role="tabpanel"
                                 aria-hidden="false"
                                 aria-labelledby="folder-1-tab"
                                                                                                             66
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




Updating states and properties
tab.onclick                  = swap;

// ...

function swap( e ){
  // ...
  old_tab.setAttribute( 'aria-selected', 'false' );
  // ...
  tab.setAttribute( 'aria-selected', 'true' );
  // ...
  old_folder.setAttribute( 'aria-hidden', 'true' );
  // ...
  new_folder.setAttribute( 'aria-hidden', 'false' );
  // ...
  _cabinet.setAttribute( 'aria-activedescendant', _active );
}



                                                                                         67
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Enabling the keyboard
tab.onclick   = swap;
tab.onkeydown = moveFocus;
tab.onfocus   = swap;




                                                                                  68
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Enabling the keyboard




                                                                                 69
Progressive Enhancement with ARIA!                   Accessibility Summit — 30 September 2010




Enabling the keyboard
                                      tabindex="-1"




                                                                                                 69
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Enabling the keyboard
                   tabindex="0"




                                                                                 69
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Enabling the keyboard
function moveFocus( e ) {
  e = ( e ) ? e : event;
  var tab = e.target || e.srcElement,
      key = e.keyCode || e.charCode,
      pass = true;
      tab = getTab( tab );

    // keyboard handling goes here

    if ( ! pass )
    {
      return cancel( e );
    }
}




                                                                                    70
Progressive Enhancement with ARIA!             Accessibility Summit — 30 September 2010




Enabling the keyboard
function getTab( tab )
{
  while ( tab.nodeName.toLowerCase() != 'li' )
  {
    tab = tab.parentNode;
  }
  return tab;
}




                                                                                            71
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




Enabling the keyboard
function moveFocus( e ) {
  // ...
  switch ( key ) {
    case 37: // left arrow
    case 38: // up arrow
      move( tab, 'previous', false );
      pass = false;
      break;
    // down (39), right (40), home (36), end (35)
    // should be added here
    case 27: // escape
      tab.blur();
      pass = false;
      break;
  }
  // ...
}


                                                                                         72
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




Enabling the keyboard
function move( tab, direction, complete ) {
  if ( complete ) {
    if ( direction == 'previous' ) {
      tab.parentNode.childNodes[0].focus();
    } else {
      tab.parentNode
         .childNodes[tab.parentNode
                        .childNodes.length-1].focus();
    }
  } else {
    var target = direction == 'previous' ? tab.previousSibling
                                         : tab.nextSibling;
    if ( target ) {
      target.focus();
    }
  }
}


                                                                                         73
Progressive Enhancement with ARIA!          Accessibility Summit — 30 September 2010




Enabling the keyboard
function swap( e ){
  // ...
  old_tab.setAttribute( 'aria-selected', 'false' );
  old_tab.setAttribute( 'tabindex', '-1' );
  // ...
  tab.setAttribute( 'aria-selected', 'true' );
  tab.setAttribute( 'tabindex', '0' );
  // ...
  old_folder.setAttribute( 'aria-hidden', 'true' );
  old_folder.setAttribute( 'tabindex', '-1' );
  // ...
  new_folder.setAttribute( 'aria-hidden', 'false' );
  new_folder.setAttribute( 'tabindex', '0' );
  // ...
}




                                                                                         74
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




The Fruit (Pie) of Our Labor




                                                                                 75
Progressive Enhancement with ARIA!   Accessibility Summit — 30 September 2010




Who is Supporting WAI-ARIA?




                                                                                 76
Progressive Enhancement with ARIA!                          Accessibility Summit — 30 September 2010




For More
WAI-ARIA Spec
w3.org/TR/wai-aria/


WAI-ARIA Support in Browsers
paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html


TabInterface
easy-designs.github.com/tabinterface.js/




                                                                                                          77
Progressive
Enhancement
 with ARIA
   Aaron Gustafson
Progressive Enhancement with ARIA!                                                     Accessibility Summit — 30 September 2010




                                       Slides available at
                            http://slideshare.net/AaronGustafson

                           This presentation is licensed under
                                   Creative Commons
                      Attribution-Noncommercial-Share Alike 3.0

                                           flickr Photo Credits
                                            “ferris wheel? not yet...” by drcorneilus
                                                “Hunter Museum” by TimothyJ
                                      “No, I don't need any help - I'm…” by Ed Yourdon
                                              “The almighty mouse” by lastquest
                                        “wii browser - zoomed in” by placenamehere
                                                  “Legospective” by Guillermо
                                  “I love my toolbox 15 July Scavenger Hunt” by Saffanna
                                            “Dual Samsung Monitors” by steve-uk
                                 “Keystone of the Monumental Arch,…” by Verity Cridland
                                                      “Lego” by DavePress
                                               “iFlickr touch screen” by exfordy
                                                  “Green Plant” by kevin1024
                                                         “Cartas” by cfpg
                                          “Lego Millenium Falcon” by Richard Jones




                                                                                                                                  79

More Related Content

Similar to Progressive Enhancement with ARIA [Accessibility Summit 2010]

Orange Partner HTML5 Day
Orange Partner HTML5 DayOrange Partner HTML5 Day
Orange Partner HTML5 Day
servicesmobiles.fr
 
Experience Ajax - Workshop For Designers
Experience Ajax - Workshop For DesignersExperience Ajax - Workshop For Designers
Experience Ajax - Workshop For Designers
shank
 
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
Beat Signer
 
Introduzione Gruppo Presentazioni
Introduzione Gruppo PresentazioniIntroduzione Gruppo Presentazioni
Introduzione Gruppo Presentazioni
VMEngine
 
When to use Ajax
When to use AjaxWhen to use Ajax
When to use Ajax
mikepadilla
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!
Andrew Ronksley
 
Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...
Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...
Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...
Dion Hinchcliffe
 
Dmeeker Finala
Dmeeker FinalaDmeeker Finala
Dmeeker Finala
rajivmordani
 
Getting design right with HTML prototypes for Clarks
Getting design right with HTML prototypes for ClarksGetting design right with HTML prototypes for Clarks
Getting design right with HTML prototypes for Clarks
Jonathan Brace
 
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Aaron Gustafson
 
Silverlight 3.0
Silverlight 3.0Silverlight 3.0
Silverlight 3.0
Rishu Mehra
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Design
paultrani
 
Beyond HTML Exploring Advanced Techniques in Website Development.pdf
Beyond HTML Exploring Advanced Techniques in Website Development.pdfBeyond HTML Exploring Advanced Techniques in Website Development.pdf
Beyond HTML Exploring Advanced Techniques in Website Development.pdf
BitCot
 
Composite C1 Presentaion
Composite C1  PresentaionComposite C1  Presentaion
Composite C1 Presentaion
jakobbartholdy
 
Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs
mentoresd
 
利用AWS打造一站式旅遊服務平台
利用AWS打造一站式旅遊服務平台利用AWS打造一站式旅遊服務平台
利用AWS打造一站式旅遊服務平台
Amazon Web Services
 
Intel AppUp Day Bologna
Intel AppUp Day BolognaIntel AppUp Day Bologna
Intel AppUp Day Bologna
Andrea Balducci
 
Web Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkWeb Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap Framework
AndiNurkholis1
 
agile microservices @scaibo
agile microservices @scaiboagile microservices @scaibo
agile microservices @scaibo
Ciro Donato Caiazzo
 

Similar to Progressive Enhancement with ARIA [Accessibility Summit 2010] (20)

Orange Partner HTML5 Day
Orange Partner HTML5 DayOrange Partner HTML5 Day
Orange Partner HTML5 Day
 
Experience Ajax - Workshop For Designers
Experience Ajax - Workshop For DesignersExperience Ajax - Workshop For Designers
Experience Ajax - Workshop For Designers
 
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
HTML5 and the Open Web Platform - Web Technologies (1019888BNR)
 
Introduzione Gruppo Presentazioni
Introduzione Gruppo PresentazioniIntroduzione Gruppo Presentazioni
Introduzione Gruppo Presentazioni
 
When to use Ajax
When to use AjaxWhen to use Ajax
When to use Ajax
 
Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!Web Accessibility - We're All In This Together!
Web Accessibility - We're All In This Together!
 
Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...
Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...
Immersive Experiences: The Next Generation of End-user Computing: Big Idea by...
 
Dmeeker Finala
Dmeeker FinalaDmeeker Finala
Dmeeker Finala
 
Getting design right with HTML prototypes for Clarks
Getting design right with HTML prototypes for ClarksGetting design right with HTML prototypes for Clarks
Getting design right with HTML prototypes for Clarks
 
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
 
Silverlight 3.0
Silverlight 3.0Silverlight 3.0
Silverlight 3.0
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Design
 
Beyond HTML Exploring Advanced Techniques in Website Development.pdf
Beyond HTML Exploring Advanced Techniques in Website Development.pdfBeyond HTML Exploring Advanced Techniques in Website Development.pdf
Beyond HTML Exploring Advanced Techniques in Website Development.pdf
 
Composite C1 Presentaion
Composite C1  PresentaionComposite C1  Presentaion
Composite C1 Presentaion
 
Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs Developing the Next Generation Embedded HMIs
Developing the Next Generation Embedded HMIs
 
利用AWS打造一站式旅遊服務平台
利用AWS打造一站式旅遊服務平台利用AWS打造一站式旅遊服務平台
利用AWS打造一站式旅遊服務平台
 
Intel AppUp Day Bologna
Intel AppUp Day BolognaIntel AppUp Day Bologna
Intel AppUp Day Bologna
 
Web Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkWeb Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap Framework
 
agile microservices @scaibo
agile microservices @scaiboagile microservices @scaibo
agile microservices @scaibo
 

More from Aaron Gustafson

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
Aaron Gustafson
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
Aaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
Aaron Gustafson
 

More from Aaron Gustafson (20)

Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]Delivering Critical Information and Services [JavaScript & Friends 2021]
Delivering Critical Information and Services [JavaScript & Friends 2021]
 
Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]Adapting to Reality [Guest Lecture, March 2021]
Adapting to Reality [Guest Lecture, March 2021]
 
Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]Designing the Conversation [Beyond Tellerrand 2019]
Designing the Conversation [Beyond Tellerrand 2019]
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
 
Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?Progressive Web Apps: Where Do I Begin?
Progressive Web Apps: Where Do I Begin?
 
Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]Media in the Age of PWAs [ImageCon 2019]
Media in the Age of PWAs [ImageCon 2019]
 
Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]Adapting to Reality [Starbucks Lunch & Learn]
Adapting to Reality [Starbucks Lunch & Learn]
 
Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]Conversational Semantics for the Web [CascadiaJS 2018]
Conversational Semantics for the Web [CascadiaJS 2018]
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]PWA: Where Do I Begin? [Microsoft Ignite 2018]
PWA: Where Do I Begin? [Microsoft Ignite 2018]
 
Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]Designing the Conversation [Concatenate 2018]
Designing the Conversation [Concatenate 2018]
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
The Web Should Just Work for Everyone
The Web Should Just Work for EveryoneThe Web Should Just Work for Everyone
The Web Should Just Work for Everyone
 
Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]Performance as User Experience [AEA SEA 2018]
Performance as User Experience [AEA SEA 2018]
 
Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]Performance as User Experience [An Event Apart Denver 2017]
Performance as User Experience [An Event Apart Denver 2017]
 
Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2Advanced Design Methods 1, Day 2
Advanced Design Methods 1, Day 2
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]Exploring Adaptive Interfaces [Generate 2017]
Exploring Adaptive Interfaces [Generate 2017]
 

Recently uploaded

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
Neo4j
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
LizaNolte
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
ScyllaDB
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
Pablo Gómez Abajo
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
UiPathCommunity
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
DianaGray10
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
christinelarrosa
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving
 

Recently uploaded (20)

GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge GraphGraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
GraphRAG for LifeSciences Hands-On with the Clinical Knowledge Graph
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham HillinQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
inQuba Webinar Mastering Customer Journey Management with Dr Graham Hill
 
A Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's ArchitectureA Deep Dive into ScyllaDB's Architecture
A Deep Dive into ScyllaDB's Architecture
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Mutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented ChatbotsMutation Testing for Task-Oriented Chatbots
Mutation Testing for Task-Oriented Chatbots
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
Session 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdfSession 1 - Intro to Robotic Process Automation.pdf
Session 1 - Intro to Robotic Process Automation.pdf
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
What is an RPA CoE? Session 1 – CoE Vision
What is an RPA CoE?  Session 1 – CoE VisionWhat is an RPA CoE?  Session 1 – CoE Vision
What is an RPA CoE? Session 1 – CoE Vision
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 
Christine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptxChristine's Product Research Presentation.pptx
Christine's Product Research Presentation.pptx
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance PanelsNorthern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
Northern Engraving | Modern Metal Trim, Nameplates and Appliance Panels
 

Progressive Enhancement with ARIA [Accessibility Summit 2010]

  • 2. We are creating richer online experiences 2
  • 3. 3
  • 4. ...and the barriers which prohibit them. photo by drcorneilus 4
  • 6. Google is a voracious consumer of the web. And it’s blind. photo by Ed Yourdon 6
  • 7. But accessibility isn’t only about supporting screen readers. 7
  • 8. What if you can’t use a mouse? photo by lastquest 8
  • 9. What if you don’t see a change? photo by placenamehere 9
  • 10. We can and must build better. photo by Guillermo 10
  • 11. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better Every great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol. Text & HTTP 11
  • 12. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better Semantics (markup) convey the underlying meaning of the content... (x)HTML Text & HTTP 12
  • 13. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured. (x)HTML Text & HTTP 12
  • 14. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better CSS can enhance usability through visual clues... CSS (x)HTML Text & HTTP 13
  • 15. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better CSS can enhance usability through visual clues... but it can also reduce accessibility if misused. CSS (x)HTML Text & HTTP 13
  • 16. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better JavaScript can be used to build more intuitive interfaces... JavaScript CSS (x)HTML Text & HTTP 14
  • 17. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better JavaScript can be used to build more intuitive interfaces... but it cannot be relied on 100% of the time. JavaScript CSS (x)HTML Text & HTTP 14
  • 18. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Building better WAI-ARIA extends the semantics of the document to provide ARIA additional insight into the state of the interface and how to interact JavaScript with it. CSS (x)HTML Text & HTTP 15
  • 19. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Progressive Enhancement ARIA User Experience JavaScript CSS BASIC ADVANCED Browser Capabilities (x)HTML Text & HTTP 16
  • 20. WAI-ARIA is a new(ish) tool photo by Saffanna 17
  • 22. Map OS concepts to the web photo by steve-uk 19
  • 23. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 HTML 20
  • 24. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/ 20
  • 25. Call attention to important pieces photo by Verity Cridland 21
  • 26. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles 22
  • 27. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="banner" 23
  • 28. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="main" 24
  • 29. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="article" 25
  • 30. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="complementary" 26
  • 31. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="list" 27
  • 32. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="list" 28
  • 33. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="list" 29
  • 34. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="list" 30
  • 35. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="listitem" 31
  • 36. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="form" 32
  • 37. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="article" 33
  • 38. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles role="contentinfo" 34
  • 39. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Structural Roles Document Structure article heading presentation columnheader img region definition list row directory listitem rowheader document math separator group note Landmarks application contentinfo navigation banner form search complementary main 35
  • 40. Explain what something is & how it works photo by DavePress 36
  • 41. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget Roles <span role="button">OK</span> (of course <button>OK</button> would be better) 37
  • 42. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget Roles <span role="button">OK</span> (of course <button>OK</button> would be better) <div role="alert"> <p>Something went wrong.</p> </div> 37
  • 43. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget Roles <span role="button">OK</span> (of course <button>OK</button> would be better) <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div> 37
  • 44. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget Roles alert marquee slider alertdialog menuitem spinbutton button menuitemcheckbox status checkbox menuitemradio tab combobox option tabpanel dialog progressbar textbox gridcell radio timer link radiogroup tooltip log scrollbar treeitem Widget Container Roles grid menubar tree listbox tablist treegrid menu toolbar 38
  • 45. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget Properties aria-activedescendant aria-multiline aria-atomic aria-multiselectable aria-autocomplete aria-orientation aria-controls aria-owns aria-describedby aria-posinset aria-dropeffect aria-readonly aria-flowto aria-relevant aria-haspopup aria-required aria-label aria-setsize aria-labelledby aria-sort aria-level aria-valuemax aria-live aria-valuemin 39
  • 46. Indicate what’s going on photo by exfordy 40
  • 47. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget States B B (off) (on) 41
  • 48. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget States B B (off) (on) <button> <img src="bold-off.png" alt="bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button> 41
  • 49. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget States B B (off) (on) <button> <img src="bold-off.png" alt="not bold" /> </button> <button> <img src="bold-on.png" alt="bold" /> </button> 41
  • 50. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget States B B (off) (on) <button role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /> </button> <button role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /> </button> 41
  • 51. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Complex Widgets 42
  • 52. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Complex Widgets role="application" 42
  • 53. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Complex Widgets role="slider" aria-labelledby="label_handle_valueA" aria-valuemin="0" aria-valuemax="71" aria-valuenow="22" aria-valuetext="Apr 04" 42
  • 54. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Complex Widgets role="presentation" 42
  • 55. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Widget States aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow (the W3C defines this as a “property”) aria-valuetext (ditto) 43
  • 57. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Live Regions 45
  • 58. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Live Regions <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span> 46
  • 59. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Live Regions <span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span> 47
  • 60. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Live Regions <span id="chars_left_notice" class="numeric" aria-live="polite"> <strong id="status-field-char-counter" class="char-counter">140</strong> characters left </span> 48
  • 61. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Notification Options off change not announced polite change announced after user completes her current activity assertive user agent should interrupt the user’s activity, but not immediately 49
  • 62. Manage focus with slight-of-hand photo by cfpg 50
  • 63. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 tabindex helps manage focus <div tabindex="0"> <p>This <code>div</code> can now receive focus using a keyboard’s <kbd>tab</kbd> key. How cool is that?</p> </div> <div tabindex="-1"> <p>This <code>div</code> won’t be focused by a user via the <kbd>tab</kbd> key, but JavaScript can <code>focus()</code> it. Nifty, huh?</p> </div> 51
  • 64. Piecing it all together photo by Richard Jones 52
  • 65. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Let’s Build a Tabbed Interface 53
  • 66. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Traditional approach <h1>Pumpkin Pie</h1> <div class="container"> <div class="section"> <h2>Overview</h2> <img src="pie.jpg" alt=""> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... </div> ... <ul class="tabs"> <li><a href="#">Overview</a></li> <li><a href="#">Ingredients</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Nutrition</a></li> </ul> </div> 54
  • 67. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Static HTML with no style 55
  • 68. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 A little typography 56
  • 69. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Typography and color 57
  • 70. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Taking another look 58
  • 71. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Taking another look .tabbed 58
  • 72. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Required source <h1>Pumpkin Pie</h1> <div class="tabbed"> <h2>Overview</h2> <img src="pie.jpg" alt="" /> <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p> ... <h2>Ingredients</h2> <ul> <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li> <li>½ cup white sugar</li> ... </ul> <h2>Directions</h2> ... </div> 59
  • 73. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Understanding the flow Split the content & make Page some tabs JS? Yes No 60
  • 74. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Mouse-based interaction 61
  • 75. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Assigning ARIA Roles role="application" aria-activedescendant="folder-1" 62
  • 76. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Assigning ARIA Roles role="tablist" 63
  • 77. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Assigning ARIA Roles role="tab" aria-selected="true" aria-controls="folder-1" 64
  • 78. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Assigning ARIA Roles role="tab" aria-selected="false" aria-controls="folder-4" 65
  • 79. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Assigning ARIA Roles role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" 66
  • 80. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Updating states and properties tab.onclick = swap; // ... function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); // ... tab.setAttribute( 'aria-selected', 'true' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); // ... _cabinet.setAttribute( 'aria-activedescendant', _active ); } 67
  • 81. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard tab.onclick = swap; tab.onkeydown = moveFocus; tab.onfocus = swap; 68
  • 82. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard 69
  • 83. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard tabindex="-1" 69
  • 84. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard tabindex="0" 69
  • 85. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard function moveFocus( e ) { e = ( e ) ? e : event; var tab = e.target || e.srcElement, key = e.keyCode || e.charCode, pass = true; tab = getTab( tab ); // keyboard handling goes here if ( ! pass ) { return cancel( e ); } } 70
  • 86. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard function getTab( tab ) { while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab; } 71
  • 87. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard function moveFocus( e ) { // ... switch ( key ) { case 37: // left arrow case 38: // up arrow move( tab, 'previous', false ); pass = false; break; // down (39), right (40), home (36), end (35) // should be added here case 27: // escape tab.blur(); pass = false; break; } // ... } 72
  • 88. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard function move( tab, direction, complete ) { if ( complete ) { if ( direction == 'previous' ) { tab.parentNode.childNodes[0].focus(); } else { tab.parentNode .childNodes[tab.parentNode .childNodes.length-1].focus(); } } else { var target = direction == 'previous' ? tab.previousSibling : tab.nextSibling; if ( target ) { target.focus(); } } } 73
  • 89. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Enabling the keyboard function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); old_tab.setAttribute( 'tabindex', '-1' ); // ... tab.setAttribute( 'aria-selected', 'true' ); tab.setAttribute( 'tabindex', '0' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); old_folder.setAttribute( 'tabindex', '-1' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); new_folder.setAttribute( 'tabindex', '0' ); // ... } 74
  • 90. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 The Fruit (Pie) of Our Labor 75
  • 91. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Who is Supporting WAI-ARIA? 76
  • 92. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 For More WAI-ARIA Spec w3.org/TR/wai-aria/ WAI-ARIA Support in Browsers paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html TabInterface easy-designs.github.com/tabinterface.js/ 77
  • 94. Progressive Enhancement with ARIA! Accessibility Summit — 30 September 2010 Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “ferris wheel? not yet...” by drcorneilus “Hunter Museum” by TimothyJ “No, I don't need any help - I'm…” by Ed Yourdon “The almighty mouse” by lastquest “wii browser - zoomed in” by placenamehere “Legospective” by Guillermо “I love my toolbox 15 July Scavenger Hunt” by Saffanna “Dual Samsung Monitors” by steve-uk “Keystone of the Monumental Arch,…” by Verity Cridland “Lego” by DavePress “iFlickr touch screen” by exfordy “Green Plant” by kevin1024 “Cartas” by cfpg “Lego Millenium Falcon” by Richard Jones 79