Making Twitter Tweet

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 • not associated with anything • Use of

– unnecessary and useless • Unnecessary duplication of links The Paciello Group Unnecessary duplication of links (175 on page) – 25 duplicates Twitter – 1.0 issues 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 in microformats The Paciello Group Twitter – microformats –Microformats use of , 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 – 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 The Paciello Group Twitter – microformats Users of Assistive Technology will hear this stuff The Paciello Group Twitter – microformats WASP (webstandards.org) recommends: March 12, 2007 at 5 PM, Central Standard Time or March 12, 2007 at 5 PM, Central Standard Time Instead of: March 12, 2007 at 5 PM 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 Users not having access to content changes. User key press: Update initiated 600 milliseconds Twitter – AJAX 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:

Content updates occur frequently. If things aren’t working as you would expect, try refreshing the page.

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