The Paciello Group Making Twitter Tweet Steve Faulkner The Paciello Group.

The Paciello Group

Making Twitter TweetSteve 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 issuesUnnecessary 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

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

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

WASP (webstandards.org) recommends:

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

Instead of:

or

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 time between pushing the button and the content change is the issue.

The Paciello Group

Twitter – AJAX Users not having access to content changes.

The Paciello Group

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:

Twitter – AJAX Users not having access to content

changes.

Twitter – AJAX Users not having access to

content changes.

User key press: Update initiated

Content change occurs before update finished

Content change occurs after update finished

600 milliseconds

300 milliseconds

1000 milliseconds

Content update available

The Paciello Group

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.

• 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 boxes2. Provide sound cues3. Use WAI -ARIA live regions

The Paciello Group

Twitter – AJAXUsers not being aware of the changed

content if they can access it.

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