RE: Exposing multiple banner roles

I think one of the primary confusions relating to role='banner' is the role name itself.

This is largely a terminology conflict.


Most standard developers see that role="banner" is meant to identify these areas on a page, because of this word, and a web page may contain many banners like this.

The role would be much clearer if it matched the HTML5 name for this.

-----Original Message-----
From: Léonie Watson [] 
Sent: Tuesday, February 09, 2016 4:13 AM
Subject: Exposing multiple banner roles

The topic of discussion on the APG call yesterday, was whether we should allow multiple instances of role="banner" within a document [1]. The example being discussed was a facebook page [2].

The scenario: there is a region of content that contains information about Beat Children's Theatre. It has two images followed by a heading, then some other content. I think the argument is that this region should be exposed as a banner because there is no other convenient way to navigate to the start of it.

I'm hesitant to use a single example as a basis for changing a spec, but apparently this is a common pattern on the web. With this particular use case, the navigation problem could be solved without exposing an additional banner role.

The first of the two images before the heading has an improbably long alt text (500+ words). The alt text contains information (performance dates, theatre location., cast and crew listing) that is not available in the image itself. The result is that for screen reader users there is a substantial amount of content before the heading, making the heading an impractical navigational hook. Giving the image a reasonable alt text would make a significant difference.

The heading itself could be moved before the two images. This would not seriously impact the visual presentation of the content.

If a landmark was absolutely needed, then the region role could be applied to the containing <div> and a suitable label provided.
Part of the argument was that this region of content represented a "site within a site". I'm not convinced this is a distinction many people would naturally make, but if someone really wanted to represent it in this way, then applying the document role on the parent <div> and then using the <header> element therein would do the trick.

Conceptually, a single header, main and footer for each page makes sense. I think that exposing multiple banners within a single document will rapidly make pages much less usable for screen reader users.


@LeonieWatson Carpe diem

Received on Tuesday, 9 February 2016 17:22:06 UTC