Category: HTML5

Useful Links: Teacher tools, Håkon talks, OpenStudy

7 Fantastic Free Social Media Tools for Teachers is an excellent resource from Mashable.

The Father of CSS Talks HTML5 is an interview with Håkon Wium Lie.

OpenStudy is a new idea that has joined up with MIT Open Courseware to create an interactive social environment for online college classes. They started small with only 3 courses – one of them Intro to Computer Science – and the response has been huge. This is a trend to watch in education, I think it’s going to be significant to educators and students.

ARIA Roles 101

See Also: ARIA States 101

As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless.

ARIA specifies the following:

  • Roles to describe the type of widget presented, such as “menu,” “treeitem,” “slider,” and “progressmeter”
  • Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
  • Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.
  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
  • Properties for drag-and-drop that describe drag sources and drop targets
  • A way to provide keyboard navigation for the Web objects and events, such as those mentioned above

This article will look at the first two items dealing with ARIA roles.

How to use roles

As the list mentioned, roles describe widgets and structure. Structural roles are added to markup as attributes of elements. In XHTML, for example:

<div id="header" role="banner">
<div id="nav"  role="navigation">

or in HTML5

<header role="banner">
<nav role="navigation">

Roles used in ways like the preceding examples are navigation aids for machine readers and for assistive devices such as screen readers.

Roles that describe widgets are added to markup with additional information. The role in the example below identifies the element as a slider, with additional values using the aria prefix prepended to the property name. For example, in a slider widget that allows the user to select the day of the week, the values 1 – 7 indicate the days of the week. The first day of the week, number 1, is Sunday. The aria-valuemin and aria-valuemax restrict the options in the slider to 1 – 7.

<div role="slider"
aria-valuenow="1"
aria-valuemin="1" aria-valuemax="7"
aria-valuetext="Sunday"></div>

List of roles

The W3C list of roles is quoted below. Links go to further definitions of each role on the W3C site.

Roles that act as standalone user interface widgets or as part of larger, composite widgets.

Roles that act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets.

Roles that describe document structures that organize content in a page.

Roles that act as navigational landmarks

Additional Resources

Useful links: HTML5 shiv, HTML5 accessibility, $20 million for ed tech, CSS hacks?

HTML5 enabling script, more commonly called the HTML5 shiv, will get IE versions less than 9 to recognize new HTML5 elements such as article. From Remy Sharp.

Steve Faulkner has built some tables showing HTML5 Accessibility support in various browsers. Even more important than the supported features table is the workarounds page, which shows how to make some of the HTML5 elements accessible with simple steps like the addition of ARIA role attributes to elements or the addition of accessible widgets to a page.

Bill Gates Announces $20 million program to expand educational technology at ReadWriteWeb is a must read.

This multi-year project aims to help improve both college readiness and college completion in the U.S. through the use of technology. Administered through the nonprofit EDUCAUSE, the program will provide grants to organization that will help develop technology tools to more teachers, students, and schools.

Get the specific details on applying for the funds at EDUCAUSE and about the RFP process from Next Gen Learning.

Conditional stylesheets vs CSS hacks? Answer: Neither! from Paul Irish is a fresh approach to a problem that has hampered web developers for a long time.

Useful Links: Molly talks, Tech=happy, GHC10

An interview with Molly. She talks HTML5 and more. Mehul talks with Molly Holzschlag at the recent Heartland Developer’s Conference in Omaha, Nebraska. Towards the end she gets philosophical and explains some big ideas about what it all means.

Why Technology Makes Me Happier at dare to dream is worth a read.

The Grace Hopper Celebration of Women in Computing is going well. Here are a couple of tweets from the event.

GHC 2010 stats: 960 students, 2147 attendees, 280 schools, 29 countries, 630 speakers, and infinite fun! #ghc10Wed Sep 29 22:28:50 via Twitter for iPhoneSummer-Mistine
summerMistine


Love it! Apparently lots of technical women have offered to help fix the conference hotel internet problems! #ghc10Thu Sep 30 12:51:24 via Twitter for AndroidMegan Olsen
umasshokie

An example of HTML5 markup

From the doctype to new elements, HTML5 in many ways is a simplification as well as an addition to what can be done with HTML. Here’s an example HTML5 page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<hgroup>
<h1>Main Heading</h1>
<h2>Secondary Heading</h2>
</hgroup>
<nav>
<ul><li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li></ul>
</nav>
</header>
<section>Content, which might include headings, paragraphs, article elements each with a header and footer if desired and other material such as figure and figcaption or form elements.</section>
<section>other sections if needed</section>
<aside>secondary content</aside>
<footer>footer content</footer>
</body>
</html>

A few comments on what you see. The doctype is simplified (See The HTML5 doctype). The language declaration is simplified, the link to the stylesheet no longer needs a type attribute.

New elements have more semantic names, providing more meaning than the generic <div>. The <header> and <footer> elements can be part of the entire page, plus part of <section> or <article> elements. The <hgroup> element nested in a <header> can be used when more than one level heading is needed as a title. (See: Document outlines in HTML 5 and The new hgroup element) The <aside> element can contain secondary content similar to what is now placed in a secondary sidebar div.

See also:

A funny geek tweet

First Jeffrey couldn’t get into his room at the conference hotel.

I didn’t think much about it. Normal travel woes.

They apologized & swore my room would be ready in 2 hours. I came back 2.5 hrs later. Now they promise it will be ready in an hour.Tue Sep 14 18:38:24 via TwitterrificJeffrey Zeldman
zeldman

But . . . Matt took notice and figured out the problem.

@zeldman You must have booked the HTML5 suite. They say it’s ready now, but it won’t be completed until 2022.Tue Sep 14 19:48:06 via TweetDeckMatt May
mattmay

Bwaahahaha, Matt. Good one.

Useful Links: PowerPoint, Microformats in HTML5, dConstruct audio

PowerPoint Accessibilty at WebAIM tells you how to create an accessible PowerPoint presentation. The news for Mac users is not good.

Extending HTML5 – Microformats at HTML5 Doctor is a must read and explains the “wrinkles.”

As most microformats use only class and/or rel — basic parts of HTML that remain unchanged in HTML5 — these microformats are completely fine in HTML5. Yay! However there are a few wrinkles to keep us on our toes.

While you’re there, be sure to read the comments, too. They are important.

dConstruct 2010 is Jeremy Keith’s report on the recent conference. Included are links to the talks from the event and links to other bloggers reports on the event.