From 0f7a7a4d8b2940937644e8dad6a5cdb0a695eb2f Mon Sep 17 00:00:00 2001 From: Scott O'Hara Date: Mon, 8 Jul 2024 15:03:42 -0400 Subject: [PATCH 1/6] Update G65.html Expand the examples for G65 'providing a breadcrumb trail' to acknowledge the fact that a breadcrumb's current location can be a hyperlink. closes #3948 --- techniques/general/G65.html | 55 ++++++++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/techniques/general/G65.html b/techniques/general/G65.html index 9972e0df0f..e3b876ab41 100644 --- a/techniques/general/G65.html +++ b/techniques/general/G65.html @@ -17,26 +17,39 @@

When to Use

Description

-

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages. A breadcrumb trail either displays locations in the path the user took to reach the Web page, or it displays the location of the current Web page within the organization of the site.

-

Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current Web page. They are placed in the same location within each Web page in the set.

-

It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", and "→".

+

A breadcrumb trail (or 'breadcrumb navigation') helps the user to visualize how content has been structured and how to navigate back to previous web pages. Many even identify the current location in the series of web pages, commmonly as the last element in the trail and with a variation in its visual style. A breadcrumb trail either displays locations in the path the user took to reach the web page, or it displays the location of the current web page within the organization of the site.

+

Breadcrumb trails are implemented using links to the Web pages that have been accessed in the process of navigating to the current web page. They are placed in the same location within each web page in the set.

+

It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include ">", "|", "/", and "→". Alternatively, one could use decorative iconography or create separators with CSS.

Examples

Photographer's portfolio

-

A photographer's portfolio Web site has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the site to a Web page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the Web page:

+

A photographer's portfolio website has been organized into different galleries and each gallery has further been divided into categories. A user who navigates through the website to a particular page containing a photo of a Gentoo penguin would see the following breadcrumb trail at the top of the web page:

Home / Galleries / Antarctica / Penguins / Gentoo Penguin
-

All of the text items except "Gentoo Penguin" are implemented as links. The current location, Gentoo Penguin, is included in the breadcrumb trail but it is not implemented as a link.

+

The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within an unordered list, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.

+

The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.

+ +
<nav aria-label="Breadcrumbs"> 
+  <ul>
+    <li><a href="/">Home</a> /</li>
+    <li><a href="/galleries">Galleries</a> /</li> 
+    <li><a href="/galleries/antarctica">Antarctica</a> /</li>
+    <li><a href="/galleries/antarctica/penguins">Penguins</a> /</li>
+    <li aria-current="page">Gentoo Penguin</li>
+  </ul> 
+</nav>
+
+

Working example: Breadcrumb example

E-commerce site

-

The information architecture of an e-commerce Web site is categorized from general to increasingly more specific product subsections.

+

The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.

You are here: Acme Company → Electronics → Computers → Laptops

-

The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here" and "Laptops." This example uses a right arrow symbol (→) as a separator.

+

The trail begins with "You are here" and ends with the current page. Items in the trail are clickable or tappable links with the exception of "You are here", which is a static heading. This example uses a right arrow symbol (→) as a separator.

In this example a h2 element, a nav element with an aria-label attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.

HTML

@@ -47,7 +60,7 @@

HTML

<li><a href="/">Acme Company</a> &#8594;</li> <li><a href="/electronics/">Electronics</a> &#8594;</li> <li><a href="/electronics/computers/">Computers</a> &#8594;</li> - <li><a aria-current="page">Laptops</a></li> + <li><a href="/electronics/computers/laptops/" aria-current="page">Laptops</a></li> </ul> </nav> @@ -57,7 +70,7 @@

HTML

CSS

-
nav, h2, ul, ul li{ display: inline;}
+
h2, ul, ul li{ display: inline;}
 nav > h2{ font-size: 1em; } 
 ul { padding-left: 0em; }

 
@@ -71,9 +84,9 @@ 
CSS

 		
Tests

 		

 			
Procedure

-			
When breadcrumb trails have been implemented in a set of Web pages:

+			
When breadcrumb trails have been implemented in a set of web pages:

 			
    
-				
  1. Navigate to a Web page.
    2. 
+				
  2. Navigate to a web page.
    3. 
 				
  3. Check that a breadcrumb trail is displayed.
    4. 
 				
  4. Check that the breadcrumb trail displays the correct navigational sequence to reach the current location or the correct hierarchical path to the current location within the site structure.
    5. 
 				
  5. 
@@ -91,17 +104,24 @@ 
    Procedure
    
 						
  6. Check that the current location is not implemented as a link.
    7. 
 					

 				
-				
  • Check that all links navigate to the correct Web page as specified by the breadcrumb trail.
    • 
+        
  • 
+          
    For a breadcrumb trail that does include the current location and it behaves as a link:
    
+          
      
+						
    1. Check that all elements are implemented as links.
      2. 
+						
    2. Check that the current location is programmatically identified as such (e.g., using the aria-current attribute).
      3. 
+					
    
+        
    • 
+				
  • Check that all links navigate to the correct web page as specified by the breadcrumb trail.
    • 
 			
 		
    
 		
    
 			
    Expected Results
    
 			
      
 				
    • 
-					
      For all Web pages in the set using breadcrumb trails,
      
+					
      For all web pages in the set using breadcrumb trails,
      
 					
        
-						
      • Checks #2, #3, and #6 are true.
        • 
-						
      • Either check #4 or #5 is true.
        • 
+						
      • Checks #2, #3, and #7 are true.
        • 
+						
      • Either check #4, #5 or #6 is true.
        • 
 					
      
 				
      • 
 			
    
@@ -117,10 +137,13 @@ 
    Related Techniques
    
 	
    
 		
    Resources
    
 		
 	
    
 
-
\ No newline at end of file
+

From 0fbdeba06671da314fc927d8d14e5719908bae1d Mon Sep 17 00:00:00 2001
From: Scott O'Hara 
Date: Mon, 8 Jul 2024 15:16:33 -0400
Subject: [PATCH 2/6] update g65 working examples

update working examples to match understanding doc.

add note to indicate none of the hyperlinks in the examples actually go anywhere useful.

other minor code formatting consistency updates
---
 working-examples/breadcrumb-trail/index.html | 34 ++++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/working-examples/breadcrumb-trail/index.html b/working-examples/breadcrumb-trail/index.html
index 293f532f2b..bab6b5d0c5 100644
--- a/working-examples/breadcrumb-trail/index.html
+++ b/working-examples/breadcrumb-trail/index.html
@@ -3,34 +3,48 @@
   
     
         
-    G65 Example 3: Breadcrumb Example
+    G65 Proviging a breadcrumb trail examples
     
   
   
-    
    Breadcrumb Example
    
+    
    Breadcrumb Trail Examples
    
+    
    Note: hyperlinks in these examples will return 404 errors.
    
+    
+    
    Breadcrumb trail where current page is not a link
    
+    
+
+    
    Breadcrumb trail where current page is a link
    
     
   
-
\ No newline at end of file
+

From af9808c6a2fc2b60f80ffd44046055c6c738b4e8 Mon Sep 17 00:00:00 2001
From: Scott O'Hara 
Date: Tue, 23 Jul 2024 09:31:26 -0400
Subject: [PATCH 3/6] Update techniques/general/G65.html

Co-authored-by: Giacomo Petri 
---
 techniques/general/G65.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index e3b876ab41..2d91d7a333 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -33,13 +33,13 @@ 
    Photographer's portfolio
    
 
    The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
    
       
 
    <nav aria-label="Breadcrumbs"> 
-  <ul>
+  <ol>
     <li><a href="/">Home</a> /</li>
     <li><a href="/galleries">Galleries</a> /</li> 
     <li><a href="/galleries/antarctica">Antarctica</a> /</li>
     <li><a href="/galleries/antarctica/penguins">Penguins</a> /</li>
     <li aria-current="page">Gentoo Penguin</li>
-  </ul> 
+  </ol> 
 </nav>
 
    
 

From 233708c9a7479475e2e090149132c94e3a86058a Mon Sep 17 00:00:00 2001
From: Scott O'Hara 
Date: Tue, 23 Jul 2024 09:40:13 -0400
Subject: [PATCH 4/6] Update G65.html

revert to ul
---
 techniques/general/G65.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index 2d91d7a333..e3b876ab41 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -33,13 +33,13 @@ 
    Photographer's portfolio
    
 
    The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
    
       
 
    <nav aria-label="Breadcrumbs"> 
-  <ol>
+  <ul>
     <li><a href="/">Home</a> /</li>
     <li><a href="/galleries">Galleries</a> /</li> 
     <li><a href="/galleries/antarctica">Antarctica</a> /</li>
     <li><a href="/galleries/antarctica/penguins">Penguins</a> /</li>
     <li aria-current="page">Gentoo Penguin</li>
-  </ol> 
+  </ul> 
 </nav>
 
    
 

From 075fa4eb84324fb004d2c541cf677eadc35c7f90 Mon Sep 17 00:00:00 2001
From: Scott O'Hara 
Date: Tue, 23 Jul 2024 09:46:13 -0400
Subject: [PATCH 5/6] Update G65.html

change 'unordered list' to just 'list element' to be purposefully non-committal about which list element needs to be used (since it really doesn't matter if the markers are removed)
---
 techniques/general/G65.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/techniques/general/G65.html b/techniques/general/G65.html
index e3b876ab41..15238fd8ad 100644
--- a/techniques/general/G65.html
+++ b/techniques/general/G65.html
@@ -29,7 +29,7 @@ 
    Photographer's portfolio
    
 
 
    Home / Galleries / Antarctica / Penguins / Gentoo Penguin
    
 
-
    The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within an unordered list, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.
    
+
    The markup for this example implements all of the text items except "Gentoo Penguin" as links. To provide semantic structure to the breadcrumb trail, the links are contained within a list element, which is nested within a nav element with an aria-label. The current location, Gentoo Penguin, is included as the last item in the breadcrumb trail but it is not implemented as a link to visually and semantically differentiate it from the previous items in the trail.
    
 
    The aria-current attribute is specified on the last list item in the trail to programmatically identify it as the item that reprsents the current web page. The markup would be styled using CSS to display the breadcrumb trail horizontally.
    
       
 
    <nav aria-label="Breadcrumbs"> 

From 2a4f990f0fd82279a5131faf0721f34e0bccc225 Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" 
Date: Fri, 26 Jul 2024 16:53:52 +0100
Subject: [PATCH 6/6] Update working-examples/breadcrumb-trail/index.html

fixed
---
 working-examples/breadcrumb-trail/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/working-examples/breadcrumb-trail/index.html b/working-examples/breadcrumb-trail/index.html
index bab6b5d0c5..bf997256e5 100644
--- a/working-examples/breadcrumb-trail/index.html
+++ b/working-examples/breadcrumb-trail/index.html
@@ -3,7 +3,7 @@
   
     
         
-    G65 Proviging a breadcrumb trail examples
+    G65 Providing a breadcrumb trail examples