Introduction to ARIA and HTML5. Jared Smith & Jonathan Whiting webaim.org

Size: px

Start display at page:

Download "Introduction to ARIA and HTML5. Jared Smith & Jonathan Whiting webaim.org"

Brooke West
5 years ago
Views:

1 Introduction to ARIA and HTML5 Jared Smith & Jonathan Whiting webaim.org

2 ARIA

3 ARIA Accessible Rich Internet Applications Specification developed by the PFWG of the W3C s WAI. Huh? W3C Candidate Recommendation

4 ARIA enhances accessibility of dynamic content and AJAX... scripted widgets and interactive controls... keyboard interactions within a web page Bridges the gap to future versions of HTML

5 ARIA Paves the Cow Paths

6 ARIA Paves the Cow Paths

7 ARIA Paves the Cow Paths

8 ARIA Paves the Cow Paths

9 ARIA Paves the Cow Paths

10 You can only make things more accessible by implementing ARIA now if you do it correctly

11 ARIA Core Components Roles <form role="search"> States <input aria-disabled="true"> Properties <input aria-required="true">

12 ARIA and Code Validation If your (X)HTML is valid and your ARIA is valid... valid + valid =???

13 ARIA Landmark Roles banner, complementary, contentinfo, main, navigation, and search Allows easy access to major page components The end of "skip" links? Oh yeah... browser keyboard accessibility still sucks.

14 Landmark Roles <div role="navigation" aria-label="main navigation"> <div role="main"> <form role="search"> You can add aria-label to differentiate multiple landmarks of the same type.

15 HTML5 and Landmark Roles Mapping <main> - role="main" <article> - role="article" <footer> - role="contentinfo" <header> - role="banner" <nav> - role="navigation" <aside> - role="complementary" ARIA Support > HTML5 Support so use both... for now <main role="main">

16 Modifying and Enhancing Roles Bad: <img src="submit.jpg" onclick=...> OK: <a onclick="..."><img src="submit.jpg"... Better: <a role="button" onclick="..."> <img src="submit.jpg"... Best: <button onclick="...">

17 role="application"... disables standard A.T. keystrokes to allow the page to function like a desktop application Be very careful with <body role="application"> Some ARIA elements (tree view, slider, table, tabs, dialog, toolbar, menus, etc.) have an assumed application role. role="document" enables reading mode.

18 role="presentation" <ul role="presentation"> <li>menu item</li>... Hides native roles of elements (and all required descendants) from assistive technology. Useful on layout tables, lists, etc. Is ignored if the element is navigable (e.g., links and controls).

19 Alert Role <div role="alert">read me right now</div> Also role="alertdialog"

20 First Name: (required) <label for="name">first Name</label>: <input name="name" id="name"> <em>(required)</em> The information about the element being required is outside the form element and its label, so it's ignored by a screen reader navigating the form.

21 First Name: (required) <label for="name">first Name</label>: <input name="name" id="name" aria-required="true"> <em>(required)</em> A screen reader now indicates the required status of the form element (and that's all).

22 Password: <label for="password">password</label>: <input name="password" id="password" aria-invalid="true"> A screen reader now indicates that the field is invalid or broken (and that's all). Use ARIA attributes to control styling: [aria-invalid=true] {border : 2px solid red;}

23 <input type="submit" disabled="disabled"> vs. <input type="submit" aria-disabled="true"> Disabled HTML buttons are not keyboard focusable and have very poor contrast.

24 aria-hidden="true" Indicates element (and all descendants) are hidden from all users. You can't unhide a child element. Use ARIA attributes to control visual appearance: [aria-hidden=true] {display:none;}

25 First Name: <label for="fname" id="fnamelabel">first name</label>: <input type="text" id="fname" aria-labelledby="fnamelabel"> Redundant, but doesn't cause any problems. ARIA always overrides native semantics.

26 Self destruct this page in 5 seconds Enter the number of seconds until self destruction... and then run. <input type="text" id="time" aria-labelledby="label time seconds" aria-describedby="instructions">

27 Happy Unaware Aware Sad <input type="button" value="choose" onclick="showmessage('happy', 'aware');" aria-labelledby="happy aware">

28 Name Age Phone <input type="text" name="name" aria-labelledby="namelabel">

29 Name Age Phone Jared Jonathan Cyndi <input type="text" name="age1" aria-labelledby="jared agelabel">

30 ARIA Live Regions aria-live="off polite assertive" aria-busy aria-atomic - read the entire region or only what has changed aria-relevant - additions, removals, text, or all aria-controls Special live regions: alert (important), status (not important), timer (always changing), marquee(same as arialive="polite"), and log (updates added to the bottom)

31 ARIA Live Regions Some highly dynamic content updates simply cannot be made accessible using ARIA Give users control over content updates

32 Odds & Ends <div role="list" aria-describedby="listheader"> <div role="listitem"> <p id="question">what is the air-speed velocity...</p> <div role="radiogroup" aria-labelledby="question"> <a aria-haspopup="true">open dialog</a> <a aria-expanded="false">view details</a>

33 Odds & Ends <ul role= menu > <div role= tablist tab tabpanel > <table role= grid > etc.

34 ARIA Design Patterns for Widget Interaction jquery Components:

35 HTML5 Adds new features - primarily for application development and enhanced semantics Maintains backward compatibility (mostly) Defines error handling for browsers Drops all most presentational markup

36 HTML5 Simplifications Why make authors do something the browser can do for them? Things that actually work matter most.

37 HTML5 DOCTYPE <DOCTYPE html> The last DOCTYPE you ll ever use? HTML versions vs. HTML the living standard HTML5 is very much still in progress

38 HTML5 Simplifications <html xmlns=" lang="en" xml:lang= en"> vs <html lang="en"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> vs <meta charset="utf-8">

39 HTML5 Simplifications <link rel="stylesheet" href="styles.css" type="text/css" /> vs <link rel="stylesheet" href="styles.css" /> <script type="text/javascript"> vs <script> <style type="text/css"> vs <style>

40 The Smallest Valid Accessible HTML5 Document <doctype html> <html lang=en> <meta charset=utf-8> <title>blah</title> <p>i'm the content HTML5 allows browsers to do much of the work. Just because you can, doesn t mean you should.

41 New HTML5 Elements <nav> <header> <main> (one per page) <footer> <article> <section> <aside> and more

42 HTML5 - ARIA Role Mappings <nav> - role="navigation <header> - role="banner" <main> role="main" <footer> - role="contentinfo" <article> - role="article" <aside> - role="complementary"

43 HTML5 Sectioning Elements <section>, <article>, <aside> and <nav> Each should generally begin with a heading that describes that section <article> is self-contained, syndicatable The outline presented to the user may be different than the heading structure defined.

44 HTML5 Accessibility Changes alt attribute is optional when <figcaption> presents an equivalent alternative for an image within a <figure> Dropped longdesc (subject to change) Dropped table summary ARIA markup is valid <video> and <audio> natively support captioning

45 New HTML5 Input Types search, number, range, color, url, , tel, date, month, week, time, datetime, datetimelocal The browser can (or, more accurately, hopefully will) provide a natively accessible control/interface New form attributes - required, pattern, autocomplete, placeholder, autofocus, etc.

46 Questions? Jared Smith

Introduction to ARIA and HTML5. Jared Smith & Jonathan Whiting webaim.org

Introduction to ARIA and HTML5 Jared Smith & Jonathan Whiting webaim.org Requiring JavaScript is not an accessibility question it s a general usability question WebAIM Surveys of Users with Disabilities