WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: placement of bread crumbs after <h1>

for

Number of posts in this thread: 3 (In chronological order)

From: Angela French
Date: Fri, Apr 03 2015 11:44AM
Subject: placement of bread crumbs after <h1>
No previous message | Next message →

We are reviewing a new design for our website from our contractors.

A test page can be seen here http://sbctc.edu/redesign/high-school.html

I'm wondering about the location of the breadcrumb navigation. I already have documented that it needs a <nav> tag around it, but I'm wondering about it's placement after the <h1> heading. It LOOKS nice to me as a sighted person to have that nicely styled h1, but semantically, it seems weird to have navigation after the <h1>.

I'd be interested in your opinions as to whether this is truly an accessibility issue, or just a little odd.

Thank you,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.checkoutacollege.com<;http://www.checkoutacollege.com>;
www.sbctc.edu<;http://www.sbctc.edu>;

From: Paul J. Adam
Date: Fri, Apr 03 2015 11:59AM
Subject: Re: placement of bread crumbs after <h1>
← Previous message | Next message →

I'd recommend the breadcrumbs be placed above the Main Content H1 as that's the standard convention I've noticed on the web.

Also recommend, role="navigation" aria-label="Breadcrumb".

<div class="breadcrumb" role="navigation" aria-label="Breadcrumb"><a href="#">Home</a> &gt; <a href="#">Becoming a Student</a> &gt; High School</div>


Paul J. Adam
Accessibility Evangelist
www.deque.com <http://www.deque.com/>;
> On Apr 3, 2015, at 12:44 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>
> We are reviewing a new design for our website from our contractors.
>
> A test page can be seen here http://sbctc.edu/redesign/high-school.html
>
> I'm wondering about the location of the breadcrumb navigation. I already have documented that it needs a <nav> tag around it, but I'm wondering about it's placement after the <h1> heading. It LOOKS nice to me as a sighted person to have that nicely styled h1, but semantically, it seems weird to have navigation after the <h1>.
>
> I'd be interested in your opinions as to whether this is truly an accessibility issue, or just a little odd.
>
> Thank you,
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.checkoutacollege.com<;http://www.checkoutacollege.com>;
> www.sbctc.edu<;http://www.sbctc.edu>;
>
> > > >

From: Jonathan Avila
Date: Fri, Apr 03 2015 1:39PM
Subject: Re: placement of bread crumbs after <h1>
← Previous message | No next message

> I'd recommend the breadcrumbs be placed above the Main Content H1 as that's the standard convention I've noticed on the web.

I agree it frustrating for screen reader users when you move to the main section or the h1 and have many links and share widgets to pass by before getting to the article content.

Jon


> On Apr 3, 2015, at 2:00 PM, Paul J. Adam < = EMAIL ADDRESS REMOVED = > wrote:
>
> I'd recommend the breadcrumbs be placed above the Main Content H1 as that's the standard convention I've noticed on the web.