html5 & wai aria · angie radtke players whatwg „webhypertext application technology working...

Angie Radtke

HTML5 & WAI ARIAStructure documents

Building Webapplications

Angie Radtke

1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

2.0 3.2 4.0 4.01

XHTML1

XHTML1.1HTML5

XHTML1.1

WHATWG XHTML2

Angie Radtke

Players

WHATWG„WebHypertext Application Technology Working Group“

Founded by Apple, Mozilla, Opera in 2004Editor: Ian Hickson (google)25. April 2011 Living Standard HTML-Standard

Cartoon: http://cssquirrel.com/comic/?comic=23by Kyle Weems

Angie Radtke

Players

W3C2007 Based on the work of WHATWG

Goal: Stable Version of the Standard

Angie Radtke

New Features

Geo Location APIFirefox: Google Location Services

Example:

geo.html

Angie Radtke

Drag and Drop File-API

Example:

file-api.htm

New Features

Angie Radtke

Local Storage, Session Storage and Application Storage

New Features

Cookies:

20 a 4KB / Domain

Angie Radtke

CanvasA canvas, where we can dynamically

draw images via Javascript

Adobe Illustrator Plugin

http://visitmix.com/labs/ai2canvas/

New Features

Static Example

Animated Example1

Animated Example 2

Angie Radtke

New Features

Audio & VideoVideo format not clear:

licence problems ogg & mp4 depends on the browser

apple wants quicktime

Example:

http://html5demos.com/two-videos

Angie Radtke

Structure & Semantic

<!DOCTYPE html>

<meta charset="utf-8" />

Old: <meta http-equiv="content-type" content="text/html charset=utf-8" />

Angie Radtke

New Elements

section article aside canvas audio command datalist details embed figure figcaption header footer hgroup keygen mark meter nav output progress rt rp ruby source summary time video wbr sup

Angie Radtke

Old Elements - new meaning

<b> and <i> are backrepresents a span of text

no extra importance

<b>

Example: product name, keyword in an abstract,names in a review etc.

Angie Radtke

represents a span of text in an alternate voice or mood

typographic presentation italicized<i>

a technical term, an idiomatic phrase from another language, a thought etc.<p>The <i>Felis silvestris catus</i> is cute.</p>


Angie Radtke

represents stress emphasis of its contents

.

<em>

The placement of emphasis changes the meaning of the sentence

Joomla is <em> great</em>


Angie Radtke

represents so-called “fineprint”

<small>


e.g. disclaimers, caveats, etc.

Angie Radtke

represents strong importance for its contents

<strong>

<p><strong>Warning</strong> Don‘t drink too much german beer</p>


Angie Radtke

represents a paragraph-level thematic break

<hr>


scene change in a story or a transition to another topic within a section of a reference book

Angie Radtke

Elements used in beEz 5.0

headerfooternav article sectionaside hgroup

Angie Radtke

Headerrepresents a group of introductory or navigational aids

Angie Radtke

Footerrepresents the footer of a section

Angie Radtke

Navrepresents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Angie Radtke

sectionrepresents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading

Angie Radtke

articlea self-contained composition in a document example: news-article, blogpost

Angie Radtke

aSIDErepresents section of a page related to the main content

Angie Radtke

Outlin e algorithmus

Angie Radtke

Implicit sectioning

1 Fruitshop

1.1 Nav view search

1.1.1 Navigation

1.2 Welcome

<h1> Fruit Shop <p> ...<h2> Nav view search<p> ...<h3> Navigation<p> ...<h2> Welcome<p>...

Angie Radtke

Explicit sectioning

1 Fruitshop

1.1 Welcome

<h1> Fruit Shop <p> ......<p> ...

<h1> Welcome<p> ....<p> ...

section

Angie Radtke

hgrouprepresents the heading of a section. The element is used to group a set of h1- h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Angie Radtke

Forms- New input -types

New Attributes:i.e. required - automatic validation

http://dev.w3.org/html5/spec-author-view/the-input-element.html

search, tel, url, email, datetime, date, month, week, time ( without timezone), datetime-local, color

Angie Radtke

New global Attributes

http://dev.w3.org/html5/spec-author-view/elements.html#global-attributes

accesskey, contenteditable contextmenu, dir, draggable, dropzone, hidden, spellcheck, tabindex

Angie Radtke

WAI-Aria

Cite: WAI-ARIA, the Accessible Rich Internet Applications , defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

roles ,properties, states

Angie Radtke

Landmark Roles<form role=“search“>

<aside role=“contentinfo“>

<div role=“main“>

<nav role=“navigation“>

added via js in the DOM

Angie Radtke

Example : Beez-Tabs

<jdoc:include..... style=“beezTabs“ >

Angie Radtke

<a onclick="tabshow('module_65')return false" class="linkopen" href="#"id="link_65" aria-selected="true" role="tab" aria-controls="module_65" >About Fruit Shop</a>

<div class="tabcontent tabopen"aria-labelledby="link_65" aria-hidden="false"role="tabpanel" id="module_65" tabindex="-1" aria-expanded="true" >modulecontent<a id="next_65" onclick="nexttab('module_65')�return false�" class="unseen" href="#">Next Tab</a></div>

Angie Radtke

WAI ARIA

el.addClass('tabopen').removeClass('tabclosed')�

el.setProperty('aria-hidden', 'false')�

el.setProperty('aria-expanded', 'true')�

el.focus()�

var getid = elid.split('_')�

var activelink = 'link_' + getid[1]�

document.id(activelink).setProperty('aria-selected', 'true')�

.......

Angie Radtke

Overview: Landmark Roles

applicationbannercomplementarycontentinfo

formmain navigation search

Angie Radtke

Overview: Widget Roles

marquee

menuitem

menuitemcheckbox

menuitemradio

option

progressbar

radio

radiogroup

scrollbar

alert

alertdialog

button

checkbox

combobox

dialog

gridcell

link

log

slider

spinbutton

status

tab

tabpanel

textbox

timer

tooltip

treeitem

Angie Radtke

Widget Propertiesaria-activedescendant aria-atomic aria-autocomplete aria-controls aria-describedby aria-dropeffect aria-flowto aria-haspopup aria-label aria-labelledby aria-level aria-live

aria-multiline aria-multiselectable aria-orientation aria-owns aria-posinset aria-readonly aria-relevant aria-required aria-setsize aria-sort aria-valuemax aria-valuemin

Angie Radtke

Widget States

aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow aria-valuetext

html5 & wai aria · angie radtke players whatwg „webhypertext application technology working...

Documents