1. The Paciello Group Accessing Higher Ground, 2014

3.  More like a set of specifications for a new platform

4. , & associated elements  Sectioning elements  Form fields

6. Section elements Using WAI -ARIA Landmark Roles

7. Section elements

8.  New input types in HTML5 o Color o Date / datetime / datetime-local o Email o Month o Number o Range o Search o Tel o Time o URL o Week

9.  What happens if HTML5 form type is not supported?

12.  Sighted user infers control’s role (purpose)  Screen reader perceives something different than sighted users o E.g. “link” rather than “button”  ARIA can correct this by provides the role and state properties

13.  Screen readers add instructions on how to interact with the control o Description varies based on control’s role

14.  Assistive technologies learn about controls through accessible APIs (such as MSAA and IA2)

15.  It’s not magic  It only changes how assistive technology interprets content.  Adding a ARIA does not: o Make an element focusable o Provide keyboard events o Add properties o Change visible appearance

16.  Make custom widgets understandable to assistive technology users  Fix or correct inaccessible content without completely recreating widgets from scratch  Programmatically indicate relationships between elements  Hide irrelevant visible content from assistive technology  Notify users of dynamic updates

18.  Banner assign to elements containing site-oriented content such as the name of the site, title and/or logo  Complementary assign to content that is supplemental to the main content  Contentinfo assign to copyright, privacy policy, terms of use or footnote areas  Form  Main assign to the main content of the page  Navigation assign to the element containing navigation links  Search defined where the main search function is on the page NOTE:  Use once: Banner, Contentinfo and Main landmarks  Can be used more than once: Complementary and Navigation landmarks

19.  Regions of the page for navigation o Screen readers support navigating to these elements o AT users quickly recognize page sections and navigate to them o JAWS commands: r (prior to JAWS 15 ; (semicolon))jump to next landmark Shift + ; (semicolon) jump to previous landmark Ctrl + Ins + ; (semicolon) show list of available landmarks o NVDA commands: D jump to next landmark Shift + D jump to previous landmark NVDA + F7 show list of available landmarks  Best Practices: o Label the areas with a descriptive name using aria-label, aria- labelledby or title attribute o Do not overuse

20.  Banner  Navigation  Main  Complementary  Contentinfo

21.  Pages use more than one "navigation" role o The screen reader user does not know which is which o Solution: label each landmark individually! o Can be done using common labeling techniques, e.g. aria- labelledby, aria-label and title attribute Account Types [Navigation Links]

22. The following roles are regions of the page intended as navigational landmarks. banner banner = html5* complementarycomplementary = html5 contentinfo contentinfo = html5* form form = html4 main main = html5 navigation navigation = html5 Search Application = don’t use as a landmarkdon’t use

25.  Every widget needs to be operable by keyboard. common keystrokes are: o Arrow keys o Home, end, page up, page down o Enter, space o ESC  Mimic the navigate in the desktop environment o ARIA Design Patterns: http://www.w3.org/WAI/PF/aria- practices/#aria_exhttp://www.w3.org/WAI/PF/aria- practices/#aria_ex

26.  Why? HTML already has a checkbox! o Your widget might not look like standard checkbox: A cell in a table that can be toggled An icon that can be checked or unchecked A specifically styled checkbox o Your widget might not behave like a standard checkbox, for example a tri-state checkbox:

27.  To select a value in a range  Uses states: o aria-valuenow : current value updated on every value change o aria-valuemin : range minimum o aria-valuemax : range maximum o aria-valuetext : optional, for slider’s unit e.g. ‘dollar’, ‘megabytes’, ‘strongly agree ’ <div role="slider" aria-valuenow="34" aria-valuemin="0" aria-valuemax= "100" aria-valuetext= "34 percent">…

28.  Tablists contain role="tab" elements o Can only expand one tab at a time o Indicated by ‘ aria-expanded ’ attribute  Expected keyboard shortcuts o Left / Up Arrow: Show the previous tab o Right / Down Arrow: Show the next tab o Home: Show the first tab o End: Show the last tab

29. Crust Veggies Carnivore Delivery Select Crust [radio buttons] http://test.cita.illinois.edu/aria/tabpanel/tabpanel1.php

30.  Each button on a toolbar has role ‘ button ’ o Turn buttons into toggle buttons with a ‘ pressed ’ attribute o Turn buttons into menu buttons with an ‘ aria-haspopup ’ attribute Enable full screen mode

31.  Can have multiple menus, submenus and menu items with ARIA role structure o If a menu items has a sub menu add aria-haspopup="true" and aria-owns=" " (Points to ID of submenu element) File Open Save … … See this example in action at: http://access.aol.com/aegis/#goto_menubar

32.  Nested structure of tree nodes o Nodes have ‘ treeitem ’ role o Branches contained by role="group" element o Branches have ‘ aria-expanded ’ to tell AT open/closed  AT announces nesting level System domain Admin Role...

33.  All of these must have an accessible name: o Every interactive widget o Composite widgets (menu(bar), toolbar, tablist, tree, grid) o Groups, regions and landmarks  Browsers determines an element’s accessible name by checking the following : 1. aria-labelledby 2. aria-label 3. Associated label ( ) or alt attribute 4. Text contents 5. Title attribute Optionally, add an accessible description for additional info

34.  Aria-labelledby=“elemID” o Points to element ID that identifies the widget. o Can also use regular label element / title attribute  Aria-describedby=“elemID” o Optional, provides additional info besides identity o Useful for additional info, instructions, hints  Aria-label=“text” o Only use when no on-screen text  Title attribute will also work My Folders Each tree item has a context menu with more options

35.  Attributes that indicate relationships or associations between elements o Used when structure cannot be determined  Attributes include: aria-activedescendant aria-controls aria-describedby aria-flowto aria-labelledby aria-owns aria-posinset aria-setsize

36.  Aria-labelledby=“IDREFS” o Value is one or more IDs of elements that identifiy the widget. o The elements ‘aria-labelledby’ targets can be any kind of text based element, anywhere in the document. o Add multiple Ids to concatinate label text: Multiple elements can label one widget, and one element can label multiple widgets. (example)  Aria-describedby=“IDREFS” o Similar to labelledby, except used for additional description, e.g. Form hints, instructions, etc.  Aria-label o Simply takes a string to be used as label. o Quick and dirty way of making the screen reader say what you want. o Very easy to use, but only supported in Firefox at the moment. My Folders Each tree item has a context menu with more options...

37.  Containers such as toolbars, dialogs, and regions provide context for their contents  When the user moves focus into the container, the screen reader should first announce the container before announcing the focused control Confirm Are you sure you want to do that? Yes No

38. 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201438

39.  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 201439

40.  Role=“alert” for one-time, high-priority notifications o Shown for a period of time, or until the cause of the alert is solved o Basic message, no complex content o The element with the alert role does not need to be focused to be announced  Role=“alertdialog” is similar to alert, but for actual (DHTML) dialogs. o May contain other widgets, such as buttons or other form fields o Does require a sub-element (such as a ‘confirm’ button) to receive focus  Live regions ‘built into ‘ roles’ role="timer", "log", "marquee" or "status“ get default live behavior Role=“alert” implicitly sets live to assertive

41.  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 201441

42. 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 201442

43.  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 201443

44. 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 201444

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

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

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

48. Karl 03 / 18 / 14Accessibility of HTML5 and Rich Internet Applications - CSUN 201448

49. 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 201449