Docstoc

Slide 1 - AbilityNet

Document Sample
Slide 1 - AbilityNet Powered By Docstoc
					Making Twitter Tweet
       Steve Faulkner
     The Paciello Group



The Paciello Group
              UP FRONT
• Accessibility is not just
  about blind people
• This is not an exercise in
  Twitter Bashing

      The Paciello Group
The Paciello Group
 Twitter – 1.0 issues
•alt=“Icon_star_empty”

 alt=“Icon_star_full”

•No alt attribute

 The Paciello Group
   Twitter – 1.0 issues
• <label for=“doing”> not associated with anything

• Use of <fieldset> – unnecessary and useless




• Unnecessary duplication of links

   The Paciello Group
        Twitter – 1.0 issues
Unnecessary duplication of links (175 on page) – 25 duplicates




        The Paciello Group
             Twitter –
      2.0 Issues & Solutions
– Ensuring that JavaScript based
 functionality is usable by people with
 disabilities
  • Understanding AJAX issues
  • Providing Name, Role and State Information
  • Keyboard Accessibility
– Use of <abbr> in microformats

        The Paciello Group
    Twitter – microformats
–Microformats use of <abbr>, why is it
 an issue?
– the title attribute is there to provide
 human readable information not
 machine readable data.



       The Paciello Group
                          Twitter –
                         Name, role and state
   – Wherever possible use elements that
      provide the correct information


<a href="#" onclick="Ajax.Request()">
<img alt="Icon_star_empty" src="icon_star_empty.gif" /></a>


    – incorrect role: link
    – Incorrect: name/state “Icon_star_empty”
               The Paciello Group
                             Twitter –
                            Name, role and state
     – For a button use a button and provide
      name/state info in alt

<input type=“image” alt=“favourite" src="icon_star_empty.gif“
   onclick="Ajax.Request()" />




<input type=“image” alt=“favourite - selected" src="icon_star_full.gif“
   onclick="Ajax.Request()" />


                  The Paciello Group
      Twitter – microformats
Users of Assistive Technology will hear this stuff




          The Paciello Group
             Twitter – microformats
     WASP (webstandards.org) recommends:
<span class="dtstart" title="20070312T1700-06"> March 12, 2007 at 5 PM,
   Central Standard Time </span>

or
<span class="dtstart"> March 12, 2007 at 5 PM, Central Standard Time
   <span class="value" title="20070312T1700-06"></span> </span>

Instead of:
<abbr class="dtstart" title="20070312T1700-06"> March 12, 2007 at 5 PM
   </abbr>



                  The Paciello Group
           Twitter – AJAX
Two main issues:
• Users not having access to content
  changes.
• Users not being aware of
  the changed content if they can
  access it.

        The Paciello Group
               Twitter – AJAX
        Users not having access to content changes.
• 2 major screen readers JAWS <7.1 & Window
  Eyes use a ‘virtual buffer’ to store a copy of the
  DOM, this is what a user ‘views’ when
  browsing.
• When a user presses a control or link their
  view (copy) gets updated to reflect the current
  browser view.
• The update occurs after approximately 600
  milliseconds a control is pressed.
           The Paciello Group
                 Twitter – AJAX
            Users not having access to content changes.




The time between pushing the button and the content change
is the issue.
            The Paciello Group
                     Twitter – AJAX
            Users not having access to content changes.
1. Favourites (pseudo) button not selected: Browser and screen reader view
   synchronized:



2. User presses button – button changes state, in browser view, to selected,
    this twitter is added to users favourites:




3. In screen reader view button remains unselected and twitter is not added
    to favourites:



                 The Paciello Group
                     Twitter – AJAX
    Users not having access to content changes.
User key press: Update initiated

  600 milliseconds

Content change occurs before update finished
                         Content update available
 300 milliseconds

Content change occurs after update finished


 1000 milliseconds

                The Paciello Group
              Twitter – AJAX
       Users not having access to content changes.
• Good News – JAWS 7.1+ has effectively solved
  this issue.
• Bad News – Window Eyes has not.
• What can be done?: not much except to inform
  user that page content updates and they may
  need to update their view.




          The Paciello Group
                   Twitter – AJAX
            Users not having access to content changes.
CSS:
       p.update { position: absolute; left: -999em; width:
         0.1em; overflow: hidden; }

HTML:
       <p id=“update”> Content updates occur frequently. If
         things aren’t working as you would expect, try
         refreshing the page.</p>



                The Paciello Group
           Twitter – AJAX
Users not being aware of the changed
 content if they can access it.




        The Paciello Group
                   Twitter – AJAX
Users not being aware of the changed content if they can access it.




• In this situation sighted users can glance at the number to see
  how much more they can write, but vision impaired users
  cannot practically benefit from this information.
• 3 possible solutions: (show demo)
   1. Use alert boxes
   2. Provide sound cues
   3. Use WAI -ARIA live regions

               The Paciello Group
       Beyond Twitter - WAI-ARIA
• WAI ARIA – web accessibility initiative - accessible rich
  internet applications
• A W3C specification (in development)


 “Provides a way to add Name, Role and
 State information to custom controls
 (widgets) built using current HTML
 elements, so that Assistive Technology
 can reliably convey this information to the
 user.”
               The Paciello Group
                         WAI-ARIA
 web accessibility - initiative accessible rich internet applications
• Info about who supports etc to be inserted.




               The Paciello Group
                         WAI-ARIA
 web accessibility - initiative accessible rich internet applications
• More info about wai aria




               The Paciello Group
Making Twitter Tweet

          Thanks!
       Steve Faulkner
     The Paciello Group



The Paciello Group

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:4/27/2013
language:English
pages:25