1 / 47

ARIA + HTML5

Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group. ARIA + HTML5. Diving in to some HTML5. Details/summary Dialog Spin button slider ARIA rules HTML/ARIA validation Tools. HTML5. Getting simple. HTM5 demo – details/summary. <details>

vilina
Download Presentation

ARIA + HTML5

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. Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group ARIA + HTML5

  2. Diving in to some HTML5 • Details/summary • Dialog • Spin button • slider • ARIA rules • HTML/ARIA validation • Tools

  3. HTML5 Getting simple

  4. HTM5 demo – details/summary <details> <summary> label </summary> Some content </details> simple

  5. HTM5 demo – details/summary = ½ an implementation

  6. HTM5 demo – details/summary What we get now <summary> <details> simple

  7. HTM5 demo – details/summary What we want <summary>

  8. HTM5 demo – details/summary What we want<details>

  9. HTML5 demo – details/summary Filling Gaps

  10. HTM5 demo – details/summary <details role="group"id="d1"> <summary tabindex="0" role="button" aria-controls="d1"aria-expanded="true|false"> label </summary> Some content </details>

  11. HTM5 demo – details/summary

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

  13. HTM5 demo – dialog • What we get for free • Focus moves to modal dialog when it is displayed • Focus stays in modal dialog until it is dismissed • Content not in the modal dialog is really disabled • ESC key dismisses the dialog • <dialog> = role=dialog

  14. HTM5 demo – dialog • What we need to add • Accessible name to dialog • <dialog aria-label="text"> • Currently when the dialog is dismissed focus moves to the <body> when it needs to move to control that triggered dialog display • Can be polyfilled using scripting

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

  16. HTM5 demo – input type=number • What we get • Correct role and value information • Keyboard operable <input step="2"type="number">

  17. HTM5 demo – input type=range <input type=range value=10 min=1 max=11>

  18. HTM5 demo – input type=range • What we get for free EVERYTHING \o/

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

  20. HTML 5.1 specification

  21. ARIA validation • 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. <!DOCTYPE html>

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

  23. If you only leave with one take away

  24. 1st rule of ARIA use 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. 1st rule of ARIA use 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. • If the feature is available in HTML but it is not implemented or it is implemented, but accessibility support is not.

  26. 2nd rule of ARIA use 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: <h1 role=button>heading button</h1> Do this: <h1><span role=button>heading button</span></h1> Or better, do this: <h1><button>heading button</button></h1> 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.

  27. 3rd rule of ARIA use 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 Practices

  28. 4rd rule of ARIA use 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: <button role=presentation>press me</button> Do not do this: <button aria-hidden=true>press me</button>

  29. Accessibility testing tools Browsers + Keyboard

  30. Accessibility testing tools Browsers + High Contrast Mode

  31. Accessibility testing tools Developer tools

  32. Accessibility testing tools Firefox – DOM Inspector

  33. Accessibility testing tools Internet Explorer – Web Accessibility Toolbar

  34. Accessibility testing tools aViewer

  35. Accessibility testing tools NVDA – A free open source screen reader for Windows NVDA Screen Reader command key quick reference

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

  37. Live Regions Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  38. Live Regions • 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 Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  39. What is this thing & what does it do? • Chat, error logs, etc. • role='log' • Status messages • role='status' • Urgent message req. immediate notice • role='alert’ • Stock ticker • role='marquee' • Timer/ Clock • role='timer' • Progress indicator • role='progressbar' • None of the above? • role='region' Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  40. How important is the content? Meh OMFG aria-live='assertive' Interrupts output Default for alert role • aria-live='polite' • Waits for queued output to be read/ paused • Default for most roles Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  41. What is being changed? • I’m adding stuff • aria-relevant='additions' • I’m removing stuff • aria-relevant='removals' • I’m changing text • aria-relevant='text' • I’m replacing stuff • aria-relevant='all' Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  42. What matters? The New Hotness All the things! aria-atomic='true' Presentsentire contents • aria-atomic='false' • Default behavior • Onlyannounceschangednode. Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  43. What’s my name? Aria-label Aria-labelledby aria-labelledby='foo' <h2 id='foo'>Chat</h2> aria-label='Chat' Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  44. You givin me static? <div role='alert’ aria-label='Errors'> Please correct the followingerrors:</div> Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  45. You givin me static? <h2 id='lunchtime'> How long until lunch? </h2> <div role='timer' aria-labelledby='lunchtime'> 10 minutes </div> Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  46. But wait! There’s moar! <div id="userList" role="region" aria-atomic="false" aria-live="polite" aria-busy="false" aria-relevant="additions" aria-label="User List"> <ol> <li id="3xBCS2kJi" data-dateadded="1395160799” > Karl</li> </ol> </div> Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

  47. Let’s Chat http://chat.karlgroves-sandbox.com (Just for show) Live Regions Pluginhttps://github.com/karlgroves/jquery-live-regions Accessibility of HTML5 and Rich Internet Applications - CSUN 2014

More Related