Skip to content

Commit

Permalink
Merge branch 'main' into patrickhlauke-single-pointer-definition-foll…
Browse files Browse the repository at this point in the history 
…owup
  • Loading branch information
@patrickhlauke
patrickhlauke authored Sep 20, 2024
2 parents 8553b1e + 4213bf6 commit a79bb49
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 32 deletions.
2 changes: 1 addition & 1 deletion _includes/test-rules.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% if testRules.size > 0 %}
{%- if isTechniques -%}
{% assign understandingActRulesHref = "/understanding/understanding-act-rules.html" %}
{% assign understandingActRulesHref = "../../understanding/understanding-act-rules.html" %}
{%- else -%}
{% assign understandingActRulesHref = "understanding-act-rules.html" %}
{%- endif -%}
Expand Down
5 changes: 0 additions & 5 deletions techniques/general/G128.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@

<p>A Web page implements tab panel style navigation. A list of panel tabs is displayed horizontally across the page. The current content is displayed in a panel below the list of panel tabs. When the user navigates to and selects a particular panel tab the content in the panel is updated to reflect the topic of the selected tab. In addition, the background color of the selected tab is changed from the default color and a check mark icon is displayed next to the tab panel text to indicate it is the active panel. The check mark icon includes an appropriate text alternative.</p>

</section>
<section class="example">

<p>The layout for a Web page uses a frameset and frames. One of the frames is designated as the navigation frame and another frame displays the content of the Web site. When the user selects a link in the navigation frame, the information related to the link is displayed within the content frame. The text for the selected item in the navigation frame is updated with an asterisk character to indicate that it is the selected topic.</p>

</section>
<section class="example">

Expand Down
55 changes: 39 additions & 16 deletions techniques/general/G65.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,39 @@ <h2>When to Use</h2>
</section>
<section id="description">
<h2>Description</h2>
<p>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.</p>
<p>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.</p>
<p>It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include "&gt;", "|", "/", and "→".</p>
<p>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.</p>
<p>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.</p>
<p>It can be helpful to users to separate the items in the breadcrumb trailing with a visible separator. Examples of separators include "&gt;", "|", "/", and "→". Alternatively, one could use decorative iconography or create separators with CSS.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Photographer's portfolio</h3>
<p>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:</p>
<p>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:</p>

<pre xml:space="preserve">Home / Galleries / Antarctica / Penguins / Gentoo Penguin</pre>

<p>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.</p>
<p>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 <code class="language-html">nav</code> element with an <code class="language-html">aria-label</code>. 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.</p>
<p>The <code class="language-html">aria-current</code> 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.</p>

<pre xml:space="preserve"><code class="language-html">&lt;nav aria-label="Breadcrumbs"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt; /&lt;/li&gt;
&lt;li&gt;&lt;a href="/galleries"&gt;Galleries&lt;/a&gt; /&lt;/li&gt;
&lt;li&gt;&lt;a href="/galleries/antarctica"&gt;Antarctica&lt;/a&gt; /&lt;/li&gt;
&lt;li&gt;&lt;a href="/galleries/antarctica/penguins"&gt;Penguins&lt;/a&gt; /&lt;/li&gt;
&lt;li aria-current="page"&gt;Gentoo Penguin&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</code>
</pre>

<p class="working-example">Working example: <a href="../../working-examples/breadcrumb-trail/">Breadcrumb example</a></p>
</section>
<section class="example">
<h3>E-commerce site</h3>
<p>The information architecture of an e-commerce Web site is categorized from general to increasingly more specific product subsections.</p>
<p>The information architecture of an e-commerce website is categorized from general to increasingly more specific product subsections.</p>
<p>You are here: Acme Company → Electronics → Computers → Laptops</p>
<p>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.</p>
<p>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.</p>
<p>In this example a <code class="language-html">h2</code> element, a <code class="language-html">nav</code> element with an <code class="language-html">aria-label</code> attribute, and an unordered list are used to provide semantics. The markup would be styled using CSS to display the breadcrumb trail horizontally.</p>
<section id="the-html">
<h4><abbr title="HyperText Markup Language">HTML</abbr></h4>
Expand All @@ -47,7 +60,7 @@ <h4><abbr title="HyperText Markup Language">HTML</abbr></h4>
&lt;li&gt;&lt;a href="/"&gt;Acme Company&lt;/a&gt; &amp;#8594;&lt;/li&gt;
&lt;li&gt;&lt;a href="/electronics/"&gt;Electronics&lt;/a&gt; &amp;#8594;&lt;/li&gt;
&lt;li&gt;&lt;a href="/electronics/computers/"&gt;Computers&lt;/a&gt; &amp;#8594;&lt;/li&gt;
&lt;li&gt;&lt;a aria-current="page"&gt;Laptops&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="/electronics/computers/laptops/" aria-current="page"&gt;Laptops&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</code>
</pre>
Expand All @@ -57,7 +70,7 @@ <h4><abbr title="HyperText Markup Language">HTML</abbr></h4>

<h4><abbr title="Cascading Style Sheets">CSS</abbr></h4>

<pre xml:space="preserve"><code class="language-css">nav, h2, ul, ul li{ display: inline;}
<pre xml:space="preserve"><code class="language-css">h2, ul, ul li{ display: inline;}
nav &gt; h2{ font-size: 1em; }
ul { padding-left: 0em; }</code></pre>

Expand All @@ -71,9 +84,9 @@ <h4><abbr title="Cascading Style Sheets">CSS</abbr></h4>
<h2>Tests</h2>
<section class="procedure">
<h3>Procedure</h3>
<p>When breadcrumb trails have been implemented in a set of Web pages:</p>
<p>When breadcrumb trails have been implemented in a set of web pages:</p>
<ol>
<li>Navigate to a Web page.</li>
<li>Navigate to a web page.</li>
<li>Check that a breadcrumb trail is displayed.</li>
<li>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.</li>
<li>
Expand All @@ -91,17 +104,24 @@ <h3>Procedure</h3>
<li>Check that the current location is not implemented as a link.</li>
</ol>
</li>
<li>Check that all links navigate to the correct Web page as specified by the breadcrumb trail.</li>
<li>
<p>For a breadcrumb trail that does include the current location and it behaves as a link:</p>
<ol>
<li>Check that all elements are implemented as links.</li>
<li>Check that the current location is programmatically identified as such (e.g., using the <code class="language-html">aria-current</code> attribute).</li>
</ol>
</li>
<li>Check that all links navigate to the correct web page as specified by the breadcrumb trail.</li>
</ol>
</section>
<section class="results">
<h3>Expected Results</h3>
<ul>
<li>
<p>For all Web pages in the set using breadcrumb trails,</p>
<p>For all web pages in the set using breadcrumb trails,</p>
<ul>
<li>Checks #2, #3, and #6 are true.</li>
<li>Either check #4 or #5 is true.</li>
<li>Checks #2, #3, and #7 are true.</li>
<li>Either check #4, #5 or #6 is true.</li>
</ul>
</li>
</ul>
Expand All @@ -117,10 +137,13 @@ <h2>Related Techniques</h2>
<section id="resources">
<h2>Resources</h2>
<ul>
<li>
<a href="https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/">ARIA Authoring Practices Guide - breadcrumb example</a>
</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up">HTML - breadcrumb navigation</a>
</li>
</ul>
</section>
</body>
</html>
</html>
34 changes: 24 additions & 10 deletions working-examples/breadcrumb-trail/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,48 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>G65 Example 3: Breadcrumb Example</title>
<title>G65 Providing a breadcrumb trail examples</title>
<style>
body {
background:#fff;
color:#000;
color: #000;
font: 1rem/1.5 system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
}
nav, h2, ul, ul li{
display: inline;
h2, ul, ul li {
display: inline;
}
nav > h2{
font-size: 1em;
nav > h2 {
font-size: 1em;
}
ul {
padding-left: 0em;
padding-left: 0em;
}
</style>
</head>
<body>
<h1>Breadcrumb Example</h1>
<h1>Breadcrumb Trail Examples</h1>
<p>Note: hyperlinks in these examples will return 404 errors.</p>

<h2>Breadcrumb trail where current page is not a link</h2>
<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>

<h2>Breadcrumb trail where current page is a link</h2>
<nav aria-label="Breadcrumbs">
<h2>You are here:</h2>
<ul>
<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>
</body>
</html>
</html>

0 comments on commit a79bb49

Please sign in to comment.