HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

112
Aaron Gustafson Semantics Accessibility Forms & 5 HTML

description

We'll cover all of the new tags, such as article and section and how best to implement them, along with ARIA attributes to enhance the accessibility of your pages. Webforms introduce new field types and built-in validation, saving you time due to not having to implement your own JavaScript validation.

Transcript of HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

Page 1: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

Aaron Gustafson

SemanticsAccessibility Forms&5HTML

Page 2: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

2

HTML5 provides more control

Page 3: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

3

Paves the cowpaths we’ve carved on the web

Page 4: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

4

The process is ongoing, however, so watch your step

Page 5: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Then & now

5

<fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption></fig>

The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html

Page 6: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Then & now

6

<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Photo of Albert Einstein</p></div>

The original “figure” microformat.

Page 7: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Then & now

7

<figure> <img src="photo.jpeg" alt=""/> <legend>Photo of Albert Einstein</legend></figure>

The original HTML5 figure.

Page 8: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Then & now

8

<div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Photo of Albert Einstein</p></div>

The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure

Page 9: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Then & now

9

<figure> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>

The current (dare I say final?) HTML5 figure.

Page 10: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Oldies but goodies

10

aabbraddress area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfndiv

dl dt

fieldsetformh1 h2 h3 h4 h5 h6

headhtml

i

iframe img

inputins

kbd

labellegend

li

link

map

meta

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

style

sub

tabletbody

td

textarea

tfootth

thead

title

tr

ul

var

basebdo b

cite

em

hr menusmall

strongsup

Page 11: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

New & revisited

11

aabbraddress area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfndiv

dl dt

fieldsetformh1 h2 h3 h4 h5 h6

headhtml

i

iframe img

inputins

kbd

labellegend

li

link

map

meta

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

style

sub

tabletbody

td

textarea

tfootth

thead

title

tr

ul

var

basebdo b

cite

em

hr menusmall

strong

articleaside

audiocanvas

commanddatalist

details

embed

figcaptionfigurefooterheader

hgroupkeygen

mark meter

nav

output progress

rprt

ruby

section

source

summary

time

video

wbr

sup

Page 12: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

Our focus today

12

aabbraddress area

blockquote

body

br

button

caption

code

col colgroup

dd

del

dfndiv

dl dt

fieldsetformh1 h2 h3 h4 h5 h6

headhtml

i

iframe img

inputins

kbd

labellegend

li

link

map

meta

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

style

sub

tabletbody

td

textarea

tfootth

thead

title

tr

ul

var

basebdo b

cite

em

hr menusmall

strong

articleaside

audiocanvas

commanddatalist

details

embed

figcaptionfigurefooterheader

hgroupkeygen

mark meter

nav

output progress

rprt

ruby

section

source

summary

time

video

wbr

sup

Page 13: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

13

Cha-cha-cha-changes...

Page 14: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

and are back

14

b i

<p>This presentation is about <b>HTML5</b>.</p>

The b elementRepresents a span of text offset from its surrounding content, but of no extra importance.

<p>The <code>b</code> and <code>i</code> elementshave been legitimized in HTML5. <i>Go figure.</i></p>

The i elementRepresents a span of text in an alternate voice or mood.

Page 15: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

and got adjusted

15

em strong

<p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p>

The em elementRepresents a span of text text with emphatic stress.

<p>Please fill out the form below. <strong>Note: allfields are required.</strong></p>

The strong elementRepresents a span of text of great importance.

Page 16: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

turned to the dark side

16

smallThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).

Page 17: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

got clarified

17

citeThe cite elementThe title of a cited work (e.g. a book, magazine, or journal).

<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p>

Page 18: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

got resurrected

18

menuThe menu elementRepresents a list of commands.

<menu> <li><a id="bold">Bold</a></li> <li><a id="italic">Italic</a></li> <li><a id="underline">Underline</a></li></menu>

<menu> <command icon="/i/icons/b.png" label="Bold"/> <command icon="/i/icons/i.png" label="Italic"/> <command icon="/i/icons/u.png" label="Underline"/></menu>

or

Page 19: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

found meaning

19

hrThe hr elementRepresents a paragraph-level thematic break.

Page 20: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

20

HTML5 offers many new options for building documents

Page 21: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

21

The section elementRepresents a section of a document, typically with a title or heading.

The article elementRepresents a section of content that forms an independent part of a document or site.

Organization: &

<section> <!-- pretty much anything can go here --></section>

<article> <!-- pretty much anything can go here --></article>

section article

Page 22: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

22

Organization: & section article

Page 23: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

23

section

Organization: & section article

Page 24: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

24

section > article

Organization: & section article

Page 25: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

25

Organization: & section article

Page 26: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

26

article

Organization: & section article

Page 27: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

27

article > section

Organization: & section article

Page 28: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

28

The header elementRepresents the header of a section.

The footer elementRepresents the footer of a section.

<header> <!-- titles, etc. go here --></header>

<footer> <!-- meta/supplementary information goes here --></footer>

Organization: & header footer

Page 29: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

29

Organization: & header footer

Page 30: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

30

header

Organization: & header footer

Page 31: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

31

Organization: & header footer

Page 32: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

32

footer

Organization: & header footer

Page 33: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

33

article

Organization: & header footer

Page 34: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

34

article > header

Organization: & header footer

Page 35: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

35

article

Organization: & header footer

Page 36: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

36

article > footer

Organization: & header footer

Page 37: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

37

The nav elementDemarcates a group of navigational links.

<nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p></nav>

Organization:nav

Page 38: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

38

Organization:nav

Page 39: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

39

nav

Organization:nav

Page 40: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

40

Organization:nav

Page 41: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

41

nav

Organization:nav

Page 42: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

42

The aside elementDemarcates content that is tangentially related to the primary content.

<article>

<!-- main content -->

<aside> <!-- something related --> </aside>

</article>

Organization:aside

Page 43: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

43

Organization:aside

Page 44: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

44

aside

Organization:aside

Page 45: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

45

The details elementA UI control for hiding optional content. Must contain a summary element, followed by other content.

<details> <summary>This is the visible description</summary> <p>This content would be hidden by default.</p></details>

Organization:details

It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org).

Page 46: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

46

The figure elementA unit of content (typically referenced by the primary content) that is self-contained. May contain a figcaption element and other content.

<figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption> <!-- a bunch of data --> </table></figure>

Organization:figure

<figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption></figure>

Page 47: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

47

Document outlines

in HTML5

Page 48: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

48

Implicit sectioning

<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...

<h2> W3C standardization process<p> The Web Hypertext Application...

<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...

<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...

A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5

1 HTML51.1 W3C standardization process1.2 Markup

Page 49: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...

<h2> W3C standardization process<p> The Web Hypertext Application...

<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...

<h2> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...

49

Explicit sectioning

A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5

sect

ion

sect

ion

1 HTML51.1 W3C standardization process1.2 Markup

Page 50: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...

<h1> W3C standardization process<p> The Web Hypertext Application...

<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...

<h1> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...

50

Explicit sectioning

A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5

sect

ion

sect

ion

1 HTML51.1 W3C standardization process1.2 Markup

Page 51: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

<h1> HTML5<p> HTML5 is currently under development...<p> Like its immediate predecessors, HTML...

<h4> W3C standardization process<p> The Web Hypertext Application...

<p> The HTML5 specification...<p> According to the W3C timetable...<p> Ian Hickson, editor of the HTML5...

<h6> Markup<p> HTML5 introduces a number of...<p> The HTML5 syntax is no longer...

51

Explicit sectioning

A snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5

sect

ion

sect

ion

1 HTML51.1 W3C standardization process1.2 Markup

Page 52: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

52

Section managementSectioning elementsCreate explicit sections in an outline.๏ section (obviously)๏ article๏ aside๏ footer๏ header๏ nav

Page 53: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

53

Outline limitations

1 Title1.1 Subtitle

<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...

<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...

Page 54: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

<h1> Title<h2> Subtitle<p> Text content continues...<p> Text content continues...<p> Text content continues...

<p> Text content continues...<p> Text content continues...<p> Text content continues...<p> Text content continues...

54

Enter the

hgro

up

1 Title

hgroup

Page 55: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

55

Section managementSectioning rootsEstablish a new outline.๏ body (obviously)๏ blockquote๏ details๏ fieldset๏ figure๏ td

Page 56: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

56

Rooted sections

1 Title1.1 Section heading

<h1> Title<p> Text content continues...<p> Text content continues...

<h2> Section heading<p> Text content continues...

<blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues...<p> Text content continues...<p> Text content continues...

Page 57: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

57

New elements

to consider

Page 58: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

58

audiovideocanvas(plus object & embed)

Multimedia

Page 59: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

59

audiovideocanvas(plus object & embed)

Stick around to hear Molly speak on these.

Multimedia

Page 60: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

60

The time elementRepresents a date and/or time.

Nailing down a time

Page 61: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

61

Nailing down a time

Page 62: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

62

time

Nailing down a time

Page 63: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

63

The time elementRepresents a date and/or time.

<time>October 25, 2010 8:11 PM</time>

Nailing down a time

Page 64: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

64

The time elementRepresents a date and/or time.

<time>October 25, 2010 8:11 PM</time>

<time datetime="2010-11-26T01:11:00-05:00"> October 25, 2010 8:11 PM</time>

Nailing down a time

Page 65: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

65

The time elementRepresents a date and/or time.

<time>October 25, 2010 8:11 PM</time>

<time datetime="2010-11-26T01:11:00-05:00"> October 25, 2010 8:11 PM</time>

<time datetime="2010-11-26T01:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>

Nailing down a time

Page 66: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

66

The mark elementRepresents a a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

<ol id="search-results"> <li> <h3><a href="...">Web Upgrade <mark>HTML5</mark> May Weaken Privacy</a></h3> <p>The new language, <mark>HTML5</mark>, could give marketers access to many more details about users' online activities.</p> </li></ol>

Highlighting content

Page 67: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

67

Highlighting content

Page 68: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

68

Highlighting content

Page 69: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

69

mark

Highlighting content

Page 70: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

70

Highlighting content

mark

Page 71: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

71

HTML5 supports ARIA out of the box

Page 72: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

72

Page 73: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

73

The role attributeDefines the part an element is playing (assuming it’s different than the semantics would otherwise imply).

<section id="main" role="main"> <!-- The primary content for the page would go here --></section>

All the site’s a play...

Page 74: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

74

Landmark roles

Page 75: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

75

<header role="banner">

Landmark roles

Page 76: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

76

Landmark roles

<nav role="navigation">

Page 77: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

77

Landmark roles

<form role="search">

Page 78: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

78

Landmark roles

<section role="main">

Page 79: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

79

Landmark roles

Page 80: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

80

Landmark roles

<footer role="contentinfo">

Page 81: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

81

Landmark roles

<nav role="navigation">

Page 82: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

82

Landmark roles

Page 83: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

83

Landmark roles

<aside role="complementary">

Page 84: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

84

Landmark rolesapplicationbannercomplementary

contentinfoformmain

navigationsearch

Page 85: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

85

Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroup

headingimglistlistitemmathnote

presentationregionrowrowheaderseparator

Page 86: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

86

Structural roles

<article role="article">

Page 87: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

87

<span role="button">OK</span>

Widget roles

Page 88: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

88

<span role="button">OK</span>

Widget roles

(of course <button>OK</button> would be better)

Page 89: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

89

<span role="button">OK</span>

Widget roles

(of course <button>OK</button> would be better)

<div role="alert"> <p>Something went wrong.</p></div>

Page 90: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

90

<span role="button">OK</span>

Widget roles

(of course <button>OK</button> would be better)

<div role="alert"> <p>Something went wrong.</p></div>

<div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /></div>

Page 91: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

91

Widget rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog

marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar

sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem

Widget Container Rolesgridlistboxmenu

menubartablisttoolbar

treetreegrid

Page 92: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

92

Widget propertiesaria-activedescendantaria-atomicaria-autocompletearia-controlsaria-describedbyaria-dropeffectaria-flowtoaria-haspopuparia-labelaria-labelledbyaria-levelaria-live

aria-multilinearia-multiselectablearia-orientationaria-ownsaria-posinsetaria-readonlyaria-relevant aria-requiredaria-setsizearia-sortaria-valuemaxaria-valuemin

Page 93: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

93

Widget states

<span> <img src="bold-off.png" alt="bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>

B(off)

B(on)

Page 94: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

94

Widget states

B(off)

B(on)

<span> <img src="bold-off.png" alt="not bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>

Page 95: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

95

Widget states

B(off)

B(on)

<span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /></span><span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /></span>

Page 96: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

96

Widget statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)

Page 97: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

97

With HTML5 you can

build more usable forms

Page 98: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

98

datetimeA UI control for selecting a date & time that includes timezone information.

datetime-localA UI control for selecting a date & time that does not include timezone information.

dateA UI control for selecting a date with access to all date components (day, month and year).

monthA UI control for selecting a date that provides access to month and year only.

timeA UI control for selecting a time that does not include timezone information.

weekA UI control for selecting a date that provides access to week and year only.

New input types: dates & times

Page 99: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

99

New input types: dates & times

<input type="date" name="dob"/>

Safari

Opera

Page 100: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

100

numberA UI control for selecting a number.

rangeA UI control for selecting an imprecise number.

New input types: numbers

Page 101: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

101

New input types: numbers

<input type="range" min="1" max="11" name="foo"/>

<input type="number" name="foo"/>

Page 102: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

102

emailA UI control for entering an email.

urlA UI control for entering a URL.

telA UI control for entering a telephone number.

New input types

Page 103: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

103

New input types

<input type="email" ... /> <input type="url" ... />

Page 104: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

104

searchA UI control for plain text editing of one or more search terms.

New input types: search

my search terms x

Page 105: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

105

colorA UI control for selecting a color.

New input types: color

#EC4D0E

Page 106: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

106

autocompleteTells the User Agent whether or not the value should be stored.

autofocusTells the User Agent to bring focus to the form control on page load.

formAn id reference to the form to which a given control belongs.

requiredIndicated the form control must be provided a value.

placeholderOffers users a short hint about the required value.

UI controls

Page 107: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

107

min & maxLower and upper boundary for an element value (dates, time, and numbers only).

stepThe granularity of values allowed (dates, time, and numbers only).

Value controls

<input type="range" min="1" max="11" step="0.5" .../>

Page 108: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

108

patternA regular expression pattern that the User Agent should validate the input against.

Value controls

<input type="text" pattern="\d{6}\w{3}" placeholder="6 digits followed by 3 letters" .../>

Page 109: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms HTML5 Online Conference — 1 November 2010

109

listAn id reference to a datalist element containing acceptable values.

Value controls

<input type="text" list="countries" name="country"/><datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --></datalist>

Page 110: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

110

Which path will

you take?

Page 111: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

Aaron Gustafson

SemanticsAccessibility Forms&5HTML

Page 112: HTML5 Semantics, Accessibility & Forms [Carsonified HTML5 Online Conference]

HTML5: Semantics, Accessibility & Forms! HTML5 Online Conference — 1 November 2010

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0

flickr Photo Credits“2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi

“IMG_6200” by pcutler“Construction material” by raisin bun

“TOC” by D'Arcy Norman“Dual Samsung Monitors” by steve-uk

112