Category: HTML5

Dear Subscribers

Dear Subscribers to this blog,

Thank you for being interested in what Web Teacher has to offer. I really appreciate it.

Are you reading Web Teacher posts in a feed reader of some sort? Perhaps Google Reader. That’s what I use to subscribe to the many, many blogs I read daily.

The benefit of a feed reader is that it’s a simple thing to get all your blog posts in one place each day. The drawback – at least for people like me who allow the full post to be read in the reader – is that folks don’t click through to actually visit the blog very often. Anything not in a post – for example, items in the sidebar – don’t get seen. Since I’m not eliminating everything but the posts from this blog like Jeffrey Zeldman, I’d like to remind you of some of the goodies available in the sidebar.

First, there’s a link to HTML5 News. I know you are interested in keeping up with that topic. I spend time each day making sure you have the latest information about HTML5 in that news report. You can keep track of it by visiting this blog, or by subscribing to the HTML5 News.

The sidebar also shows the latest tweets from the Twitter list The Women in Web Education Daily. The tweeters on this list can help you stay up to date on each days hottest web education and tech news.

The last thing I want to remind you about that sits in the sidebar is a link and slideshow to the group on Flickr called Women in Tech. Readers of this blog attend many tech events each year, and take many photos at those events. I hope you will remember that this Flickr group pool of photos of women in tech exists, and that you add your photos to the group pool.

Drop by once in a while. See what’s going on in the sidebar.

Thank you so much for reading this blog,

Virginia

 

Improve Accessibility in HTML5 with WAI-ARIA Landmark Roles

html5 logo

HTML5 contains several new elements that are considered semantic in that they more accurately describe the content they contain than a generic element such as a div.

These new elements improve accessibility as standalone structure, because of the semantic underpinnings they carry with them. The elements in question are: header, footer, main, section, article, aside, and nav. Simply using them without any additional coding such as the WAI-ARIA landmark roles I’m going to describe today is an improvement.

The roles I’ll describe are banner, complementary, contentinfo, form, main, navigation, search. The names make the role pretty obvious, but some roles have fine points.

The header element

In HTML5, the header element can be used repeatedly on a page. It can be the main header for the entire page, or a header for a subsection of the page such as a section or an article or an aside.

If the header element is used at the main header for the entire page, the role banner can be assigned to it. Only one header on a page can have the role banner.

<header role="banner"> . . .</header>

Within the page there may be header elements used as article or section or aside headings. The ARIA role that can by used in that case is heading.

<article><header role="heading">Article heading</header>Article body</article>

The heading role can also be used in tables.

The footer element

In HTML5, the footer element can be used repeatedly on a page. It can be the main footer for the entire page, or a footer for a subsection of the page such as a section or an article or an aside.

The main page footer can use the role contentinfo. But footer elements for subsections of a page may not use this role. It can only be used once on a page.

<footer role="contentinfo"> footer for entire page</footer>

Depending on what kind of information is included in the footer for articles or other smaller page sections, the footer might be appropriately labeled with the complementary role.

<footer role="complementary"> informative footer for an article</footer>

 The aside element

The aside element is meant for complementary material, not crucial to the page content, but supplementary. Therefore the complementary role is perfect for it.

<aside role="complementary"> supplemental content</aside>

Main, Navigation, Form and Search

You’ve seen how simple it is to assign a role to an element, so I’ll stop giving code examples. There are just a few points about the roles main, navigation, form and search. It seems self-evident when to apply navigation, form, and search to page elements. But main is another role that can only be used once on a page to indicate the main content, which might be contained in a main, div or section element. Using the main role properly eliminates the need for those “jump to main content” links that were so prevalent for a while on the web.

ARIA Roles are not only for HTML5

The last point to keep in mind is that ARIA roles work in all flavors of HTML. They do not depend on the use of HTML5 to make your web page accessible. Even if you are not ready to switch to HTML5, you should begin using ARIA roles.

See Also: ARIA Roles 101 and How to Make HTML5 Semantic Elements more Accessible.

Useful links: Polyfilitis, Erections, Privacy

Stop solving problems you don’t have is about not starting an HTML5 project with all sorts of polyfils built into your basic template that may never be needed or used. I’m calling it Polyfilitis.

Dear Technology World – Please Stop Trying to Give Me an Erection is by Terence Eden. Terence Eden is my new favorite person. Three cheers to Terence Eden!

The Philosopher Whose Fingerprints Are All Over the FTC’s New Approach to Privacy is at the Atlantic and is something everyone should read. Here’s a quote:

. . . it’s important to understand how what she’s saying is different from other privacy theorists. The standard explanation for privacy freakouts is that people get upset because they’ve “lost control” of data about themselves or there is simply too much data available. Nissenbaum argues that the real problem “is the inapproproriateness of the flow of information due to the mediation of technology.” In her scheme, there are senders and receivers of messages, who communicate different types of information with very specific expectations of how it will be used. Privacy violations occur not when too much data accumulates or people can’t direct it, but when one of the receivers or transmission principles change. The key academic term is “context-relative informational norms.” Bust a norm and people get upset.

Deciding when to switch to HTML5 when teaching

Lately the instructors who teach various HTML type courses in the Continuing Education program where I teach have been debating whether to switch over to HTML5 as the default HTML class. Part of this is driven by the fact that the new Visual QuickStart Guides that we use for instruction are now about HTML5.

The consensus has been to go slow.

  • change the basic XHTML class to simply HTML, and include some HTML5
  • continue to teach a separate HTML5 class apart from the basic HTML classes where HTML5 support and cross-browser issues are addressed
  • to use these best practice recommendations for syntax

Are you still teaching XHTML as the default doctype, or have you moved to HTML5 with caveats and warnings?

Useful links: responsive navigation, nerd love, Facebook Brand Pages, Hiding Content

Responsive navigation looks at the pros and cons of several types of responsive design navigation options.

Introducing Nerd Love. If you are a nerd with a love story to tell, you may be interested in this new project.

Facebook Brand Pages. An interesting look at eye tracking data on how the new Facebook Brand Pages are going to change things.

Places it’s Tempting to Use display: none, but Don’t. Good article about getting things out of sight without making them inaccessible.