SlideShare a Scribd company logo
1 of 94
Download to read offline
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]

Experience Ajax - Workshop For Designers
Experience Ajax - Workshop For DesignersExperience Ajax - Workshop For Designers
Experience Ajax - Workshop For Designersshank
 
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 PresentazioniVMEngine
 
When to use Ajax
When to use AjaxWhen to use Ajax
When to use Ajaxmikepadilla
 
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
 
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 ClarksJonathan 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
 
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 7Mediacurrent
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Designpaultrani
 
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.pdfBitCot
 
Composite C1 Presentaion
Composite C1  PresentaionComposite C1  Presentaion
Composite C1 Presentaionjakobbartholdy
 
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
 
Web Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkWeb Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkAndiNurkholis1
 

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 EveryoneAaron 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 2Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Advanced Design Methods 1, Day 1
Advanced Design Methods 1, Day 1Aaron 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

WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekCzechDreamin
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsUXDXConf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoUXDXConf
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 

Recently uploaded (20)

WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 

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