Category: HTML5

Useful links: HTML5 questions, Smashing newsletter, WP plugins, teens

A few HTML5 questions that need answering is from Christian Heilmann.

Did you know Smashing Magazine has a newsletter? I just learned about it and think it might be pretty good. You might want to check it out, too.

A nice new WordPress plugin from doodlebee, aka @brassblogs, for those of you who set up WordPress sites for others and want to leave them some hints and reminders is Back End Instructions. Here’s some of the description of how it works.

Using WordPress’ default posting capabilities, mixed in with some custom post types and meta fields (and a little sprinkle of magic fairy dust and a lot of prayers), you can easily create and manage instructions for each page of the back-end of your client’s site. Simply create a post, associate the post with a page in the back-end, add in your content, and voilà: a small button appears at the top of the page that expands with jQuery to show a list of “instructables” (post title links) associated with that page.

Are you watching the new series The Chicago Code? This week the leading tip on solving a crime came from a tweeting teen. danah boyd talks about tweeting teens in Tweeting Teens can Handle Public Life with her usual research-based authority.

Useful links: alt, alt, alt

Five kinds of ‘alt’ text is from userfocus.

HTML5: Techniques for providing useful text alternatives at the W3C is an Editor’s Draft. Even though this is a working draft and may change, it is one of the clearest and best written things I’ve seen at the W3C. The editor on this one is Steve Faulkner from The Paciello Group.

WebAIM: Creating Accessible Images looks at alt text from the point of view of scenarios.

Useful links: Screen readers, Ada Initiative, HTML versioning

Videos of screen readers using ARIA at zomigi.com is enlightening. Watch.

The Ada Initiative is dedicated to increasing participation of women in open technology and culture, which includes open source software, Wikipedia and other open data, and open social media.

HTML as a Living Standard – For and Against is must reading at HTML5 Doctor. Taking on the two sides of the debate are Bruce Lawson and John Foliot.

Useful links: @acarvin, programmatic, HTML5 accessibility

If you’ve been watching events unfolding in Egypt on Twitter you are aware of what Andy Carvin from NPR has been doing in terms of collecting and broadcasting tweets. Here’s a good interview with him from My Heart’s in Accra: Interview with Andy Carvin on curating Twitter to watch Tunisia, Egypt.

“The phrase “programmatically determined” features prominently in six of the 61 WCAG 2.0 Success Criteria.” In Programatically Determined at Accessible Culture, you can find out what it’s all about. Here’s a key bit.

When content is properly marked up in HTML, its semantic structure and relationships are in the markup itself. That is, they can be programmatically determined. Because this information is in the code, as it were, supporting technologies can programmatically retrieve it and present it to users in different ways. The information can be transformed…into different sensory formats (e.g., visual, auditory) or styles of presentation needed by individual users. This is a key aspect of accessible web content and a core concept in WCAG 2.0.

Such information can then be passed along by the browser to whatever other device or software is able to make use of it. Screen readers, voice recognition software, alternative input devices, etc., can tell what each bit of content is and allow users to interact with them accordingly.

Read the comments, too. They are valuable.

HTML5 Accessibility Challenges by Steve Faulkner is a quick summary of some of the issues.

Useful links: LinkedInMaps, using HTML5, CSS3 logo, LinkedIn button, Foursquare badges, Blekko

Hubs and Connectors: Understanding Networks Through Data Visualization talks about LinkedInMaps. Very interesting stuff.

Get familiar with HTML5 at Opera Dev is another great post from Chris Mills that explains what HTML5 offers and why teachers should be using it now.

CSS3 gets a new logo is a new look at the HTML5 logo event. This whole versioning number/logo thing is getting pretty funny.

The LinkedIn Official Share Button – Why Should A College Care? explains why you should care.

Foursquare’s University Badges Now Available at All Colleges & Universities now available for every college and university around the world.

Blekko Bans Content Farms Like Demand Media’s eHow From Its Search Results The new search engine that promises no spammy search results takes a big step. Google is taking steps in a similar direction. Watch for an article from me about this tomorrow. (Or today, on BlogHer)

HTML5 & annotations for assistive technology

I was scrounging around in the HTML5 spec on the W3C site looking for something else and found an answer to a question I had asked about earlier on Web Teacher. In the section titled Annotations for assistive technology products (ARIA) I found the answer to my question about aria-level.

A table in the spec detailing the HTML5 language feature with its “strong native semantics and implied ARIA semantics” shows the following for h1 through h6 elements.

Native Semantic Element: h1-h6 element that does not have an hgroup ancestor
Implied ARIA semantics: heading role, with the aria-level property set to the element’s outline depth

So the answer is do include a value for aria-level in headings that are not nested in an hgroup. If the heading is part of an hgroup, include the aria-level attribute in the hgroup element.

The value associated with the aria-level would be dependent on the element’s position in the document outline.  Here’s an example with an hgroup:

<hgroup role="heading" aria-level="2">
<h1>Main heading</h1>
<h2>Subheading</h2>
</hgroup>

Without an hgroup:

<h1 role="heading" aria-level="2">

The entire table at W3C is very useful. I urge you to read the whole section on Annotations for assistive technology products (ARIA).