Category: WebStandards

Twitter Writes a Post about role=presentation

There is an ARIA role called “presentation” in the WAI ARIA spec. With Twitter’s help, Denis Boudreau wrote this post about it.

This is how it started:

Then @jsutt took up the idea with this:

Denis Boudreau to the rescue!

 

 

 

As you see, this ARIA role has specific and limited use. I wasn’t sure where a front end developer who was only working with semantic HTML would even consider using it.

 

Oh, at last the light dawns. This is what developers building apps sometimes need to do. Even at that, go back to point one about only using it when you really know what you’re doing and are absolutely sure you want to strip an element of its semantics.

Denis draws us to a sensible conclusion.

 

 

Jeffrey Zeldman: 20 Years of Web Design and Community

This is a wonderful film everyone should watch, especially young people just starting out making web sites who have not lived through the last 20+ years with Jeffrey as their spirit guide.

The film is one of a documentary series from Lynda.com.Thank you to lynda.com for making this one available in its full length free.

There are many other fascinating documentaries on creative topics at lynda.com/vimeo. You must be a paying member of lynda.com to watch them. If you are, I especially recommend that you also watch Creative Insights: Lauren Bacon on Web Design.

What are Implicit ARIA Roles?

For a while now, I’ve been seeing mentions of implicit ARIA roles as something web designers and developers should be aware of and know how to use.

In the case of ARIA roles, the word implicit means that the browser interprets certain HTML elements semantically and treats them as if an ARIA role were assigned to them. In these situations, the web designer does not specifically need to add the role attribute to the element. The addition of the ARIA role is considered redundant in some situations.

If you do add the role information, it does no harm, but, in my opinion, it’s best practice to know when you do need to add it and when you don’t.

For elements that have been around for a while, say the a (anchor) element, the browser implicitly assigns a role="link" attribute.

For the newer HTML5 semantic structural elements, browsers already have some of the roles built in. This improves as browsers add support. A header element that is not a descendant of an article or section element is implicitly assigned role="banner". A footer element that is not a descendant of an article or section element is implicitly assigned role="contentinfo". There are a number of other cases like this as browsers add support for HTML5. They are detailed at the W3C in two tables. This table shows strong native HTML semantics with default ARIA semantics. Just under it, this table lists the default implicit ARIA semantics for many other elements, along with any restrictions that apply.

In addition to the information at the W3C, check out this article by Steve Faulkner: HTML5 Accessibility Chops: When to use an ARIA role.

Why isn’t the main element in Dreamweaver CC’s Insert panel?

One of the arguments Adobe uses to convince all of us that we want to fork over a monthly subscription fee for Adobe products is that we get all the latest updates.

So why isn’t the main element among the choices in the Insert panel?

The main element represents the main content of the body of a document or application. By definition, the main element is for grouping content; it is not considered sectioning content. (Sectioning content includes elements such as article, aside, and section which are expected to have headings and possibly navs and footers. Sectioning content shows up in the document outline. The main element does not show up in the document outline.)

Where would Dreamweaver put main?

Is main a structural element in the Dreamweaver menu system? It seems to me that when you are building a page in Dreamweaver by inserting structural elements one by one, the main element should be one of your choices.

Here’s what Dreamweaver CC currently has in the Structure category of the Insert menu.

The Structure category of DW's Insert panel
The Structure category of DW’s Insert panel

There are some helpful HTML5  choices in that menu such as article, section, header, and footer. Why not main? Aren’t we paying the big bucks every month to have the latest goodies at our fingertips? All the new HTML5 elements should be available to Dreamweaver CC users.

Tips on using the main element

The main element can only be used once on a page. The ARIA role="main" is implicit where the main element is used.

Contrast Ratio: A New Color Contrast Tool

Here’s a very nice new tool for checking color contrast against WCAG 2.0 standards for accessibility. It was created by Lea Verou and is called Contrast Ratio.

The tool allows you to swap text color and background color. It permits the use of transparency in both text color and background color. If your color choices fail to meet the WCAG 2.0 standards, the ratio button in the middle of the page turns red. Hovering over the button tells you how many, if any, of the WCAG 2.0 standards your colors meet.

Hover over the middle button to see how you're doing
Hover over the middle button to see how you’re doing

Bump up the level of opacity a bit on this color scheme and it passes.

A passing color ratio
A passing color ratio

Directions on the page explain some fancy ways to change the values for text and background colors. These are fun and time saving, but the real value in the tool comes from the clear and obvious way it reports on how the colors test out against WCAG 2.0 standards.

Sections and Articles are Not Generic Containers

html5 logo

The proper use of section and article elements in HTML5 is one of the sticking points to good implementation. If you’re teaching HTML5, or just learning about HTML5, here’s a tip for you.

A section element (or an article element) should not be used as a container for styling purposes. However, any time you have some content that needs a heading or h1, h2, etc. at the beginning, sections and articles are semantic candidates for proper markup.

If what you are doing is wrapping something up in a container with an id or class that will be used for anything but content with a heading at the top, you should use a div. A div is, by definition, a generic container. It carries no semantic meaning. It needs no heading element. It is meant to hold blocks of the page for styling purposes.

The W3C offers this guidance:

Each section should be identified, typically by including a heading (h1-h6 element)as a child of the section element.

 

Each article should be identified, typically by including a heading (h1-h6 element) as a child of the article element.

Good Accessibility Talk to Watch (Video)

This is worth your time. It’s a talk by Monika Piotrowicz of Shopify. I like her instruction to use basic HTML whenever possible instead of putting something else in to overrule the semantics. Her explanation of ARIA is excellent.

The close captions aren’t great. They were generated automatically rather than from a transcript, but they do appear if you need them.

Hat tip to Dennis Lembree who shared this on Google+, which is where I first saw it.