1. Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group

2.  Details/summary  Dialog  Spin button  slider  ARIA rules  HTML/ARIA validation  Tools

3. Getting simple

4. label Some content simple

5. = ½ an implementation

6. What we get now simple

7. What we want

8. What we want

9. Filling Gaps

10. label Some content

12. Creating a modal dialog that works with keyboard and prevents users from accessing ‘disabled’ content is the holy grail….modal dialog

13.  What we get for free o Focus moves to modal dialog when it is displayed o Focus stays in modal dialog until it is dismissed o Content not in the modal dialog is really disabled o ESC key dismisses the dialog o = role=dialog

14.  What we need to add o Accessible name to dialog o Currently when the dialog is dismissed focus moves to the when it needs to move to control that triggered dialog display Can be polyfilled using scripting

15.  The good oil on implementing custom dialogs o Juicy Studio - Custom-Built Dialogs Juicy Studio - Custom-Built Dialogs o The Incredible Accessible Modal Dialog The Incredible Accessible Modal Dialog o WAI-ARIA design pattern – modal dialog WAI-ARIA design pattern – modal dialog

16.  What we get o Correct role and value information o Keyboard operable

18.  What we get for free EVERYTHING \o/

19.  There are conformance rules: o HTML5 – WAI-ARIA 3.2.7 HTML5 – WAI-ARIA 3.2.7  But they can be difficult to decipher o Using ARIA in HTML Using ARIA in HTML

21. Use of ARIA in HTML<5 is non conforming and probably always will be. It doesn’t make any difference, it still works The easiest method is to use the HTML5 DOCTYPE with ARIA markup and validate using the W3C Nu Markup Checker.HTML5 DOCTYPEW3C Nu Markup

22. http://validator.w3.org/nu/

24. If you can use a native HTML element or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

25. Under what circumstances may this not be possible?  If the visual design constraints rule out the use of a particular native element, because the element cannot be styled as required.  If the feature is not currently available in HTML.not currently available in HTML  If the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not. accessibility support

26. Do not change native semantics, unless you really have to. For example: Developer wants to build a heading that's a button. Do not do this: heading button Do this: heading button Or better, do this: heading button Note: it is OK to use native HTML elements, that have similar semantics to ARIA roles used, for fallback. For example using HTML list elements for the skeleton of an ARIA enabled, scripted tree widget.list elementstree widget

27. All interactive ARIA controls must be usable with the keyboard. If you create a widget that a user can click or tap or drag or drop or slide or scroll a user must also be able navigate to the widget and perform an equivalent action using the keyboard. All interactive widgets must be scripted to respond to standard key strokes or key stroke combinations where applicable. For example if using role=button the element must be able to recieve focus and a user just be able to activate the action associated with the element using both the enter and the space key. Refer to the keyboard and structural navigation and design patterns sections of the WAI-ARIA 1.0 Authoring Practiceskeyboard and structural navigationdesign patternsWAI-ARIA 1.0 Authoring Practices

28. Do not use role="presentation" or aria-hidden="true" on a focusable element. Using either of these on a focusable element will result in some users focusing on 'nothing'. Do not do this: press me Do not do this: press me

29. FirefoxInternet ExplorerSafariChrome Windows, LinuxWindowsOSX + IOS Android + IOS + Chrome OS Zoom Keyboard CSS Zoom Keyboard CSS Zoom Keyboard Touch Zoom Keyboard Touch Browsers + Keyboard

30. FirefoxInternet ExplorerSafariChrome Windows OSX + IOS Android + IOS + Chrome OS shift+alt+print screen shift+alt+print screen Universal Access IOS OSX Contrast Extension Browsers + High Contrast Mode

31. FirefoxInternet ExplorerSafariChrome Windows, LinuxWindowsOSX + IOS Android + IOS + Chrome OS Web Developer DOM inspector Firebug Developer tools (F12) Developer tools (OSX) Developer tools (OSX + Chrome OS) Developer tools

32. Firefox – DOM InspectorDOM Inspector

33. Internet Explorer – Web Accessibility ToolbarWeb Accessibility Toolbar

34. aViewer

35. NVDANVDA – A free open source screen reader for Windows NVDA Screen Reader command key quick referencecommand key quick reference

36.  Aviewer (free desktop application for windows ) Aviewer  Dom Inspector (free Firefox extension) Dom Inspector  Inspect.exe (free desktop application for windows available as part of the Windows SDK) Inspect.exe  Accprobe (free open source cross platform app) Accprobe  Accessibility Inspector (free Mac app) Accessibility Inspector  Java ferret (free cross platform app) Java ferret  Accerciser (free gnome desktop app) Accerciser

37. 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201437

38.  Allows user to be notified of content changes  Typically for content that changes automatically  Content change may exist separate to what has focus  Live Regions facilitate these notifications 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201438

39.  Chat, error logs, etc. o role='log'  Status messages o role='status'  Urgent message req. immediate notice o role='alert’  Stock ticker o role='marquee'  Timer/ Clock o role='timer'  Progress indicator o role='progressbar'  None of the above? o role='region' 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201439

40. MEH  aria-live='polite'  Waits for queued output to be read/ paused  Default for most roles OMFG  aria-live='assertive'  Interrupts output  Default for alert role 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201440

41.  I’m adding stuff o aria-relevant='additions'  I’m removing stuff  aria-relevant='removals'  I’m changing text o aria-relevant='text'  I’m replacing stuff o aria-relevant='all' 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201441

42. THE NEW HOTNESS  aria-atomic='false'  Default behavior  Only announces changed node. ALL THE THINGS!  aria-atomic='true'  Presents entire contents 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201442

43. ARIA-LABEL aria-label= ' Chat' ARIA-LABELLEDBY aria-labelledby='foo' Chat 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201443

44. Please correct the following errors: 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201444

45. How long until lunch? 10 minutes 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201445

46. Karl 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201446

47. http://chat.karlgroves-sandbox.com (Just for show) Live Regions Plugin https://github.com/karlgroves/jquery-live-regions https://github.com/karlgroves/jquery-live-regions 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201447

48. www.twitter.com/stevefaulkner www.paciellogroup.com/blog www.html5accessibility.com sfaulkner@paciellogroup.com