HTML5 & WAI ARIA · Angie Radtke Players WHATWG „WebHypertext Application Technology Working...
Transcript of 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>
Old Elements - new meaning
Angie Radtke
represents stress emphasis of its contents
.
<em>
The placement of emphasis changes the meaning of the sentence
Joomla is <em> great</em>
Old Elements - new meaning
Angie Radtke
represents so-called “fineprint”
<small>
Old Elements - new meaning
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>
Old Elements - new meaning
Angie Radtke
represents a paragraph-level thematic break
<hr>
Old Elements - new meaning
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