• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Can Steven Hawking Use your Dojo App?
 

Can Steven Hawking Use your Dojo App?

on

  • 2,294 views

Presentation given at DojoConf 2011. Includes notes to provide for accessibility of images used in the presentation.

Presentation given at DojoConf 2011. Includes notes to provide for accessibility of images used in the presentation.

Statistics

Views

Total Views
2,294
Views on SlideShare
2,278
Embed Views
16

Actions

Likes
0
Downloads
5
Comments
0

1 Embed 16

http://www.linkedin.com 16

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Can Steven Hawking Use your Dojo App? Can Steven Hawking Use your Dojo App? Presentation Transcript

    • Can StephenHawking Useyour Dojo App?Becky GibsonIBM Emerging Internet Technologies 1 1
    • Agenda What is Accessibility? Why Accessibility? Enabling Accessibility Use Dijit ARIA Demo MobileCan Stephen Hawking Use your Dojo App? DojoConf 2011 2 2
    • What is Accessibility? Can Stephen Hawking Use your Dojo App? DojoConf 2011 3 3Accessibility does not mean “open 24 hours”!
    • What is Accessibility? Can Stephen Hawking Use your Dojo App? DojoConf 2011 3 3Accessibility does not mean “open 24 hours”!
    • What is Accessibility? Can Stephen Hawking Use your Dojo App? DojoConf 2011 3 3Accessibility does not mean “open 24 hours”!
    • Vision Issues Can Stephen Hawking Use your Dojo App? DojoConf 2011 4 4People with no or low vision (pictures on this page include a boy with a white cane and awoman with a seeing eye dog).
    • Mobility Issues Can Stephen Hawking Use your Dojo App? DojoConf 2011 5 5Pictures depict a woman in a wheelchair, a man with no arms, and a boy with a cast on both arms.
    • Mobility Issues Can Stephen Hawking Use your Dojo App? DojoConf 2011 5 5Pictures depict a woman in a wheelchair, a man with no arms, and a boy with a cast on both arms.
    • More Learning Hearing Age Color Blindness .......Can Stephen Hawking Use your Dojo App? DojoConf 2011 6 6
    • Don’t Build Sites Like This Can Stephen Hawking Use your Dojo App? DojoConf 2011 7 7Picture shows a woman in a wheelchair facing a set of stairs.
    • Why Accessibility? Can Stephen Hawking Use your Dojo App? DojoConf 2011 8 8US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility lawsAccording to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
    • Why Accessibility? Legal Can Stephen Hawking Use your Dojo App? DojoConf 2011 8 8US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility lawsAccording to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
    • Why Accessibility? Legal Buying Power Can Stephen Hawking Use your Dojo App? DojoConf 2011 8 8US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility lawsAccording to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
    • Why Accessibility? Legal Buying Power Altruism Can Stephen Hawking Use your Dojo App? DojoConf 2011 8 8US Government - Disabilities Act, Section 508, EU, Australia, Canada, Japan, others all have accessibility lawsAccording to the US Department of Labor, PWD have $175 billion in discretionary spending. That is four times the spending power of “tweens”.
    • Enabling Accessibility(Accessibility 101) Add Keyboard SupportCan Stephen Hawking Use your Dojo App? DojoConf 2011 9 9
    • Tabindex is your friend tabindex = -1 - item is focusable tabindex = 0 - item is in the tab order tabindex = x - item in fixed tab orderCan Stephen Hawking Use your Dojo App? DojoConf 2011 10 10
    • Use Semantic HTML <div class=”myCoolH1”>Topics</div> <div class=”myCoolH1” role=”heading”>Topics</div> <h1 class=myCoolH1”>Topics</div>Can Stephen Hawking Use your Dojo App? DojoConf 2011 11 11
    • Use Semantic HTML <div class=”myCoolH1”>Topics</div> <div class=”myCoolH1” role=”heading”>Topics</div> <h1 class=myCoolH1”>Topics</div>Can Stephen Hawking Use your Dojo App? DojoConf 2011 11 11
    • Label Form Elements <label for=”addr”>Address: </label> <input type=”text” id=”addr” name=”addr”> Alternatives if the designer insists on no visible text: <img src=”house.png” alt=””>&nbsp; <input type=”text” id=”addr” name=”addr” aria-label=”enter address”> or <label for="addr"><img src="home.png" alt="enter address">&nbsp; </label> <input id="addr" type="text" size="50"> Can Stephen Hawking Use your Dojo App? DojoConf 2011 12 12Image shows a possible input control with no text label - it has a picture of a house preceding the text control. You could use aria-label=”enteraddress” to provide the label.
    • Image alt text Add alt text to meaningful images <img src=”youWin.png” alt=”You Win!”> Empty alt text if not <img src=”shelby.png” alt=””> (gratuitous image) Can Stephen Hawking Use your Dojo App? DojoConf 2011 13 13Two images on this page. One is image of text, “You Win!” other is a cute kitten.
    • Support Windows High Contrast Mode Screen capture of rich text editor with a toolbar containing images Screen capture of same editor in high contrast black on white mode - button images a no longer visible Can Stephen Hawking Use your Dojo App? DojoConf 2011 14 14Image of rich text editor in standard mode with visible buttonsAnother image of same rich text editor in black on white high contrast mode - none of the button images are visible.
    • Use Dijit Widgets! Fully Keyboard Accessible High Contrast & Low Vision Support Assistive Technology SupportCan Stephen Hawking Use your Dojo App? DojoConf 2011 15 15
    • Keyboard All dijit widgets usable via keyboard only Implemented via tabindex and keyboard events keyboard focus trapped in dialogs until dismissed ondijitclick event traps mouse click and enter / space key press focus manager to track, get and set focusCan Stephen Hawking Use your Dojo App? DojoConf 2011 16 16
    • High Contrast programmatically detect Windows high contrast mode add dojo_a11y style onto body element <body class=”claro” role=”application”> becomes <body class=”claro dijit_a11y” role=”application”> provide dojo_a11y styles to provide: text alternative to css images additional styles to enhance focus, activation, selectionCan Stephen Hawking Use your Dojo App? DojoConf 2011 17 17
    • High Contrast Example Example dijit dialog in Example dijit dialog in high “standard” mode contrast white on black modeCan Stephen Hawking Use your Dojo App? DojoConf 2011 18 18
    • High Contrast Templatedijit/templates/Dialog.html<div class="dijitDialog" role="dialog" aria-labelledby="${id}_title"> <div data-dojo-attach-point="titleBar" class="dijitDialogTitleBar"> <span data-dojo-attach-point="titleNode" class="dijitDialogTitle" id="${id}_title"></span> <span data-dojo-attach-point="closeButtonNode" class="dijitDialogCloseIcon" data-dojo-attach-event="ondijitclick: onCancel" title="${buttonCancel}" role="button"tabIndex="-1"> <span data-dojo-attach-point="closeText" class="closeText" title="${buttonCancel}"> x </span> </span> </div> <div data-dojo-attach-point="containerNode" class="dijitDialogPaneContent"></div></div> Can Stephen Hawking Use your Dojo App? DojoConf 2011 19 19
    • High Contrast Stylesexcerpt from dijit/themes/dijit.css:.dijitDialog .closeText { display:none; /* for the onhover border in high contrast on IE: */ position:absolute;}.dijit_a11y .dijitDialog .closeText { display:inline;} Can Stephen Hawking Use your Dojo App? DojoConf 2011 20 20
    • Assistive TechnologySupport via ARIA Accesible Rich Internet Applications W3C Recommendation Adds roles, states & properties to scripted elements to enable assistive technology supportCan Stephen Hawking Use your Dojo App? DojoConf 2011 21 21
    • Tree Control Example Role = tree (on outer container) Role = treeitem expanded=true (on open Africa node) Role = treeitem selected=true (on highlighted Egypt child node with no children) Role = treeitem expanded=false (on closed Australia node) Can Stephen Hawking Use your Dojo App? DojoConf 2011 22 22Picture of a dijit tree control showing the continents. Africa, Asia, Austrailia, Europe, North America and South America are expandable tree nodes.Africa is currently expanded with Egypt, Kenya and Sudan as sub-nodes. Egypt is the selected node.
    • ARIA Examples Roles States & Properties tree, treeItem required tabcontainer, tablist,tab expanded, checked spinner, progressbar valuemin, valuemax, valuenow menubar, menu, menuitem describedby, labelledby, label grid, gridcell owns, haspopup more moreCan Stephen Hawking Use your Dojo App? DojoConf 2011 23 23
    • Common ARIA Roles landmarks identify the main regions on the page application, banner main, navigation search, form, complementary, contentinfo, form presentation Prevents screen reader from including the element in the a11y hierarchyCan Stephen Hawking Use your Dojo App? DojoConf 2011 24 24
    • Common ARIA States &Properties aria-liveregion identifies any area that is dynamically updated and how it should be announced aria-required, aria-invalid, aria-readonly, aria-disabled useful on elements requiring input aria-describedby, aria-labelledby, aria-label connect a description or label to an elementCan Stephen Hawking Use your Dojo App? DojoConf 2011 25 25
    • DemoCan Stephen Hawking Use your Dojo App? DojoConf 2011 26 26
    • DemoCan Stephen Hawking Use your Dojo App? DojoConf 2011 26 26
    • Mobile iOS provides best accessibility support VoiceOver screen reader built in Good ARIA support in mobile safari Universal Events generic events rather than keyboard event “expand” event rather than “right mouse click”Can Stephen Hawking Use your Dojo App? DojoConf 2011 27 27
    • Questions? ARIA / Accessibility Info WAI-ARIA Intro - http://www.w3.org/WAI/intro/aria.php Accessibility Intro - http://www.w3.org/WAI/intro/accessibility.php Dijit Accessibility Dijit reference - http://dojotoolkit.org/reference-guide/dijit/index.html#dijit-index Each dijit widget reference page has an accessibility section Reach me at becky at dojotoolkit dot org Thanks!Can Stephen Hawking Use your Dojo App? DojoConf 2011 28 28