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

Aaron Gustafson

SemanticsAccessibility Forms&5HTML

HTML5 provides more control

Paves the cowpaths we’ve carved on the web

The process is ongoing, however, so watch your step

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

Then & now

<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

Then & now

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

The original “figure” microformat.

Then & now

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

The original HTML5 figure.

Then & now

<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

Then & now

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

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

Oldies but goodies

aabbraddress area

blockquote

button

caption

col colgroup

dfndiv

fieldsetformh1 h2 h3 h4 h5 h6

headhtml

iframe img

inputins

labellegend

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

tabletbody

textarea

tfootth

basebdo b

hr menusmall

strongsup

New & revisited

aabbraddress area

blockquote

button

caption

col colgroup

dfndiv

headhtml

iframe img

inputins

labellegend

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

tabletbody

textarea

tfootth

basebdo b

hr menusmall

strong

articleaside

audiocanvas

commanddatalist

details

figcaptionfigurefooterheader

hgroupkeygen

mark meter

output progress

section

source

summary

Our focus today

aabbraddress area

blockquote

button

caption

col colgroup

dfndiv

headhtml

iframe img

inputins

labellegend

noscriptobject ol

optgroupoption

pparam

pre q samp

script

selectspan

tabletbody

textarea

tfootth

basebdo b

hr menusmall

strong

articleaside

audiocanvas

commanddatalist

details

figcaptionfigurefooterheader

hgroupkeygen

mark meter

output progress

section

source

summary

Cha-cha-cha-changes...

and are back

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

and got adjusted

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.

turned to the dark side

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

got clarified

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>

got resurrected

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>

found meaning

hrThe hr elementRepresents a paragraph-level thematic break.

HTML5 offers many new options for building documents

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 article

Organization: & section article

section

section > article

article

article > section

The header elementRepresents the header of a section.

The footer elementRepresents the footer of a section.

Organization: & header footer

header

footer

article

article > header

article

article > footer

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

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

</article>

Organization:aside

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).

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>  </table></figure>

Organization:figure

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

Document outlines

in HTML5

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

Explicit sectioning

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

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

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

Enter the

1 Title

hgroup

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

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

New elements

to consider

audiovideocanvas(plus object & embed)

Multimedia

audiovideocanvas(plus object & embed)

Stick around to hear Molly speak on these.

Multimedia

The time elementRepresents a date and/or time.

Nailing down a time

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

Nailing down a time

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

Nailing down a 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

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

HTML5 supports ARIA out of the box

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

All the site’s a play...

Landmark roles

Landmark roles

Landmark roles

Landmark roles

Landmark roles

Landmark roles

Landmark roles

Landmark rolesapplicationbannercomplementary

contentinfoformmain

navigationsearch

Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroup

headingimglistlistitemmathnote

presentationregionrowrowheaderseparator

Structural roles

Widget roles

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

Widget roles

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

Widget roles

<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>

Widget rolesalertalertdialogbuttoncheckboxcomboboxdialoggridcelllinklog

marqueemenuitemmenuitemcheckboxmenuitemradiooptionprogressbarradioradiogroupscrollbar

sliderspinbuttonstatustabtabpaneltextboxtimertooltiptreeitem

Widget Container Rolesgridlistboxmenu

menubartablisttoolbar

treetreegrid

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

Widget states

B(off)

Widget states

B(off)

Widget states

B(off)

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

With HTML5 you can

build more usable forms

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

Safari

numberA UI control for selecting a number.

rangeA UI control for selecting an imprecise number.

New input types: numbers

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

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

New input types: search

my search terms x

colorA UI control for selecting a color.

New input types: color

#EC4D0E

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

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

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

Value controls

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>

Which path will

you take?

Aaron Gustafson

SemanticsAccessibility Forms&5HTML

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

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

Technology

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

OXFORD BIBLIOGRAPHIES IN LINGUISTICS … Vries Relative Clauses.pdfrelative clauses introduction general overviews cross-linguistic typology the accessibility hierarchy semantics of

Media Semantics Character Builder User’s Guide · animation in HTML5, Flash, and Video formats. ... downloaded from the Media Semantics site. The Character Builder is more than

3 Semantics, structure, and APIs of HTML documents — HTML5

A Legal Knowledge Graph for Improved Law Accessibility...A Legal Knowledge Graph for Improved Law Accessibility Erwin Filtz, Martin Beno, Sabrina Kirrane, Axel Polleres WU Vienna Semantics

Adding Semantics to Enrich Public Transport and ... · Adding Semantics to Enrich Public Transport and Accessibility Data from the Web Paloma Cáceres, Almudena Sierra-Alonso, Belén

State of Media Accessibility in HTML5

HTML5 Accessibility

PowerPoint Presentation · HTML5 Semantic Elements / Information Architecture / Navigation Essentials of Web Design CSCI 1210 Class Today •Bootstrap Videos •HTML Semantics •Information

Hans Hillen (TPG) Steve Faulkner (TPG) 02 / 25 / 13 Accessibility of HTML5 and Rich Internet Applications - CSUN 2013 1.

Microsoft’s Browser Roadmap€¦ · HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 track HTML5 video and audio JavaScript

Adobe RoboHelp (2017 release) RoboHelp (2017 release) ... Add favorites in Responsive HTML5 layouts Greater content accessibility ... FLV video support 3D models

HTML5 Multimedia Accessibility

Essentials of Developing Windows Store Apps using HTML5 ... · 5/12/2013 · You are developing a Windows Store app by using HTML5. The app will be optimized for accessibility. The

Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems

HTML5 and ARIA accessibility - Bangalore 2013

Accessibility of HTML5 and Rich Internet Applications (Part 2)

HTML5 accessibility is it ready yet? Steve Faulkner & Hans Hillen The Paciello Group (TPG)

Using ARIA and HTML5 to Enhance the Accessibility of ... · Using ARIA and HTML5 to Enhance the Accessibility of Modern Web Pages and Applications Jared Smith, Karl Groves, and Billy

HTML5 Accessibility Support (2013)

Accessibility of HTML5 and Rich Internet Applications - CSUN 2012