SlideShare a Scribd company logo
Hans Hillen (TPG)

               Steve Faulkner (TPG)




02 / 27 / 12                          Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   1
 www.paciellogroup.com/training/CSUN2012

 Examples: part 1
  http://www.html5accessibility.com/CSUN12/
If you can avoid using:
—   JavaScript
—   CSS
—   ARIA
—   HTML5

DO IT!
Now back to reality...
I am not an expert
I know some things about HTML5 and WAI-ARIA
I know some people who know some other things
about HTML5 and WAI-ARIA
I will hold up a virtual sign if you ask a question I cannot
answer
Consider it held up when you ask a question and I look
vague
Hans
 email
or tweet
There’s a clue in the name:
Accessible Rich Internet

 Applications
“This specification introduces features to
HTML and the DOM that ease the
authoring of Web-based   applications.”
ARIA is not so much about content



ARIA is about interaction
Much of ARIA only makes sense in
conjunction with scripting.


Much of ARIA is about making sense
of scripted interaction
ARIA Stuff that makes sense without
 scripting
—Landmark roles

—A few of the relationship attributes

—A few of the document structure roles
<div tabindex="0" role="button" act="20" class="T-I
  J-J5-Ji nu T-I-ax7 L3" style="-moz-user-select:
  none;" aria-label="Refresh" data-
  tooltip="Refresh">

<div class="asa"><span class="J-J5-Ji
  ask">&nbsp;</span>

<div class="asf T-I-J3 J-J5-Ji"></div>

</div>

</div>
ARIA can/could be used with any markup language.
— HTML

— XHTML

— SVG

— MATHML

— MXML

— XUL
Firebug accessibility implemented by Hans Hillen using ARIA
ARIA
       attributes

role           aria-*
abstract


           role



         Document
                     Landmark
widget   structure
                      ‘main’
         ‘heading’
command (abstract role)
   composite (abstract role)
   input (abstract role)
   landmark (abstract role)
   range (abstract role)
   roletype (abstract role)
   section (abstract role)
   sectionhead (abstract role)
   select (abstract role)
   structure (abstract role)
   widget (abstract role)
   window (abstract role)



Don’t use
widget


Simple          Composite
‘button’        ‘menubar’
                typically act as containers that
                manage other, contained
                widgets.
What do they do?
How do they do it?
What they don’t do
 (generally)
Override native html roles If you want the native semantic to
 be used Do not add a role!
  BAD
  <h1 role=“button”>heading text</h1>

  GOOD
  <h1>
  <span role=“button”>heading text</span>
  </h1>
Expose role information to accessibility APIs

role=“button”
UIA
                                                                  MAC
WAI-                     IAccessible2    Control
          MSAA role                                ATK role       Accessibi
ARIA role                role            Pattern
                                                                  lity Role
                                         Type
          ROLE_SYSTEM
                         IA2_ROLE_TOG              ATK_ROLE_PUS
button    _PUSHBUTTON
                         GLE_BUTTON
                                         Button
                                                   H_BUTTON
                                                                  AXButton
          .
HTML to Platform Accessibility APIs Implementation Guide
role=“button”



 “to activate press space bar”
  http://www.paciellogroup.com/blog/aria-tests/user-input-widgets.html
  demo
They are not magic!
They do not (generally) add ANY interaction
  behaviours.
Adding a role does not:

Make an element focusable

Provide keyboard events

Add properties
    Button example
The following roles are regions of the page
intended as navigational landmarks.


application              form html4
banner                   main
complementary html5      navigation html5
contentinfo              search


   demo
aria-*



   Widget        Live Region              Drag & Drop       Relationship
‘aria-checked’    ‘aria-live’            ‘ aria-dragged’   ‘aria-labelledby’
— Use of ARIA in HTML<5 is non conforming and
  probably always will be.
— It doesn’t make any difference

— Simple solution – use the HTML5 doctype




<!DOCTYPE html>
There are rules:
HTML5 – WAI-ARIA 3.2.7
You can use:

—validator.w3.org/nu/



But some of the rules are out of date
•   Browsers with ARIA support: rough guide
     – Firefox 3+
     – Internet Explorer 8+
     – Safari 5 (Mac/iOS)
     – Chrome 17

•   Assistive Technology:
     – JAWS 8 and up
     – WindowEyes 5.5 and up
     – Zoomtext
     – Free screen readers: NVDA, ORCA
     – VoiceOver
     – ChromeVox

•   Libraries (support)
     – ExtJs, Jquery, Dojo, GWT, YUI, Glow + others
Chart Title
                10   JAWS 13 NVDA 2012
                 9                              VoiceOver
                 8
Support score




                 7                       Orca
                 6
                 5                                          Window eyes
                 4                                              7.5
                 3
                 2
                 1
                 0
                                          1
 Accessibility support: www.HTML5accessibility.com

 New interactive elements:
  html5 interactive controls
 Text alternatives: long descriptions

 Canvas: canvas example

 Structural elements: HTML5 structural elements

 Figure and figcaption: figures and figcaption
   Aviewer (free desktop application for windows )
   Dom Inspector (free Firefox extension)
   Inspect.exe (free desktop application for windows
    available as part of the Windows SDK)
   Accprobe (free open source cross platform app)
   Accessibility Inspector (free Mac app)
   Java ferret (free cross platform app)
   Accerciser (free gnome desktop app)
   www.twitter.com/stevefaulkner

   www.twitter.com/hanshillen

   www.paciellogroup.com/blog

   www.html5accessibility.com

   sfaulkner@paciellogroup.com

   hhillen@paciellogroup.com
Hans Hillen (TPG)

               Steve Faulkner (TPG)




02 / 27 / 12                          Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   42
 Keyboard and Focus Management

 Labeling and Describing

 Live Regions

 Form Validation

 Mode Conflicts

 Fallback Solutions



02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   43
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   44
Problem:
   Images, divs, spans etc. are not standard controls with
    defined behaviors
      o Not focusable with keyboard
      o Have a default tab order
      o Behavior is unknown
Solution:
   Ideally: Use native focusable HTML controls
      o <a>, <input type=“image” />, <button>, etc.
   Or manually define keyboard focus and behavior needs

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   45
 Reachability: Moving keyboard focus to a widget
      o Through tab order
           • Native focusable controls or tabindex=“0”
      o Through globally defined shortcut
      o By activating another widget
 Operability: Interacting with a widget
      o All functionally should be performable through keyboard
          and mouse input


02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   46
    To be accessible, ARIA input widgets need focus
      o Use natively focusable elements, such as <a>, <input />, etc
      o Add ‘tabindex’ attribute for non focusable elements, such as
         <span>, <div>, etc.
         • Tabindex=“0”: Element becomes part of the tab order
         • Tabindex=“-1” (Element is not in tab order, but focusable)
       o For composite widgets (menus, trees, grids, etc.):
         • Every widget should only have 1 stop in the tab order.
         • Keep track where your widget’s current tab stop is:
       o Alternative for tabindex: ‘aria-activedescendant=“<idref>”
         • Focus remains on outer container
         • AT perceives element with the specified ID as being focused.
         • You must manually highlight this active element, e.g. With CSS

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   47
   Every widget needs to be operable by keyboard.
    common keystrokes are:
      o Arrow keys
      o Home, end, page up, page down
      o Enter, space
      o ESC
   Mimic the navigate in the desktop environment
      o DHML Style Guide: http://dev.aol.com/dhtml_style_guide
      o ARIA Best Practices: http://www.w3.org/TR/wai-aria-practices/
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   48
   The ability to skip content is crucial for both screen
    reader and keyboard users
   Skip links are out of date, out of fashion and often
    misused
      o But keyboard users still need to be able to skip
   Other alternatives for skipping:
      o Collapsible sections
      o Consistent shortcuts (e.g. a shortcut that moves focus between
          panes and dialogs)
      o Custom focus manager that allows the user to move focus into
          a container to skip its contents

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   49
   More and more web apps use HTML based popup dialogs rather than actual
    browser windows/dialogs
      o Get a screen reader to perceive it properly using role="dialog"

   Dialogs should have their own tab order
      o Focus should "wrap"

   For modal dialogs, it should not be possible to interact with the main page
      o Prevent keyboard access
      o Virtual mode access can't be prevented

   For non modal dialogs, provide shortcut to switch between dialog and main page
   If dialog supports moving or resizing, these features must be keyboard accessible
   Support closing dialogs using Enter (OK) or Escape (Cancel) keys
      o Focus should be placed back on a logical element, e.g. the button that triggered the dialog.

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012                       50
 Trees, Lists, Grids can support single or multiple
    selection
      o Multiple selection must be keyboard accessible, for
          example:
           • Shift + arrow keys: contiguous selection
           • Ctrl + arrow keys: move focus without selection
           • Ctrl + space: Toggle focused item in selection (discontiguous
               selection)

 Editable grids need to support switching to edit
    mode by keyboard

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   51
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   52
   All of these must have an accessible name:
      o Every interactive widget
      o Composite widgets (menu(bar), toolbar, tablist, tree, grid)
      o Groups, regions and landmarks
   Browsers determines an element’s accessible name by checking the
    following :
      1.       aria-labelledby
      2.       aria-label
      3.       Associated label (<label for=“myControl”>) or alt attribute
      4.       Text contents
      5.       Title attribute

Optionally, add an accessible description for additional info

02 / 27 / 12    Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   53
    Aria-labelledby=“elemID”
       o Points to element ID that identifies the widget.
       o Can also use regular label element / title attribute
    Aria-describedby=“elemID”
       o Optional, provides additional info besides identity
       o Useful for additional info, instructions, hints
    Aria-label=“text”
       o Only use when no on-screen text
    Title attribute will also work

<h2 id=“treeLbl”>My Folders</h2>
<p id=“treeDesc” class=“hidden”>Each tree item has a context menu with more options</p>
<div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”>

 02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012         54
    Aria-labelledby=“IDREFS”
      o Value is one or more IDs of elements that identifiy the widget.
      o The elements ‘aria-labelledby’ targets can be any kind of text based element, anywhere
         in the document.
       o Add multiple Ids to concatinate label text:
               • Multiple elements can label one widget, and one element can label multiple widgets. (example)
    Aria-describedby=“IDREFS”
      o Similar to labelledby, except used for additional description, e.g. Form
               hints, instructions, etc.
    Aria-label
      o Simply takes a string to be used as label.
      o Quick and dirty way of making the screen reader say what you want.
      o Very easy to use, but only supported in Firefox at the moment.
<h2 id=“treeLbl”>My Folders</h2>
<p class=“hidden”>Each tree item has a context menu with more options</p>
<div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”>
...

02 / 27 / 12      Accessibility of HTML5 and Rich Internet Applications - CSUN 2012                              55
   Containers such as toolbars, dialogs, and regions provide
    context for their contents
   When the user moves focus into the container, the
    screen reader should first announce the container before
    announcing the focused control

<div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
     <h2 id="dialogTitle">Confirm</h2>
     <p id="dialogDescription">
          Are you sure you want to do that?
     </p>
     <button>Yes</button>
     <button>No</button>
</div>


02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012         56
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   57
   Problem: content is updated dynamically on screen may not be apparent to screen reader users
      o No page refresh, no screen reader announcement
      o Change is only announced by stealing focus
      o Users miss relevant information
      o Users have to ‘search’ for updated page content

   Solution: live regions indicate page updates without losing focus
      o Screen readers announce change based on type of live region

   Challenge: When should users be informed of the change?
      o Ignore trivial changes: changing seconds in a clock
      o Announce important changes immediately / as convenient




02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012                   58
   Role=“alert” for one-time, high-priority notifications
     o Shown for a period of time, or until the cause of the alert is solved
     o Basic message, no complex content
     o The element with the alert role does not need to be focused to be
          announced

   Role=“alertdialog” is similar to alert, but for actual
    (DHTML) dialogs.
     o May contain other widgets, such as buttons or other form fields
     o Does require a sub-element (such as a ‘confirm’ button) to receive focus
   Live regions ‘built into ‘ roles’
           • role="timer", "log", "marquee" or "status“ get default live behavior
           • Role=“alert” implicitly sets live to assertive

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012    59
1.     Identify which part (containing HTML element) is expected to be updated
2.     To make it live, add ‘aria-live’ attribute with a politeness value:
      o Off (default): Do not speak this region
      o Polite:            Speak this region when the user is idle
      o Assertive:         Speak this region as soon as possible

3.     Choose whether entire region should be announced or just the part that
       changed:
      o ‘aria-atomic': true (all) or false (part)

4.     Add other attributes as necessary:
      o aria-relevant: choose what to announce:
           • Combination of ‘Additions’, ‘removals’, ‘text’, ‘all’
      o aria-busy: indicate content is still updating
      o aria-labelledby, aria-describedby: label and describe regions

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   60
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   61
   You can used ARIA to make your form validation easier to manage.
      o aria-required & aria-invalid states
      o Role="alert" to flag validation errors immediately
   Use validation summaries invalid entries easier to find
      o Use role=“group” or Role="alertdialog" to mark up the summary
      o Link to corresponding invalid controls from summary items
      o Use different scope levels if necessary
   Visual tooltips: Useful for validation messages and formatting instructions
      o Tooltips must be keyboard accessible
      o Tooltip text must be associated with the form control using aria-describedby
   Live Regions: Use for concise feedback messages

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012       62
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   63
   Screen readers normally browse in ‘virtual mode’
      o Navigates a virtual copy of the web page
      o Intercepts all keystrokes for its own navigation (e.g. ‘H’ for heading navigation)
   For dynamic Web apps, virtual mode may need to be turned off
      o Interactive widgets need to define the keystrokes themselves
      o Content needs to be live, not a virtual copy
      o Automatically switches between virtual and non-virtual mode
   role=“application”
      o Screen reader switches to non-virtual for these elements
      o Must provide all keyboard navigation when in role=“application” mode
      o Screen readers don’t intercept keystrokes then, so typical functions will not work



02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012             64
 For apps with ‘reading’ or ‘editing’ sections
      o A reading pane in an email client
      o Screen reader switches back to virtual mode, standard
          ‘web page reading’ shortcuts work again
      o Read / edit documents in a web application
 Banner, complementary, contentinfo, main,
    navigation, search & form
 When applied to a container inside an application
    role, the screen reader switches to virtual mode.

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   65
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   66
   Role=“presentation” overrides existing role
      o Useful to ‘hide’ default HTML roles from AT
   For example:
      o Hide layout tables by adding the role to the <table>
          element
      o Textual content read by the screen reader but table is ignored




02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   67
   In IE, JAWS currently does not properly announce dialogs when moving
    focus into them
   It's possible to provide a fallback solution for IE to fix this, using hidden
    fieldsets to apply the ARIA dialog markup to
      o Hide fieldset's padding, margin, and border
      o Move legend off-screen


<fieldset role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription">
     <legend id="dialogTitle">Confirm</legend>
     <p id="dialogDescription">
          Are you sure you want to do that?
     </p>
     <button>Yes</button>
     <button>No</button>
</fieldset>


02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012              68
   Developers often use links as (icon) buttons
      o Side effect: screen reader will announce them as a link, not a button
   This can be made accessible by setting role="button"
      o Screen reader announces link as button now, but also provides hint for
          using a button ("press" space to activate)
           • You lie! Links work through the Enter key, Space will scroll down the page
      o To make sure JAWS is not lying, you'll have to manually add a key
          event handler for the Space key.




<a role="button" onkeypress="handleKeyPress(event);">refresh</a>

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012          69
 Three types of hiding:
      1. Hiding content visually and from AT:
      2. Hiding content visually, but not from AT
      3. Hiding content from AT, but not visually




02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   70
 Display: none;
      o Hides content both visually and from AT products
      o Only works when CSS is supported (by user agent, user, or
          AT product)
      o Only use to hide content that still ‘makes sense’
           • E.g. contents of a collapsible section
      o Do not use for content that provides incorrect information
           • E.g. preloaded error messages that are not applicable at the
             moment, or stale content
           • Instead, this content should be removed from the DOM completely

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   71
   Hiding content off-screen will still make it available for screen readers,
    without it being visible
   Useful to provide extra information to screen reader users or users that do
    not support CSS
      o E.g. add hidden headings, screen reader instructions, role & state info for older
          technology
/* Old */
.offscreen {
   position: absolute;
   left: -999em;
}

/* New */
.ui-helper-hidden-accessible {
     position: absolute !important;
     clip: rect(1px 1px 1px 1px);
     clip: rect(1px,1px,1px,1px);
}

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012            72
   Sometimes developers want to hide content from screen
    readers, e.g.:
      o Duplicate controls
      o Redundant information that was already provided through semantic
          markup.

   Difficult to achieve:
      o Role=“presentation” will remove native role, but content is still visible
          for AT products
      o Aria-hidden=“true” would be ideal, but:
           • The spec did not intend for aria-hidden to be used this way
           • Browsers handle aria-hidden differently
               • IE does nothing
               • FF exposes content but marks it as hidden
               • Chrome does not expose content (i.e. truly hides it)

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012    73
02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   74
   Some developers will use multiple HTML <table>
    elements to create one single grid. For example:
      o One <table> for the header row, one <table> for the body rows
      o One <table> for every single row
   Why? Because this is easier to
    manage, style, position, drag & drop, etc.
   Screen reader does not perceive one single table, but it
    sees two ore more separate tables
      o Association between column headers and cells is broken
      o Screen reader's table navigation is broken

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   75
 If using a single table is not feasible, use ARIA to fix
    the grid structure as perceived by the screen reader
      o Use role="presentation" to hide the original table
          elements form the screen readers
      o Use a combination of
          "grid", "row", "gridcell", "columnheader" roles to make the
          screen reader see one big grid.




02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   76
 Using ARIA to create a correct grid structure


    <div role="grid">
         <table role="presentation">
              <tr role="row">
                   <th role="columnheader">Dog Names</th>
                   <th role="columnheader">Cat Names</th>
                   <th role="columnheader">Cow names</th>
              </tr>
         </table>
         <table role="presentation">
              <tr role="row">
                   <td role="gridcell">Fido</td>
                   <td role="gridcell">Whiskers</td>
                   <td role="gridcell">Clarabella</td>
              </tr>
         </table>
    </div>

02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   77
 Questions?

 Additional Topics?

 Course Material:
    http://www.paciellogroup.com/training/CSUN2012




02 / 27 / 12   Accessibility of HTML5 and Rich Internet Applications - CSUN 2012   78

More Related Content

Viewers also liked

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Raj Lal
 
HTML5 and CSS3
HTML5 and CSS3HTML5 and CSS3
HTML5 and CSS3
Mario Hernandez
 
HTML5 Report Card
HTML5 Report CardHTML5 Report Card
HTML5 Report Card
Michael(tm) Smith
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy
 
TestPlan for IIT website
TestPlan for IIT websiteTestPlan for IIT website
TestPlan for IIT website
Muksitul M Tanim Hasan
 
Angular 2
Angular 2Angular 2
Angular 2
Nigam Goyal
 
Ubiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and AccessibilityUbiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and Accessibility
Ted Drake
 
CSUN2017
CSUN2017CSUN2017
CSUN2017
Scott Williams
 
2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color Contrast
Crystal Baker
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and Prioritization
Sean Kelly
 
CSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or MeasureCSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or Measure
Ted Gies
 
2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility
Crystal Baker
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Ted Drake
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Ted Drake
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions
Arc & Codementor
 
Accessibility and Design: Where Productivity and Philosophy Meet
Accessibility and Design:  Where Productivity and Philosophy MeetAccessibility and Design:  Where Productivity and Philosophy Meet
Accessibility and Design: Where Productivity and Philosophy Meet
Joe Lonsky
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Bill Tyler
 
Web 3.0 The Semantic Web
Web 3.0 The Semantic WebWeb 3.0 The Semantic Web
Web 3.0 The Semantic Web
Hatem Mahmoud
 
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Lainey Feingold
 
A Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignA Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal Design
Anders Skifte
 

Viewers also liked (20)

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
HTML5 and CSS3
HTML5 and CSS3HTML5 and CSS3
HTML5 and CSS3
 
HTML5 Report Card
HTML5 Report CardHTML5 Report Card
HTML5 Report Card
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
TestPlan for IIT website
TestPlan for IIT websiteTestPlan for IIT website
TestPlan for IIT website
 
Angular 2
Angular 2Angular 2
Angular 2
 
Ubiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and AccessibilityUbiquitous Transactions - Financial Future and Accessibility
Ubiquitous Transactions - Financial Future and Accessibility
 
CSUN2017
CSUN2017CSUN2017
CSUN2017
 
2017 CSUN Color Contrast
2017 CSUN Color Contrast2017 CSUN Color Contrast
2017 CSUN Color Contrast
 
CSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and PrioritizationCSUN 2017 Success Criteria: Dependencies and Prioritization
CSUN 2017 Success Criteria: Dependencies and Prioritization
 
CSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or MeasureCSUN 2017 VPATs For Business or Measure
CSUN 2017 VPATs For Business or Measure
 
2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility2017 CSUN The Art of Language in Accessibility
2017 CSUN The Art of Language in Accessibility
 
Mystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessibleMystery Meat 2.0 – Making hidden mobile interactions accessible
Mystery Meat 2.0 – Making hidden mobile interactions accessible
 
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
Accessibility metrics Accessibility Data Metrics and Reporting – Industry Bes...
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions
 
Accessibility and Design: Where Productivity and Philosophy Meet
Accessibility and Design:  Where Productivity and Philosophy MeetAccessibility and Design:  Where Productivity and Philosophy Meet
Accessibility and Design: Where Productivity and Philosophy Meet
 
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
Rethinking Accessibility: Role-Based Analysis of WCAG 2.0 - CSUN 2017
 
Web 3.0 The Semantic Web
Web 3.0 The Semantic WebWeb 3.0 The Semantic Web
Web 3.0 The Semantic Web
 
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
Digital Accessibility Legal Update - CSUNATC 2017 (CSUN)
 
A Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal DesignA Multidisciplinary Approach to Universal Design
A Multidisciplinary Approach to Universal Design
 

Similar to Accessibility of HTML5 and Rich Internet Applications - CSUN 2012

WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
Patrick Lauke
 
Accessible web applications
Accessible web applications Accessible web applications
Accessible web applications
Steven Faulkner
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
Patrick Lauke
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
Patrick Lauke
 
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
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
IWMW
 
The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!
Rabab Gomaa
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
colinbdclark
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
Dennis Lembree
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
Lennart Schoors
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
colinbdclark
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
sagaroceanic11
 
Web accessibility workshop 4
Web accessibility workshop 4Web accessibility workshop 4
Web accessibility workshop 4
Vladimir Tomberg
 
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
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
Tilak Joshi
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
Ravi Raj
 
DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5
Frédéric Harper
 
#1 - HTML5 Overview
#1 - HTML5 Overview#1 - HTML5 Overview
#1 - HTML5 Overview
iloveigloo
 
ARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityARIA and JavaScript Accessibility
ARIA and JavaScript Accessibility
Paul Bohman
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
Hagai Asaban
 

Similar to Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 (20)

WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018
 
Accessible web applications
Accessible web applications Accessible web applications
Accessible web applications
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...
 
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...
 
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...
 
An Introduction to WAI-ARIA
An Introduction to WAI-ARIAAn Introduction to WAI-ARIA
An Introduction to WAI-ARIA
 
The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!The Recipe for Making Accessible Widgets!
The Recipe for Making Accessible Widgets!
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Making your jQuery Plugins More Accessible
Making your jQuery Plugins More AccessibleMaking your jQuery Plugins More Accessible
Making your jQuery Plugins More Accessible
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
Web accessibility workshop 4
Web accessibility workshop 4Web accessibility workshop 4
Web accessibility workshop 4
 
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!
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5
 
#1 - HTML5 Overview
#1 - HTML5 Overview#1 - HTML5 Overview
#1 - HTML5 Overview
 
ARIA and JavaScript Accessibility
ARIA and JavaScript AccessibilityARIA and JavaScript Accessibility
ARIA and JavaScript Accessibility
 
Testing For Web Accessibility
Testing For Web AccessibilityTesting For Web Accessibility
Testing For Web Accessibility
 

Recently uploaded

Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
maazsz111
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
Jason Packer
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
marufrahmanstratejm
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
Javier Junquera
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
alexjohnson7307
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 

Recently uploaded (20)

Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
SAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloudSAP S/4 HANA sourcing and procurement to Public cloud
SAP S/4 HANA sourcing and procurement to Public cloud
 
Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024Columbus Data & Analytics Wednesdays - June 2024
Columbus Data & Analytics Wednesdays - June 2024
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Public CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptxPublic CyberSecurity Awareness Presentation 2024.pptx
Public CyberSecurity Awareness Presentation 2024.pptx
 
GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)GNSS spoofing via SDR (Criptored Talks 2024)
GNSS spoofing via SDR (Criptored Talks 2024)
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
leewayhertz.com-AI in predictive maintenance Use cases technologies benefits ...
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012

  • 1. Hans Hillen (TPG) Steve Faulkner (TPG) 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 1
  • 2.  www.paciellogroup.com/training/CSUN2012  Examples: part 1 http://www.html5accessibility.com/CSUN12/
  • 3. If you can avoid using: — JavaScript — CSS — ARIA — HTML5 DO IT! Now back to reality...
  • 4. I am not an expert I know some things about HTML5 and WAI-ARIA I know some people who know some other things about HTML5 and WAI-ARIA I will hold up a virtual sign if you ask a question I cannot answer Consider it held up when you ask a question and I look vague
  • 6. There’s a clue in the name: Accessible Rich Internet Applications
  • 7. “This specification introduces features to HTML and the DOM that ease the authoring of Web-based applications.”
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. ARIA is not so much about content ARIA is about interaction
  • 15. Much of ARIA only makes sense in conjunction with scripting. Much of ARIA is about making sense of scripted interaction
  • 16. ARIA Stuff that makes sense without scripting —Landmark roles —A few of the relationship attributes —A few of the document structure roles
  • 17.
  • 18. <div tabindex="0" role="button" act="20" class="T-I J-J5-Ji nu T-I-ax7 L3" style="-moz-user-select: none;" aria-label="Refresh" data- tooltip="Refresh"> <div class="asa"><span class="J-J5-Ji ask">&nbsp;</span> <div class="asf T-I-J3 J-J5-Ji"></div> </div> </div>
  • 19. ARIA can/could be used with any markup language. — HTML — XHTML — SVG — MATHML — MXML — XUL
  • 20. Firebug accessibility implemented by Hans Hillen using ARIA
  • 21. ARIA attributes role aria-*
  • 22. abstract role Document Landmark widget structure ‘main’ ‘heading’
  • 23. command (abstract role) composite (abstract role) input (abstract role) landmark (abstract role) range (abstract role) roletype (abstract role) section (abstract role) sectionhead (abstract role) select (abstract role) structure (abstract role) widget (abstract role) window (abstract role) Don’t use
  • 24. widget Simple Composite ‘button’ ‘menubar’ typically act as containers that manage other, contained widgets.
  • 25. What do they do? How do they do it? What they don’t do (generally)
  • 26. Override native html roles If you want the native semantic to be used Do not add a role! BAD <h1 role=“button”>heading text</h1> GOOD <h1> <span role=“button”>heading text</span> </h1>
  • 27. Expose role information to accessibility APIs role=“button”
  • 28. UIA MAC WAI- IAccessible2 Control MSAA role ATK role Accessibi ARIA role role Pattern lity Role Type ROLE_SYSTEM IA2_ROLE_TOG ATK_ROLE_PUS button _PUSHBUTTON GLE_BUTTON Button H_BUTTON AXButton . HTML to Platform Accessibility APIs Implementation Guide
  • 29. role=“button” “to activate press space bar” http://www.paciellogroup.com/blog/aria-tests/user-input-widgets.html demo
  • 30. They are not magic! They do not (generally) add ANY interaction behaviours. Adding a role does not: Make an element focusable Provide keyboard events Add properties Button example
  • 31. The following roles are regions of the page intended as navigational landmarks. application form html4 banner main complementary html5 navigation html5 contentinfo search demo
  • 32. aria-* Widget Live Region Drag & Drop Relationship ‘aria-checked’ ‘aria-live’ ‘ aria-dragged’ ‘aria-labelledby’
  • 33. — Use of ARIA in HTML<5 is non conforming and probably always will be. — It doesn’t make any difference — Simple solution – use the HTML5 doctype <!DOCTYPE html>
  • 34. There are rules: HTML5 – WAI-ARIA 3.2.7
  • 35. You can use: —validator.w3.org/nu/ But some of the rules are out of date
  • 36. Browsers with ARIA support: rough guide – Firefox 3+ – Internet Explorer 8+ – Safari 5 (Mac/iOS) – Chrome 17 • Assistive Technology: – JAWS 8 and up – WindowEyes 5.5 and up – Zoomtext – Free screen readers: NVDA, ORCA – VoiceOver – ChromeVox • Libraries (support) – ExtJs, Jquery, Dojo, GWT, YUI, Glow + others
  • 37. Chart Title 10 JAWS 13 NVDA 2012 9 VoiceOver 8 Support score 7 Orca 6 5 Window eyes 4 7.5 3 2 1 0 1
  • 38.  Accessibility support: www.HTML5accessibility.com  New interactive elements: html5 interactive controls  Text alternatives: long descriptions  Canvas: canvas example  Structural elements: HTML5 structural elements  Figure and figcaption: figures and figcaption
  • 39. Aviewer (free desktop application for windows )  Dom Inspector (free Firefox extension)  Inspect.exe (free desktop application for windows available as part of the Windows SDK)  Accprobe (free open source cross platform app)  Accessibility Inspector (free Mac app)  Java ferret (free cross platform app)  Accerciser (free gnome desktop app)
  • 40. www.twitter.com/stevefaulkner  www.twitter.com/hanshillen  www.paciellogroup.com/blog  www.html5accessibility.com  sfaulkner@paciellogroup.com  hhillen@paciellogroup.com
  • 41. Hans Hillen (TPG) Steve Faulkner (TPG) 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 42
  • 42.  Keyboard and Focus Management  Labeling and Describing  Live Regions  Form Validation  Mode Conflicts  Fallback Solutions 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 43
  • 43. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 44
  • 44. Problem:  Images, divs, spans etc. are not standard controls with defined behaviors o Not focusable with keyboard o Have a default tab order o Behavior is unknown Solution:  Ideally: Use native focusable HTML controls o <a>, <input type=“image” />, <button>, etc.  Or manually define keyboard focus and behavior needs 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 45
  • 45.  Reachability: Moving keyboard focus to a widget o Through tab order • Native focusable controls or tabindex=“0” o Through globally defined shortcut o By activating another widget  Operability: Interacting with a widget o All functionally should be performable through keyboard and mouse input 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 46
  • 46. To be accessible, ARIA input widgets need focus o Use natively focusable elements, such as <a>, <input />, etc o Add ‘tabindex’ attribute for non focusable elements, such as <span>, <div>, etc. • Tabindex=“0”: Element becomes part of the tab order • Tabindex=“-1” (Element is not in tab order, but focusable) o For composite widgets (menus, trees, grids, etc.): • Every widget should only have 1 stop in the tab order. • Keep track where your widget’s current tab stop is: o Alternative for tabindex: ‘aria-activedescendant=“<idref>” • Focus remains on outer container • AT perceives element with the specified ID as being focused. • You must manually highlight this active element, e.g. With CSS 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 47
  • 47. Every widget needs to be operable by keyboard. common keystrokes are: o Arrow keys o Home, end, page up, page down o Enter, space o ESC  Mimic the navigate in the desktop environment o DHML Style Guide: http://dev.aol.com/dhtml_style_guide o ARIA Best Practices: http://www.w3.org/TR/wai-aria-practices/ 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 48
  • 48. The ability to skip content is crucial for both screen reader and keyboard users  Skip links are out of date, out of fashion and often misused o But keyboard users still need to be able to skip  Other alternatives for skipping: o Collapsible sections o Consistent shortcuts (e.g. a shortcut that moves focus between panes and dialogs) o Custom focus manager that allows the user to move focus into a container to skip its contents 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 49
  • 49. More and more web apps use HTML based popup dialogs rather than actual browser windows/dialogs o Get a screen reader to perceive it properly using role="dialog"  Dialogs should have their own tab order o Focus should "wrap"  For modal dialogs, it should not be possible to interact with the main page o Prevent keyboard access o Virtual mode access can't be prevented  For non modal dialogs, provide shortcut to switch between dialog and main page  If dialog supports moving or resizing, these features must be keyboard accessible  Support closing dialogs using Enter (OK) or Escape (Cancel) keys o Focus should be placed back on a logical element, e.g. the button that triggered the dialog. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 50
  • 50.  Trees, Lists, Grids can support single or multiple selection o Multiple selection must be keyboard accessible, for example: • Shift + arrow keys: contiguous selection • Ctrl + arrow keys: move focus without selection • Ctrl + space: Toggle focused item in selection (discontiguous selection)  Editable grids need to support switching to edit mode by keyboard 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 51
  • 51. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 52
  • 52. All of these must have an accessible name: o Every interactive widget o Composite widgets (menu(bar), toolbar, tablist, tree, grid) o Groups, regions and landmarks  Browsers determines an element’s accessible name by checking the following : 1. aria-labelledby 2. aria-label 3. Associated label (<label for=“myControl”>) or alt attribute 4. Text contents 5. Title attribute Optionally, add an accessible description for additional info 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 53
  • 53. Aria-labelledby=“elemID” o Points to element ID that identifies the widget. o Can also use regular label element / title attribute  Aria-describedby=“elemID” o Optional, provides additional info besides identity o Useful for additional info, instructions, hints  Aria-label=“text” o Only use when no on-screen text  Title attribute will also work <h2 id=“treeLbl”>My Folders</h2> <p id=“treeDesc” class=“hidden”>Each tree item has a context menu with more options</p> <div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”> 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 54
  • 54. Aria-labelledby=“IDREFS” o Value is one or more IDs of elements that identifiy the widget. o The elements ‘aria-labelledby’ targets can be any kind of text based element, anywhere in the document. o Add multiple Ids to concatinate label text: • Multiple elements can label one widget, and one element can label multiple widgets. (example)  Aria-describedby=“IDREFS” o Similar to labelledby, except used for additional description, e.g. Form hints, instructions, etc.  Aria-label o Simply takes a string to be used as label. o Quick and dirty way of making the screen reader say what you want. o Very easy to use, but only supported in Firefox at the moment. <h2 id=“treeLbl”>My Folders</h2> <p class=“hidden”>Each tree item has a context menu with more options</p> <div role=“tree” aria-labelledby=“treeLbl” aria-describedby=“treeDesc”> ... 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 55
  • 55. Containers such as toolbars, dialogs, and regions provide context for their contents  When the user moves focus into the container, the screen reader should first announce the container before announcing the focused control <div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <h2 id="dialogTitle">Confirm</h2> <p id="dialogDescription"> Are you sure you want to do that? </p> <button>Yes</button> <button>No</button> </div> 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 56
  • 56. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 57
  • 57. Problem: content is updated dynamically on screen may not be apparent to screen reader users o No page refresh, no screen reader announcement o Change is only announced by stealing focus o Users miss relevant information o Users have to ‘search’ for updated page content  Solution: live regions indicate page updates without losing focus o Screen readers announce change based on type of live region  Challenge: When should users be informed of the change? o Ignore trivial changes: changing seconds in a clock o Announce important changes immediately / as convenient 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 58
  • 58. Role=“alert” for one-time, high-priority notifications o Shown for a period of time, or until the cause of the alert is solved o Basic message, no complex content o The element with the alert role does not need to be focused to be announced  Role=“alertdialog” is similar to alert, but for actual (DHTML) dialogs. o May contain other widgets, such as buttons or other form fields o Does require a sub-element (such as a ‘confirm’ button) to receive focus  Live regions ‘built into ‘ roles’ • role="timer", "log", "marquee" or "status“ get default live behavior • Role=“alert” implicitly sets live to assertive 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 59
  • 59. 1. Identify which part (containing HTML element) is expected to be updated 2. To make it live, add ‘aria-live’ attribute with a politeness value: o Off (default): Do not speak this region o Polite: Speak this region when the user is idle o Assertive: Speak this region as soon as possible 3. Choose whether entire region should be announced or just the part that changed: o ‘aria-atomic': true (all) or false (part) 4. Add other attributes as necessary: o aria-relevant: choose what to announce: • Combination of ‘Additions’, ‘removals’, ‘text’, ‘all’ o aria-busy: indicate content is still updating o aria-labelledby, aria-describedby: label and describe regions 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 60
  • 60. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 61
  • 61. You can used ARIA to make your form validation easier to manage. o aria-required & aria-invalid states o Role="alert" to flag validation errors immediately  Use validation summaries invalid entries easier to find o Use role=“group” or Role="alertdialog" to mark up the summary o Link to corresponding invalid controls from summary items o Use different scope levels if necessary  Visual tooltips: Useful for validation messages and formatting instructions o Tooltips must be keyboard accessible o Tooltip text must be associated with the form control using aria-describedby  Live Regions: Use for concise feedback messages 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 62
  • 62. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 63
  • 63. Screen readers normally browse in ‘virtual mode’ o Navigates a virtual copy of the web page o Intercepts all keystrokes for its own navigation (e.g. ‘H’ for heading navigation)  For dynamic Web apps, virtual mode may need to be turned off o Interactive widgets need to define the keystrokes themselves o Content needs to be live, not a virtual copy o Automatically switches between virtual and non-virtual mode  role=“application” o Screen reader switches to non-virtual for these elements o Must provide all keyboard navigation when in role=“application” mode o Screen readers don’t intercept keystrokes then, so typical functions will not work 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 64
  • 64.  For apps with ‘reading’ or ‘editing’ sections o A reading pane in an email client o Screen reader switches back to virtual mode, standard ‘web page reading’ shortcuts work again o Read / edit documents in a web application  Banner, complementary, contentinfo, main, navigation, search & form  When applied to a container inside an application role, the screen reader switches to virtual mode. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 65
  • 65. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 66
  • 66. Role=“presentation” overrides existing role o Useful to ‘hide’ default HTML roles from AT  For example: o Hide layout tables by adding the role to the <table> element o Textual content read by the screen reader but table is ignored 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 67
  • 67. In IE, JAWS currently does not properly announce dialogs when moving focus into them  It's possible to provide a fallback solution for IE to fix this, using hidden fieldsets to apply the ARIA dialog markup to o Hide fieldset's padding, margin, and border o Move legend off-screen <fieldset role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <legend id="dialogTitle">Confirm</legend> <p id="dialogDescription"> Are you sure you want to do that? </p> <button>Yes</button> <button>No</button> </fieldset> 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 68
  • 68. Developers often use links as (icon) buttons o Side effect: screen reader will announce them as a link, not a button  This can be made accessible by setting role="button" o Screen reader announces link as button now, but also provides hint for using a button ("press" space to activate) • You lie! Links work through the Enter key, Space will scroll down the page o To make sure JAWS is not lying, you'll have to manually add a key event handler for the Space key. <a role="button" onkeypress="handleKeyPress(event);">refresh</a> 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 69
  • 69.  Three types of hiding: 1. Hiding content visually and from AT: 2. Hiding content visually, but not from AT 3. Hiding content from AT, but not visually 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 70
  • 70.  Display: none; o Hides content both visually and from AT products o Only works when CSS is supported (by user agent, user, or AT product) o Only use to hide content that still ‘makes sense’ • E.g. contents of a collapsible section o Do not use for content that provides incorrect information • E.g. preloaded error messages that are not applicable at the moment, or stale content • Instead, this content should be removed from the DOM completely 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 71
  • 71. Hiding content off-screen will still make it available for screen readers, without it being visible  Useful to provide extra information to screen reader users or users that do not support CSS o E.g. add hidden headings, screen reader instructions, role & state info for older technology /* Old */ .offscreen { position: absolute; left: -999em; } /* New */ .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 72
  • 72. Sometimes developers want to hide content from screen readers, e.g.: o Duplicate controls o Redundant information that was already provided through semantic markup.  Difficult to achieve: o Role=“presentation” will remove native role, but content is still visible for AT products o Aria-hidden=“true” would be ideal, but: • The spec did not intend for aria-hidden to be used this way • Browsers handle aria-hidden differently • IE does nothing • FF exposes content but marks it as hidden • Chrome does not expose content (i.e. truly hides it) 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 73
  • 73. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 74
  • 74. Some developers will use multiple HTML <table> elements to create one single grid. For example: o One <table> for the header row, one <table> for the body rows o One <table> for every single row  Why? Because this is easier to manage, style, position, drag & drop, etc.  Screen reader does not perceive one single table, but it sees two ore more separate tables o Association between column headers and cells is broken o Screen reader's table navigation is broken 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 75
  • 75.  If using a single table is not feasible, use ARIA to fix the grid structure as perceived by the screen reader o Use role="presentation" to hide the original table elements form the screen readers o Use a combination of "grid", "row", "gridcell", "columnheader" roles to make the screen reader see one big grid. 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 76
  • 76.  Using ARIA to create a correct grid structure <div role="grid"> <table role="presentation"> <tr role="row"> <th role="columnheader">Dog Names</th> <th role="columnheader">Cat Names</th> <th role="columnheader">Cow names</th> </tr> </table> <table role="presentation"> <tr role="row"> <td role="gridcell">Fido</td> <td role="gridcell">Whiskers</td> <td role="gridcell">Clarabella</td> </tr> </table> </div> 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 77
  • 77.  Questions?  Additional Topics?  Course Material: http://www.paciellogroup.com/training/CSUN2012 02 / 27 / 12 Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 78

Editor's Notes

  1. Demos:Bad treeGood Tree
  2. Every widget should have one stopComposite widgets: menus, trees, grids, tabsEnsure all widgets are reachable by keyboardDepend on Tab order: default or custom?Support global keyboard shortcutsHow do you notify your users?Implement a custom focus managerMight be best solution for very complex UI&apos;sLet go of the traditional tab order idea: &quot;all focusable elements must be reachable by tab order&quot;
  3. Jquery Demo (collapsible sections)GXT Focus Manager
  4. GXT Focus Manager demo (open window under &quot;Window&quot; tab)
  5. Basic GridGridrow editor
  6. Can point to multiple Ids, to ‘concatenate’ labels / decriptionsAT Support Summary: http://www.paciellogroup.com/blog/aria-tests/aria-labelledby-input.html When defining more than one of these, the order of precedence is:If these are defined: aria-label, aria-labelledBy, and Title: JAWS reads titleIf these are defined: aria-label, and aria-labelledBy: JAWS reads Label
  7. Jquery dialog example
  8. Example: stock updater To identify a live region, add the aria-live attribute.One of the most important concepts behind live regions is politeness. Politeness indicates how much priority a live region has. To create a live region, the developer adds the aria-live property to the element with a value of off, polite, assertive, or rude. The value, or politeness level (or alternatively the intrusiveness level), specifies what a screen reader should do when the element is updated.A value of off (aria-live=&quot;off&quot;) tells the screen reader to not announce the update. If/when the screen reader user encounters the updated content, it will be read at that time. This would be used for non-important or irrelevant content updates.A value of polite will notify the user of the content change as soon as he/she is done with the current task. This might take the form of a beep or an audio indication of the update. The user can then choose to directly jump to the updated content. This value would be the most common for content updates, especially for things like status notification, weather or stock updates, chat messages, etc.An aria-live value of assertive will result in the user being alerted to the content change immediately or as soon as possible. Assertive would be used for important updates, such as error messagesaria-live=&quot;rude&quot; is reserved for the most critical of updates. It would immediately inform the user of the update and possibly set focus immediately to the updated content.
  9. The following politeness values are available for aria-live: off, polite, and assertive.Aria-live=&quot;off&quot;Default value, identical to not setting aria-live. Examples:A DHTML clockNumber of users currently onlineAria-live=“polite” Updates are announced but won’t interrupt the userShould be used in most situations involving live regions that present new information to users:Updates to news headlines, twitter alerts, monitored stocks, etc.Aria-live=“assertive”Updates are announced and interrupt what the user is doingOnly use for important updates that require immediate attention.Warnings &amp; error notifications. Session timeout notificationsaria-atomic=&quot;true | false&quot; Optional. Indicates if assistive technology should present all or part of the changed region to the user.aria-atomic=“true”: assistive technology should announce the entire region when part of it changes; aria-atomic=“false”: only the part of the region that changed should be announced on its own. aria-busy=&quot;true | false&quot; Optional. Indicates whether region has finished updating, or whether certain parts are still expected to change. aria-busy=“true”: region not fully updated yet, AT should wait.aria-busy=“false”: region update is complete, AT can start announcing the update.Fall back solution for dialogs In IE, JAWS currently does not properly announce dialogs when moving focus into themIt&apos;s possible to provide a fallback solution for IE to fix this, using hidden fieldsets to apply the ARIA dialog markup to Hide fieldset&apos;s padding, margin, and borderMove legend off-screen &lt;fieldsetrole=&quot;dialog&quot; aria-labelledby=&quot;dialogTitle&quot; aria-describedby=&quot;dialogDescription&quot;&gt; &lt;legend id=&quot;dialogTitle&quot;&gt;Confirm&lt;/legend&gt; &lt;p id=&quot;dialogDescription&quot;&gt; Are you sure you want to do that? &lt;/p&gt; &lt;button&gt;Yes&lt;/button&gt; &lt;button&gt;No&lt;/button&gt;&lt;/fieldset&gt;Fallback solutions for link buttons Developers often use links as (icon) buttonsSide effect: screen reader will announce them as a link, not a buttonThis can be made accessible by setting role=&quot;button&quot;Screen reader announces link as button now, but also provides hint for using a button (&quot;press&quot; space to activate)You lie! Links work through the Enter key, Space will scroll down the page To make sure JAWS is not lying, you&apos;ll have to manually add a key event handler for the Space key. &lt;a role=&quot;button&quot;onkeypress=&quot;handleKeyPress(event);&quot;&gt;refresh&lt;/a&gt;Fixing Structure: Aria-ownsSometimes a widget structure is not explicit via the DOM and logical structure of a page.Aria-owns=“IDREFS”Indicates that the element(s) referenced by the IDs should be considered a child of the element that has this attribute.&lt;h3 id=&quot;header&quot;&gt;Vegetables&lt;/h3&gt; &lt;ul role=&quot;list&quot; aria-labelledby=&quot;header&quot; aria-owns=&quot;external_listitem&quot;&gt; &lt;li role=&quot;listitem&quot;&gt;Carrot&lt;/li&gt; &lt;li role=&quot;listitem&quot;&gt;Tomato&lt;/li&gt; &lt;li role=&quot;listitem&quot;&gt;Lettuce&lt;/li&gt; &lt;/ul&gt; … &lt;div role=&quot;listitem&quot; id=&quot;external_listitem&quot;&gt;Asparagus&lt;/div&gt; Fixing Incorrect Grid Structure (1) Some developers will use multiple HTML &lt;table&gt; elements to create one single grid. For example:One &lt;table&gt; for the header row, one &lt;table&gt; for the body rowsOne &lt;table&gt; for every single rowWhy? Because this is easier to manage, style, position, drag &amp; drop, etc.Screen reader does not perceive one single table, but it sees two ore more separate tablesAssociation between column headers and cells is brokenScreen reader&apos;s table navigation is brokenFixing Incorrect Grid Structure (2) If using a single table is not feasible, use ARIA to fix the grid structure as perceived by the screen reader Use role=&quot;presentation&quot; to hide the original table elements form the screen readersUse a combination of &quot;grid&quot;, &quot;row&quot;, &quot;gridcell&quot;, &quot;columnheader&quot; roles to make the screen reader see one big grid.Fixing Incorrect Grid Structure (3) Using ARIA to create a correct grid structure &lt;div role=&quot;grid&quot;&gt; &lt;table role=&quot;presentation&quot;&gt; &lt;trrole=&quot;row&quot;&gt; &lt;throle=&quot;columnheader&quot;&gt;Dog Names&lt;/th&gt; &lt;throle=&quot;columnheader&quot;&gt;Cat Names&lt;/th&gt; &lt;throle=&quot;columnheader&quot;&gt;Cow names&lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table role=&quot;presentation&quot;&gt; &lt;trrole=&quot;row&quot;&gt; &lt;td role=&quot;gridcell&quot;&gt;Fido&lt;/td&gt; &lt;td role=&quot;gridcell&quot;&gt;Whiskers&lt;/td&gt; &lt;td role=&quot;gridcell&quot;&gt;Clarabella&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; 
  10. Validation sample
  11. Requirements Screen Reader UsersScreen reader normally runs in ‘virtual mode’For web apps, switch to ‘non virtual mode’Keyboard input will not be disrupted by screen readerARIA will be properly recognizedIn JAWS pre version 11, use INS + Z to switch to PC Cursor modeUse shortcut twice fast to permanently stay in this modeIn WindowEyes, use CTRL + SHIFT+ A to move out of browse modeUse ins + A to turn autoload on or off
  12. ARIA grid fix example