Relationship between breadcrumb and node-title in Garland

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Everett Zufelt's picture
Posted by Everett Zufelt on March 14, 2010 at 6:30pm

I was playing around with Drupal 7 today and added the Recent Content block the the Highlighted Content section of Garland. An example of this setup can be found at http://zufelt.ca/events/Attending-Drupalcon-SF2010-San-Francisco-April-1...

I notice that Garland outputs the content of this page in the following order

  1. Navigational links
  2. Breadcrumb
  3. Recent Content
  4. Node-title / main content

As there is a meaningful relationship between the last element of the breadcrumb and the node-title it seems like having the markup for the highlighted content region output between these two is not the best for semantics or for accessibility. Being blind I don't have a good sense of the visual relationship between these elements, or of the focus flow issues that may occur if changes are made.

Categories:

Comments

Visual Layout of Your Page

Posted by billsdesk on March 15, 2010 at 4:40am
billsdesk's picture

To understand what happened, I am going to try a describe the visual layout to you. At the top the page is the header, which includes the "skip to content" link and your blog title. The left sidebar contains the navigation menu and the search block. The content section, which is directly to the right of the left-sidebar, contains the breadcrumb, the recent content block, and then the main content in a vertical order.

If you had put the Recent Copmments in the left sidebar, it would have appeared above the breadcrumb, along with the navigation menu and search dialog box. Immediately after the breadcrumb would be the main content.

While I don't have Drupal 7 installed, I think there must be a a horizontal row of regions above the left sidebar and content regions. The breadcrumb does not appear as a block in its own region, but is part of the header area. Thus, when you put the recent comment block in the region above the comments, you actually ended up with the output appearing as you described it.

Themes determine the order of the regions. For example, some themes have the left sidebar appearing below the content, when you see it without CSS, or in a screen reader. My quick check is just to turn off CSS, so that I can view the order in which the regions will appear to a screen reader.

@billsdesk Thanks for the

Posted by Everett Zufelt on March 15, 2010 at 5:01am
Everett Zufelt's picture

@billsdesk

Thanks for the comment.

It would seem to me that there is a problem if the breadcrumb and main-content are separated by the Highlighted content region. As AFAIK, there is a final relational separator ">" at the end of the breadcrumb, which I think should be creating a relationship between the breadcrumb and the node-title.

I can think of two ways to solve this.

  1. Put the breadcrumb after the Highlighted Content region.

  2. Add the node-title to the end of the breadcrumb in theme_breadcrumb()

Accessibility Consultant & Web Developer - Zufelt.ca
@ezufelt on Twitter | LinkedIn profile

Breadcrumb settings for Zen theme

Posted by Frank Ralf on March 15, 2010 at 4:21pm
Frank Ralf's picture

Hi Everett,

The Zen theme provides two options on its settings page for the breadcrumbs:

1) Append a separator to the end of the breadcrumb.
Useful when the breadcrumb is placed just before the title.

2) Append the content title to the end of the breadcrumb.
Useful when the breadcrumb is not placed just before the title.

hth
Frank

Frank

My LinkedIn profile

Answer to your questions

Posted by billsdesk on March 15, 2010 at 10:58am
billsdesk's picture

I did a site wide search on breadcrumbs, and there is a lot of discussion about this topic. In regards to your possible solutions:

  1. Where the breadcrumb appears in regards to the regions on a page varies from theme to theme. It varies both in regards of visual spacial layout, and how it appears to screen readers. I use the WAVE toolbar in my browser to turn off CSS. To get a better understanding of your view, I turned off the CSS on the block management page, It provides an interesting view of how the regions are layed out to a screen reader. Since the breadcrumb is not spatially tied to the main content, the two can be easily separated by other regions.
  2. The "Custom Breadcrumb" module does have a development release for Drupal 7. This module allows you to configure the breadcrumb, including adding the node name to the breadcrumb.

Thanks

Posted by Everett Zufelt on March 15, 2010 at 11:06am
Everett Zufelt's picture

@billsdesk

Thanks for the recommendation of the Custom Breadcrumb module. However, I'll clarify here that I am not really concerned about my site in particular, as much as I'm concerned that core themes are highly semantic and highly accessible.

Accessibility Consultant & Web Developer - Zufelt.ca
@ezufelt on Twitter | LinkedIn profile

Accessibility

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week

See all hot content.