Re: [WSG] Breadcrumb as Section Heading H1
you're right of course. I should use an OL and put the breadcrumb text as a heading. However I found this method to be the most compliant and easiest to implement, and it is understandable in most browsers. On 23 Feb 2006, at 20:55, Patrick H. Lauke wrote: Stephen Stagg wrote: For the benefit of Screen-readers and textmode browsers, I add a LI with the text 'breadcrumb' at the top of the list which is then hidden using CSS. It's not a perfect solution but it works. ul li class=firstBreadcrumb: / liaMenu Item 1// liaMenu Item 2// liaMenu Item 3// / As it's an unordered list, it implies that there is no particular order to the items...you could jumble them up at random and they'd still retain their meaning. This, of course, is not true for home paths / breadcrumb trails. The order is quite specific, so if lists are your thing, ordered lists should really be used. For the same reason, having the first item breadcrumb does not imply anything, as it's a sibling of the other list items...which is not the case. -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
Kevin Futter wrote: Anyway, for the benefit of others interested in this thread/topic, the upshot from the above link seems to be that the pipe character (|) is the best compromise currently available as a screen reader-friendly element separator. I profoundly disagree with that. The vertical bar is the worst thing you can use in a breadcrumb trail, regardless of how it reads in a screen reader. This is conventionally used on the web as a separator for sibling links, and it really doesn't work as a breadcrumb separator for sighted users. I don't think a list is appropriate markup for breadcrumbs and prefer the conventional You are in: home products foo Screen reader users in our user testing on sites with this construct had no problems with it reading home greater than products greater than foo, and reported that it was a very useful aid. You should not overlook the vital importance of the visual direction implied by the character. This is a crucial means of showing that it is a hierarchical relationship. Not all accessibility is about screen reader users after all. The conventional breadcrumb with is a working compromise which has proven to be a good tool in usable sites. Cheers Ian -- _ zStudio - Web development and accessibility http://zStudio.co.uk Snippetz.net - Online code library File, manage and re-use your code snippets links http://snippetz.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
On 23 Feb 2006, at 11:19, Ian Anderson wrote:
Kevin Futter wrote:
Anyway, for the benefit of others interested in this thread/topic,
the
upshot from the above link seems to be that the pipe character (|)
is the
best compromise currently available as a screen reader-friendly
element
separator.
I profoundly disagree with that. The vertical bar is the worst
thing you can use in a breadcrumb trail, regardless of how it reads
in a screen reader. This is conventionally used on the web as a
separator for sibling links, and it really doesn't work as a
breadcrumb separator for sighted users.
I don't think a list is appropriate markup for breadcrumbs and
prefer the conventional You are in: home products foo
I like to implement my bread-crumbs as an UL and then stylistically
add the 'visual direction' indicator using an image.
For the benefit of Screen-readers and textmode browsers, I add a LI
with the text 'breadcrumb' at the top of the list which is then
hidden using CSS. It's not a perfect solution but it works.
ul
li class=firstBreadcrumb: /
liaMenu Item 1//
liaMenu Item 2//
liaMenu Item 3//
/
ul li{
background:url(directional sliding doors graphic);
}
ul li.first{
background:url(terminating graphic);
text-indent:9000;
overflow:hidden.
}
you can see it at work at:
http://www.minimology.co.uk/gallery/www/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Breadcrumb as Section Heading H1
What are people doing to markup lists of links, like bread crumbs. There seems to be some consensus that UL and LI elements should be used for each link with CSS styling. But what about giving the list of links a title for use by screen reader users or people who are using technologies that do not support style sheets or have applied their own stylesheet, for example to improve readability for someone with low vision. Should a header (H2) be used or could the UL.TITLE attribute be used. Interested in peoples experience and opinions. Jon Original message Date: Thu, 23 Feb 2006 11:19:45 + From: Ian Anderson [EMAIL PROTECTED] Subject: Re: [WSG] Breadcrumb as Section Heading H1 To: wsg@webstandardsgroup.org Kevin Futter wrote: Anyway, for the benefit of others interested in this thread/topic, the upshot from the above link seems to be that the pipe character (|) is the best compromise currently available as a screen reader-friendly element separator. I profoundly disagree with that. The vertical bar is the worst thing you can use in a breadcrumb trail, regardless of how it reads in a screen reader. This is conventionally used on the web as a separator for sibling links, and it really doesn't work as a breadcrumb separator for sighted users. I don't think a list is appropriate markup for breadcrumbs and prefer the conventional You are in: home products foo Screen reader users in our user testing on sites with this construct had no problems with it reading home greater than products greater than foo, and reported that it was a very useful aid. You should not overlook the vital importance of the visual direction implied by the character. This is a crucial means of showing that it is a hierarchical relationship. Not all accessibility is about screen reader users after all. The conventional breadcrumb with is a working compromise which has proven to be a good tool in usable sites. Cheers Ian -- _ zStudio - Web development and accessibility http://zStudio.co.uk Snippetz.net - Online code library File, manage and re-use your code snippets links http://snippetz.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Jon Gunderson, Ph.D. Director of IT Accessibility Services Campus Information Technologies and Educational Services (CITES) and Coordinator of Assistive Communication and Information Technology Disability Resources and Education Services (DRES) Voice: (217) 244-5870 Fax: (217) 333-0248 Cell: (217) 714-6313 E-mail: [EMAIL PROTECTED] WWW: http://cita.rehab.uiuc.edu/ WWW: https://netfiles.uiuc.edu/jongund/www/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
Ian Anderson wrote: http://www.standards-schmandards.com/?2004/11/06/6-the-sound-of-the-accessibl e-title-tag-separator Anyway, for the benefit of others interested in this thread/topic, the upshot from the above link seems to be that the pipe character (|) is the best compromise currently available as a screen reader-friendly element separator. The vertical bar is the worst thing you can use in a breadcrumb trail Just realised that the article quoted by Patrick is in fact related to separators in the document title. In that case, I agree that the vertical bar is an appropriate separator. For example, quite often it is desirable to put the site name and the specific document title in the title element, and the order may be either way round: Adobe Systems | Buying software online Here, I don't think directional separators have value, unlike in a breadcrumb trail. It's also common to omit intermediate levels of the hierarchy in a page title. Cheers Ian -- _ zStudio - Web development and accessibility http://zStudio.co.uk Snippetz.net - Online code library File, manage and re-use your code snippets links http://snippetz.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
Stephen Stagg wrote: For the benefit of Screen-readers and textmode browsers, I add a LI with the text 'breadcrumb' at the top of the list which is then hidden using CSS. It's not a perfect solution but it works. ul li class=firstBreadcrumb: / liaMenu Item 1// liaMenu Item 2// liaMenu Item 3// / As it's an unordered list, it implies that there is no particular order to the items...you could jumble them up at random and they'd still retain their meaning. This, of course, is not true for home paths / breadcrumb trails. The order is quite specific, so if lists are your thing, ordered lists should really be used. For the same reason, having the first item breadcrumb does not imply anything, as it's a sibling of the other list items...which is not the case. -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
On 23/2/06 10:19 PM, Ian Anderson [EMAIL PROTECTED] wrote: Kevin Futter wrote: Anyway, for the benefit of others interested in this thread/topic, the upshot from the above link seems to be that the pipe character (|) is the best compromise currently available as a screen reader-friendly element separator. I profoundly disagree with that. The vertical bar is the worst thing you can use in a breadcrumb trail, regardless of how it reads in a screen reader. This is conventionally used on the web as a separator for sibling links, and it really doesn't work as a breadcrumb separator for sighted users. For the record, I was merely summarising the article that Patrick's earlier link pointed to, not endorsing its conclusions. I too tend to agree that the pipe is a poor choice for sighted users as it already has semiotic significance on the web. I don't think a list is appropriate markup for breadcrumbs and prefer the conventional You are in: home products foo We certainly agree here! Screen reader users in our user testing on sites with this construct had no problems with it reading home greater than products greater than foo, and reported that it was a very useful aid. Now I find this very interesting, mainly because the article seemed not to be based on any user testing, but rather a developer running various alternatives through JAWS and making assumptions about the usability of the results. (Please correct me if I'm wrong - I didn't bookmark the link so I can't go back to confirm.) What you're saying is based on direct observation of and feedback from the target audience, which is of course far more valuable. -- Kevin Futter Webmaster, St. Bernard's College http://www.sbc.melb.catholic.edu.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
On 22/2/06 10:38 AM, Patrick H. Lauke [EMAIL PROTECTED] wrote: Kevin Futter wrote: My only concern about using a string of text is defining a semantically-appropriate item delimiter that works well for assistive technologies. This seems apropos: http://www.standards-schmandards.com/?2004/11/06/6-the-sound-of-the-accessibl e-title-tag-separator Thanks for the link Patrick - quite interesting. I must admit that I'm guilty of using raquo;, so I may need to rethink that. One thing I found interesting in the comments is the idea of using a colon as a delimiter, with one person commenting that it's semantically appropriate as it's used this way in English grammar. This is not actually correct; colons are used to *introduce* a list (there's that word again) of elements, but semicolons (;) are used to separate the constituent elements, with the last element technically requiring a full-stop (period). I must say though that I feel drawing on the already-muddled semantics of the English language as a model for web semantics is a tenuous affair. Anyway, for the benefit of others interested in this thread/topic, the upshot from the above link seems to be that the pipe character (|) is the best compromise currently available as a screen reader-friendly element separator. -- Kevin Futter Webmaster, St. Bernard's College http://www.sbc.melb.catholic.edu.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
Kevin Futter wrote: Yes, I've argued strongly in the past that a list is not completely semantically-appropriate for breadcrumbs markup. Unlike breadcrumbs, a flat list does not represent a hierarchy, unless you nest them ... Of course I have to qualify this by saying that I treat breadcrumbs not as a dynamic path mirroring your journey through my website, but a clear and fixed path from site root to the page you're currently on. But one could also look at a homeward path as an ordered set of steps from the homepage to the current page, where the hierarchy is implied by the order in which the list items appear. -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
On 21/2/06 7:00 PM, Patrick H. Lauke [EMAIL PROTECTED] wrote: Kevin Futter wrote: Yes, I've argued strongly in the past that a list is not completely semantically-appropriate for breadcrumbs markup. Unlike breadcrumbs, a flat list does not represent a hierarchy, unless you nest them ... Of course I have to qualify this by saying that I treat breadcrumbs not as a dynamic path mirroring your journey through my website, but a clear and fixed path from site root to the page you're currently on. But one could also look at a homeward path as an ordered set of steps from the homepage to the current page, where the hierarchy is implied by the order in which the list items appear. While I can concede that an ordered list offers more chance of an implied hierarchy than an unordered one, I'm not keen on the amount of code required to produce the result, nor the concept of a series of nested lists, each with one element. Based on what you're saying Patrick, my preference for a simple string of text (a paragraph, for example), set out as an ordered set of steps from the homepage to the current page would have a hierarchy implied by the order in which the list items appear. My only concern about using a string of text is defining a semantically-appropriate item delimiter that works well for assistive technologies. I can but defer to earlier threads referring to Occam's Razor. -- Kevin Futter Webmaster, St. Bernard's College http://www.sbc.melb.catholic.edu.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
Kevin Futter wrote: While I can concede that an ordered list offers more chance of an implied hierarchy than an unordered one, I'm not keen on the amount of code required to produce the result, nor the concept of a series of nested lists, each with one element. I'm not keen on the nesting of lists for this purpose either. Based on what you're saying Patrick, my preference for a simple string of text (a paragraph, for example), set out as an ordered set of steps from the homepage to the current page would have a hierarchy implied by the order in which the list items appear. Fair enough, a paragraph (and its implied order) could also be fine (although semantics purists might disagree...although I find it superfluous to discuss the most semantically appropriate way of marking something up in HTML with its very limited set of vague constructs anyway). My only concern about using a string of text is defining a semantically-appropriate item delimiter that works well for assistive technologies. This seems apropos: http://www.standards-schmandards.com/?2004/11/06/6-the-sound-of-the-accessible-title-tag-separator I can but defer to earlier threads referring to Occam's Razor. Now all we need is Jodie Foster ;) -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
I thought it would be interesting to see what Yahoo says (and does) about breadcrumbs in their pattern library: http:// developer.yahoo.net/ypatterns/pattern_breadcrumbs.php They don't discuss the HTML, but looking at the source, I see they use an unordered list in some sort of template, as you can see below, and style with CSS. Seems an okay solution to me. What do you think? div id=container !-- InstanceBeginEditable name=breadcrumb -- !--span id=ytestedimg src=images/ip.gif/span-- span ul !-- *Bread crumb* -- lia href=http://developer.yahoo.net/;Yahoo! Developer Network/anbsp;nbsp;/li lia href=index.phpDesign Pattern Library/ anbsp;nbsp;/li lispan class=breadcrumbBreadcrumbs/span/li /ul/span!-- InstanceEndEditable -- /div Best regards, Marilyn Langfeld Langfeldesigns http://www.langfeldesigns.com [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
I want to use the name of the site in the H1. Is it appropriate to use the breadcrumb as the H1 element? I'd say it is better to use the h1 element for the site name as an initial statement then use something like an ordered list or unordered list for the breadcrumb: h1 Site name /h1 ol id=breadcrumb liMy Site/li liDevelopers/li liResources/li liSpecific/li liResource/li /ol h2 Welcome to Site name /h2 ... Russ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
James,I'd suggest this guideline refers to the body content of a page rather than navigational elements. If it were me, I wouldn't wrap an H1 around the breadcrumbs (or part thereof). I would reserve the use of H1, H2 etc for page headings, section headings, bylines, sub-section titles etc only. HTHSteve BatyDirector, User Experience StrategyRed Square On 21/02/06, James Hunter [EMAIL PROTECTED] wrote:I've been reading this: http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headersSpecifically I would like some more clarity on this issue:3.5 Use header elements to convey document structure and use themaccording to specification. [Priority 2] I want to use the name of the site in the H1.Is it appropriate to use the breadcrumb as the H1 element?
Re: [WSG] Breadcrumb as Section Heading H1
Thanks Russ, and Steve thats 2 no's I don't need any more convincing. I'll leave the site name as the first heading. Cheers, James -- James Hunter ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
James Hunter: Is it appropriate to use the breadcrumb as the H1 element? Breadcrumbs do not describe the *document* structure - they hint at the *site* structure (provided you only provide a hierarchal navigation system) or site history (depending on what type of breadcrumb you employ). I'm thinking out aloud here: not sure why, but using a list for breadcrumbs doesn't quite sit right with me, despite it being a type of navigation device. I think it is due to list structures replacing the dir and menu elements - and the notion that the site hierarchy represented as links is distinctly different from a navigation menu. Anyone else have thoughts on this? kind regards Terrence Wood. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
Terrence Wood wrote: James Hunter: Is it appropriate to use the breadcrumb as the H1 element? I'm thinking out aloud here: not sure why, but using a list for breadcrumbs doesn't quite sit right with me, despite it being a type of navigation device. I think it is due to list structures replacing the dir and menu elements - and the notion that the site hierarchy represented as links is distinctly different from a navigation menu. Anyone else have thoughts on this? Based on that idea wouldn't it make sense to do something like: ul liMain Site Parent/li ul liSection Parent/li ul liDocument Parent/li ul liCurrent Document/li /ul /ul /ul /ul Provided your head doesn't explode nesting the lists it gives you a nice hierarchical structure for the list that looks great with no styles. You could then style the child li elements to have the less than symbols as the list bullet? Any thoughts? -- Jay Gilmore Developer / Consultant SmashingRed Web Marketing P] 902.529.0651 E] [EMAIL PROTECTED] U] http://www.smashingred.com B] http://www.smashingred.com/blog ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Breadcrumb as Section Heading H1
On 21/02/06, Terrence Wood [EMAIL PROTECTED] wrote: I'm thinking out aloud here: not sure why, but using a list forbreadcrumbs doesn't quite sit right with me, despite it being a type ofnavigation device. I think it is due to list structures replacing thedir and menu elements - and the notion that the site hierarchy represented as links is distinctly different from a navigation menu.Anyone else have thoughts on this? I certainly don't claim to be an expert on this, but I think that using an ordered list for breadcrumbs works. You're basically presenting the user with a list of links that have a definied order: this link comes after that link comes after that link. I suppose that if you wanted to get really semantically precise you could do something like: ol id=breadcrumb liSite root ol liSection ol liSub-Section/li /ol /li /ol /li /ol This would certainly represent a hierarchical breadcrumb (assuming the type of breadcrumb that shows the site hierarchy, not a history-type one) very accurately, but it seems like an awful lot of code for something relatively simple. But maybe that's just me... Cheers, Seona.
Re: [WSG] Breadcrumb as Section Heading H1
On 21/2/06 12:31 PM, Terrence Wood [EMAIL PROTECTED] wrote: James Hunter: Is it appropriate to use the breadcrumb as the H1 element? Breadcrumbs do not describe the *document* structure - they hint at the *site* structure (provided you only provide a hierarchal navigation system) or site history (depending on what type of breadcrumb you employ). I'm thinking out aloud here: not sure why, but using a list for breadcrumbs doesn't quite sit right with me, despite it being a type of navigation device. I think it is due to list structures replacing the dir and menu elements - and the notion that the site hierarchy represented as links is distinctly different from a navigation menu. Anyone else have thoughts on this? Yes, I've argued strongly in the past that a list is not completely semantically-appropriate for breadcrumbs markup. Unlike breadcrumbs, a flat list does not represent a hierarchy, unless you nest them (and of course then it's no longer a flat list). So, breadcrumbs would need to be a series of nested lists, each with only one element, in order to satisfy me semantically. And of course, that is just absurd. Breadcrumbs are more about integrating a vertical site or navigation path, rather than a horizontal (in the conceptual sense) collection of same-level data. Of course I have to qualify this by saying that I treat breadcrumbs not as a dynamic path mirroring your journey through my website, but a clear and fixed path from site root to the page you're currently on. If you want to traverse back and forth along your own personal path, you can use the ... wait for it ... Back and Forwards buttons. -- Kevin Futter Webmaster, St. Bernard's College http://www.sbc.melb.catholic.edu.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
