1 / 24

Accessible DHTML

Simon Bates David Bolter ATRC http://atrc.utoronto.ca/. Accessible DHTML. The Next ~50 Minutes. The problem: DHTML is not accessible The old “solution” Quick teasers about the new solution Illustrative Code demo problem, keyboard, AT, ARIA, High Contrast Dojo

ceana
Download Presentation

Accessible DHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Simon Bates David Bolter ATRC http://atrc.utoronto.ca/ Accessible DHTML

  2. The Next ~50 Minutes • The problem: DHTML is not accessible • The old “solution” • Quick teasers about the new solution • Illustrative Code demo • problem, keyboard, AT, ARIA, High Contrast • Dojo • Questions?

  3. DHTML Primer • Custom widgets • JavaScript • CSS • adding behaviour to existing HTML elements: div, span, ul

  4. Why is DHTML Not Accessible? • lack of semantics • developers focus on mouse interaction • lack of keyboard support • visually biased information • important visual stuff happening away from focus

  5. <noscript> tags used to provide alternative User experience delta. <noscript> tags == No love. The Old “Solution”

  6. Keyboard navigation! ARIA: Semantics! Live Regions! == Accessible Innovation New DHTML Accessibility

  7. Let's look at code!

  8. Keyboard • HTML4: form controls and hyperlinks • HTML5 and ARIA: all elements • no tabindex as HTML4 • tabindex = -1 programmatic, mouse • tabindex = 0 +tab, document order • tabindex > 0 +tab, numerical order • Firefox, IE, Opera

  9. Let's implement keyboard interaction!

  10. Keyboard still to do • Close menu on keypress • Return focus • Keyboard/mouse interaction

  11. Assistive Technologies • Screen readers • Screen magnifiers • Alternative input • Require user interface semantics to provide a good user experience

  12. Assistive Technologies Application Platform Accessibility Service Assistive Technology

  13. Assistive Technologies and HTML HTML, JavaScript, CSS Browser Platform Accessibility Service Assistive Technology

  14. Assistive Technologies and HTML ARIA HTML, JavaScript, CSS Browser Platform Accessibility Service Assistive Technology

  15. ARIA: Accessible Rich Internet Applications • W3C Working Draft • http://www.w3.org/TR/aria-roadmap/ • Machine-readable semantics for custom widgets • Roles (menu, progressbar, tree) • States (disabled, valuenow, expanded) • Live regions • Drag and drop • tabindex • Firefox, Opera in progress

  16. ARIA Example • <div role=“wairole:progressbar”aria-valuemin=“0”aria-valuemax=“10”aria-valuenow=“8”></div>

  17. Let’s look at our menu's screen reader experience

  18. High Contrast • Background colours are normalised • Background images disappear • Foreground colours (text, borders) are normalised

  19. Let's have a look at our menu

  20. Dojo • 1.0 coming very very soon! • dojo: core • dijit: widgets • dojox: extensions Theme Tester demo

  21. Dijit • Infrastructure for building accessible widgets • Themeable • Internationalisation, including detection of writing direction • Set of accessible widgets

  22. Accessible Dijit Widgets • Form • Button, CheckBox, ComboBox, CurrencyTextBox, DateTextBox, FilteringSelect, Form, InlineEditBox, NumberSpinner, NumberTextBox, Slider, Textarea, TextBox, TimeTextBox, ValidationTextBox • Layout • AccordionContainer, ContentPane, LayoutContainer, LinkPane, SplitContainer, StackContainer, TabContainer • Misc • ColorPalette, Dialog, Editor, InlineEditBox, Menu, ProgressBar, TitlePane,Toolbar,Tooltip,Tree

  23. Thanks.

  24. * W3C PF: standardization effort: Roadmap, Roles and States * IBM -- Firefox implementation, Dojo toolkit support, testing tools, supporting standardization effort, test cases and docs * University of Toronto -- Dojo toolkit support * Dojo Foundation -- Dojo toolkit support * University of Illinois -- test cases, Firefox accessibility extension testing tool, developer training, supporting standardization effort * Mozilla Foundation -- grants to developers for ARIA work * Opera -- beginning support in Kestrel (Opera 9.5), supporting standardization effort * Sun Microsystems -- Orca screen reader support, contributor to style guide group * Freedom Scientific -- JAWS screen reader support * GW Micro -- Window-Eyes screen reader support * AI Squared -- ZoomText screen magnifier support * CLC World -- Fire Vox screen reader extension implementation of ARIA widgets and live regions, live region test cases, live region report and recommendations * Google -- developing support on experimental pages Google Reader and Google Notebook * Paciello Group -- developing support in some pages, assisting with Best Practices document, articles, such as WAI-ARIA in HTML and WAI-ARIA live regions * Yahoo! -- presentations to accessibility community, working on ARIA examples * AOL -- style guide and best practices, supporting standardization effort * SAP -- developing support in SAP applications, supporting standardization effort * Microsoft -- supporting standardization effort, IE 5+ support ARIA keyboard navigation (via the same tabindex extensions contained in HTML 5) YOU!!! Who Supports ARIA?

More Related