SlideShare une entreprise Scribd logo
1  sur  89
Télécharger pour lire hors ligne
Progressive
Enhancement
 with ARIA
   Aaron Gustafson
We are creating
 richer online
 experiences
Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]
...and the barriers
which prohibit them.
                       photo by drcorneilus
Accessibility is crucial




       Aaron Gustafson




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




                             photo by Ed Yourdon
But accessibility
isn’t only about
   supporting
 screen readers.
What if you can’t use a mouse?




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




                                photo by Guillermo
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




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




  Text & HTTP
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




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



        (x)HTML

  Text & HTTP
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




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


               CSS

        (x)HTML

  Text & HTTP
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA!                      ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA!                                ThinkVitamin Presents... HTML & CSS — August 2010




Progressive Enhancement

             ARIA



                                      User Experience
      JavaScript

               CSS
                                                  BASIC                                          ADVANCED

                                                          Browser Capabilities
        (x)HTML

  Text & HTTP
WAI-ARIA is a new(ish) tool




                              photo by Saffanna
Semantics+
Map OS concepts to the web

                             photo by steve-uk
Progressive Enhancement with ARIA!          ThinkVitamin Presents... HTML & CSS — August 2010




                                     HTML
Progressive Enhancement with ARIA!          ThinkVitamin Presents... HTML & CSS — August 2010




                                     HTML
Progressive Enhancement with ARIA!    ThinkVitamin Presents... HTML & CSS — August 2010




                http://tinyurl.com/cwyvny
              http://habilis.net/validator-sac/
Call attention to important pieces
                               photo by Verity Cridland
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles
                                      role="banner"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="main"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles
                                      role="navigation"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="article"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="complementary"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="list"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="listitem"
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="form"
Progressive Enhancement with ARIA!        ThinkVitamin Presents... HTML & CSS — August 2010




Structural Roles




                                      role="contentinfo"
Progressive Enhancement with ARIA!                 ThinkVitamin Presents... HTML & CSS — August 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
Explain what something is
     & how it works




                            photo by DavePress
Progressive Enhancement with ARIA!              ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!                      ThinkVitamin Presents... HTML & CSS — August 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
Progressive Enhancement with ARIA!            ThinkVitamin Presents... HTML & CSS — August 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
Indicate what’s going on




                           photo by exfordy
Progressive Enhancement with ARIA!                  ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!                  ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!                  ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Complex Widgets
Progressive Enhancement with ARIA!                        ThinkVitamin Presents... HTML & CSS — August 2010




Complex Widgets

                                      role="application"
Progressive Enhancement with ARIA!                         ThinkVitamin Presents... HTML & CSS — August 2010




Complex Widgets




                                      role="slider"
                                      aria-labelledby="label_handle_valueA"
                                      aria-valuemin="0"
                                      aria-valuemax="71"
                                      aria-valuenow="22"
                                      aria-valuetext="Apr 04"
Progressive Enhancement with ARIA!                         ThinkVitamin Presents... HTML & CSS — August 2010




Complex Widgets




                                      role="presentation"
Progressive Enhancement with ARIA!                 ThinkVitamin Presents... HTML & CSS — August 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)
Highlight “living” content
                             photo by kevin1024
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Live Regions
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Live Regions
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Live Regions



<span id="chars_left_notice" class="numeric">
  <strong id="status-field-char-counter"
          class="char-counter">140</strong>
</span>
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!            ThinkVitamin Presents... HTML & CSS — August 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

rude
user agent should interrupt the user’s activity immediately
Manage focus with slight-of-hand




                              photo by cfpg
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 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>
Piecing it all together
                          photo by Richard Jones
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Let’s Build a Tabbed Interface
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Static HTML with no style
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




A little typography
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Typography and color
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Taking another look
Progressive Enhancement with ARIA!             ThinkVitamin Presents... HTML & CSS — August 2010




Taking another look




                                      .tabbed
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 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>
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Understanding the flow



                  Split the
               content & make               Page
                 some tabs




                                            JS?
                                      Yes          No
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Mouse-based interaction
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles
Progressive Enhancement with ARIA!                       ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles




                               role="application"
                               aria-activedescendant="folder-1"
Progressive Enhancement with ARIA!                        ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles




                                 role="tabpanel"
                                 aria-hidden="false"
                                 aria-labelledby="folder-1-tab"
Progressive Enhancement with ARIA!                    ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles
                                      role="tablist"
Progressive Enhancement with ARIA!                     ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles
                                      role="tab"
                                      aria-selected="false"
                                      aria-describedby="folder-4"
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Assigning ARIA Roles
      role="tab"
      aria-selected="true"
      aria-describedby="folder-1"
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 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 );
}
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
tab.onclick   = swap;
tab.onkeydown = moveFocus;
tab.onfocus   = swap;
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
Progressive Enhancement with ARIA!               ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
                                      tabindex="-1"
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
                   tabindex="0"
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 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 );
    }
}
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 2010




Enabling the keyboard
function getTab( tab )
{
  while ( tab.nodeName.toLowerCase() != 'li' )
  {
    tab = tab.parentNode;
  }
  return tab;
}
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 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;
  }
  // ...
}
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 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();
    }
  }
}
Progressive Enhancement with ARIA!      ThinkVitamin Presents... HTML & CSS — August 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' );
  // ...
}
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




The Fruit (Pie) of Our Labor
Progressive Enhancement with ARIA!   ThinkVitamin Presents... HTML & CSS — August 2010




Who is Supporting WAI-ARIA?
Progressive Enhancement with ARIA!                  ThinkVitamin Presents... HTML & CSS — August 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/
Progressive
Enhancement
 with ARIA
   Aaron Gustafson
Progressive Enhancement with ARIA!                                              ThinkVitamin Presents... HTML & CSS — August 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

Contenu connexe

Tendances

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
 
The Modern Java Web Developer - Denver JUG 2013
The Modern Java Web Developer - Denver JUG 2013The Modern Java Web Developer - Denver JUG 2013
The Modern Java Web Developer - Denver JUG 2013Matt Raible
 
Serverless Orchestration with AWS Step Functions
Serverless Orchestration with AWS Step FunctionsServerless Orchestration with AWS Step Functions
Serverless Orchestration with AWS Step FunctionsAmazon Web Services
 
Connect First, Ask Confluence Questions Later
Connect First, Ask Confluence Questions LaterConnect First, Ask Confluence Questions Later
Connect First, Ask Confluence Questions LaterAtlassian
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsJames Pearce
 
Pwa, separating the features from the solutions
Pwa, separating the features from the solutions Pwa, separating the features from the solutions
Pwa, separating the features from the solutions Sander Mangel
 
What is SharePoint Development??
What is SharePoint Development??What is SharePoint Development??
What is SharePoint Development??Mark Rackley
 
Creating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash PlatformCreating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash PlatformHemanth Sharma
 

Tendances (8)

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!
 
The Modern Java Web Developer - Denver JUG 2013
The Modern Java Web Developer - Denver JUG 2013The Modern Java Web Developer - Denver JUG 2013
The Modern Java Web Developer - Denver JUG 2013
 
Serverless Orchestration with AWS Step Functions
Serverless Orchestration with AWS Step FunctionsServerless Orchestration with AWS Step Functions
Serverless Orchestration with AWS Step Functions
 
Connect First, Ask Confluence Questions Later
Connect First, Ask Confluence Questions LaterConnect First, Ask Confluence Questions Later
Connect First, Ask Confluence Questions Later
 
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applicationsHTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
 
Pwa, separating the features from the solutions
Pwa, separating the features from the solutions Pwa, separating the features from the solutions
Pwa, separating the features from the solutions
 
What is SharePoint Development??
What is SharePoint Development??What is SharePoint Development??
What is SharePoint Development??
 
Creating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash PlatformCreating Multiscreen Apps using Adobe Flash Platform
Creating Multiscreen Apps using Adobe Flash Platform
 

Similaire à Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

Progressive Enhancement with ARIA [Accessibility Summit 2010]
Progressive Enhancement with ARIA [Accessibility Summit 2010]Progressive Enhancement with ARIA [Accessibility Summit 2010]
Progressive Enhancement with ARIA [Accessibility Summit 2010]Aaron Gustafson
 
새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요NAVER Engineering
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものMicrosoft
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeNokiaAppForum
 
Prototyping interactions
Prototyping interactionsPrototyping interactions
Prototyping interactionsselwynjacob90
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshopJames Pearce
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...Patrick Lauke
 
Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Aaron Gustafson
 
Experience Ajax - Workshop For Designers
Experience Ajax - Workshop For DesignersExperience Ajax - Workshop For Designers
Experience Ajax - Workshop For Designersshank
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web appsJames Pearce
 
Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Aaron Gustafson
 
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...Kahena Digital Marketing
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Aaron Gustafson
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An OverviewNagendra Um
 

Similaire à Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference] (20)

What is HTML5
What is HTML5What is HTML5
What is HTML5
 
Progressive Enhancement with ARIA [Accessibility Summit 2010]
Progressive Enhancement with ARIA [Accessibility Summit 2010]Progressive Enhancement with ARIA [Accessibility Summit 2010]
Progressive Enhancement with ARIA [Accessibility Summit 2010]
 
새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요새로운 웹 스타일링, 안 본 사람 없게 해주세요
새로운 웹 스타일링, 안 본 사람 없게 해주세요
 
HTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすものHTML5がIE10/Windows 8にもたらすもの
HTML5がIE10/Windows 8にもたらすもの
 
Miha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web RuntimeMiha Lesjak Mobilizing The Web with Web Runtime
Miha Lesjak Mobilizing The Web with Web Runtime
 
Aside, within HTML5 + CSS
Aside, within HTML5 + CSSAside, within HTML5 + CSS
Aside, within HTML5 + CSS
 
Prototyping interactions
Prototyping interactionsPrototyping interactions
Prototyping interactions
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
WAI-ARIA - an introduction to accessible rich internet applications (1 day wo...
 
Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]Adaptive Web Design Workshop [inspire 2011]
Adaptive Web Design Workshop [inspire 2011]
 
Html5
Html5Html5
Html5
 
Experience Ajax - Workshop For Designers
Experience Ajax - Workshop For DesignersExperience Ajax - Workshop For Designers
Experience Ajax - Workshop For Designers
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
Building cross platform mobile web apps
Building cross platform mobile web appsBuilding cross platform mobile web apps
Building cross platform mobile web apps
 
Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]Adaptive Web Design Workshop [Iceweb 2011]
Adaptive Web Design Workshop [Iceweb 2011]
 
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
Advanced Technical SEO - Index Bloat & Discovery: from Facets to Javascript F...
 
Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]Adaptive Web Design Workshop [WebVisions NYC 2012]
Adaptive Web Design Workshop [WebVisions NYC 2012]
 
RIAs
RIAsRIAs
RIAs
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 

Plus de 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
 

Plus de 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]
 

Dernier

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Dernier (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

Progressive Enhancement with ARIA [Carsonified HTML & CSS Online Conference]

  • 2. We are creating richer online experiences
  • 4. ...and the barriers which prohibit them. photo by drcorneilus
  • 5. Accessibility is crucial Aaron Gustafson photo by TimothyJ
  • 6. Google is a voracious consumer of the web. And it’s blind. photo by Ed Yourdon
  • 7. But accessibility isn’t only about supporting screen readers.
  • 8. What if you can’t use a mouse? photo by lastquest
  • 9. What if you don’t see a change? photo by placenamehere
  • 10. We can and must build better. photo by Guillermo
  • 11. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Building better Every great experience on the web begins with two key things: clear, well-written prose and the HTTP protocol. Text & HTTP
  • 12. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Building better Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured. (x)HTML Text & HTTP
  • 13. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Building better CSS can enhance usability through visual clues... but it can also reduce accessibility if misused. CSS (x)HTML Text & HTTP
  • 14. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
  • 15. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
  • 16. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Progressive Enhancement ARIA User Experience JavaScript CSS BASIC ADVANCED Browser Capabilities (x)HTML Text & HTTP
  • 17. WAI-ARIA is a new(ish) tool photo by Saffanna
  • 19. Map OS concepts to the web photo by steve-uk
  • 20. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 HTML
  • 21. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 HTML
  • 22. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 http://tinyurl.com/cwyvny http://habilis.net/validator-sac/
  • 23. Call attention to important pieces photo by Verity Cridland
  • 24. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles
  • 25. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="banner"
  • 26. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="main"
  • 27. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="navigation"
  • 28. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="article"
  • 29. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="complementary"
  • 30. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="list"
  • 31. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="listitem"
  • 32. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles
  • 33. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="form"
  • 34. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Structural Roles role="contentinfo"
  • 35. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
  • 36. Explain what something is & how it works photo by DavePress
  • 37. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 38. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
  • 39. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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
  • 40. Indicate what’s going on photo by exfordy
  • 41. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 42. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 43. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 44. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets
  • 45. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="application"
  • 46. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="slider" aria-labelledby="label_handle_valueA" aria-valuemin="0" aria-valuemax="71" aria-valuenow="22" aria-valuetext="Apr 04"
  • 47. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Complex Widgets role="presentation"
  • 48. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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)
  • 49. Highlight “living” content photo by kevin1024
  • 50. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions
  • 51. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions
  • 52. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Live Regions <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  • 53. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 54. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 55. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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 rude user agent should interrupt the user’s activity immediately
  • 56. Manage focus with slight-of-hand photo by cfpg
  • 57. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 58. Piecing it all together photo by Richard Jones
  • 59. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Let’s Build a Tabbed Interface
  • 60. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 61. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Static HTML with no style
  • 62. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 A little typography
  • 63. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Typography and color
  • 64. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Taking another look
  • 65. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Taking another look .tabbed
  • 66. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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>
  • 67. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Understanding the flow Split the content & make Page some tabs JS? Yes No
  • 68. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Mouse-based interaction
  • 69. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles
  • 70. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="application" aria-activedescendant="folder-1"
  • 71. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab"
  • 72. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tablist"
  • 73. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tab" aria-selected="false" aria-describedby="folder-4"
  • 74. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Assigning ARIA Roles role="tab" aria-selected="true" aria-describedby="folder-1"
  • 75. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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 ); }
  • 76. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tab.onclick = swap; tab.onkeydown = moveFocus; tab.onfocus = swap;
  • 77. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard
  • 78. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tabindex="-1"
  • 79. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard tabindex="0"
  • 80. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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 ); } }
  • 81. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Enabling the keyboard function getTab( tab ) { while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab; }
  • 82. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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; } // ... }
  • 83. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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(); } } }
  • 84. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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' ); // ... }
  • 85. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 The Fruit (Pie) of Our Labor
  • 86. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 2010 Who is Supporting WAI-ARIA?
  • 87. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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/
  • 89. Progressive Enhancement with ARIA! ThinkVitamin Presents... HTML & CSS — August 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