From 1cd36b7c6ae1bcd97cd20289a6ceba30c3133939 Mon Sep 17 00:00:00 2001
From: Michiel Bijl <MichielBijl@users.noreply.github.com>
Date: Tue, 14 Feb 2017 07:06:46 +0000
Subject: [PATCH] Make Breadcrumb Example Link Separators With CSS Boarders

Per discussion in issue #187, the visual separators between breadcrumb links are only for visual presentation and create unnecessary verbosity if they are announced by screen readers. This change displays them with CSS boarders so they are not announced.

This commit also includes revisions to the accessibility features section of the breadcrumb example page to describe this feature.
---
 examples/breadcrumb/css/breadcrumb.css | 16 +++++++++++++---
 examples/breadcrumb/index.html         | 12 ++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/examples/breadcrumb/css/breadcrumb.css b/examples/breadcrumb/css/breadcrumb.css
index ac88b367dc..853e268080 100644
--- a/examples/breadcrumb/css/breadcrumb.css
+++ b/examples/breadcrumb/css/breadcrumb.css
@@ -15,9 +15,19 @@ nav.breadcrumb li {
   display: inline;
 }
 
+/*nav.breadcrumb li + li::before {
+  display: inline-block;
+  content: url('../images/slash.svg');
+  vertical-align: middle;
+}*/
+
 nav.breadcrumb li + li::before {
-  color: #333;
-  content: '/\00a0';
+  display: inline-block;
+  margin: 0 .25em;
+  transform: rotate(15deg);
+  border-right: .1em solid currentColor;
+  height: .8em;
+  content: '';
 }
 
 nav.breadcrumb a {
@@ -35,4 +45,4 @@ nav.breadcrumb [aria-current="page"] {
   color: #000;
   font-weight: 700;
   text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
index 586b98149a..6109186b6f 100644
--- a/examples/breadcrumb/index.html
+++ b/examples/breadcrumb/index.html
@@ -41,8 +41,16 @@ <h2 id="ex_label">Example</h2>
       <h2>Accessibility Features</h2>
       <ul>
         <li>The set of links is structured using an ordered list .</li>
-        <li>The visual separators between links are added through <abbr title="Cascading Style Sheets">CSS</abbr> so they do not add unnecessary screen reader verbosity.</li>
-        <li>A labelled <code>nav</code> element identifies the structure and makes it easy to identify and locate.</li>
+        <li>A <code>nav</code> element labeled <q>Breadcrumb</q> identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.</li>
+        <li>To prevent screen reader announcement of the visual separators between links, they are added via <abbr title="Cascading Style Sheets">CSS</abbr>:
+          <ul>
+            <li>
+              The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the <code>nav</code> element with its label of <q>Breadcrumb</q>.
+              So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.
+            </li>
+            <li>Each link has a border on one side that is skewed with the CSS’ <code>transform</code> property so it resembles a slash.</li>
+          </ul>
+        </li>
       </ul>
     </section>