#16 Breadcrumbs - change structure for accessibility, update page exp…

…laining usage and add position property for schema.org
nice-digital · Sep 30, 2016 · ff16698 · ff16698
1 parent f69e9ad
commit ff16698
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 43 deletions.
diff --git a/src/stylesheets/components/_components-breadcrumbs.scss b/src/stylesheets/components/_components-breadcrumbs.scss
@@ -2,6 +2,7 @@
 /// @group components
 ////
 
+// See https://www.w3.org/WAI/WCAG20/Techniques/working-examples/G65/ex3.html
 .breadcrumbs {
   list-style: none;
   margin: 0;
@@ -20,10 +21,6 @@
       display: none;
     }
 
-    &--active {
-      color: $colour-text;
-    }
-
     a {
       color: $colour-text;
     }

diff --git a/web/server/views/components/breadcrumbs.njk b/web/server/views/components/breadcrumbs.njk
@@ -8,27 +8,37 @@
 	<section id="breadcrumbs">
 
 		<ul>
-			<li>Use <code>class="breadcrumbs__crumb--active"</code> for current page</li>
+			<li>Use a <code>nav</code> element</li>
+			<li>Use <code>aria-label</code> to describe the breadcrumbs</li>
+			<li>Use <code>visually-hidden</code> to only show the 'you are here' label to screen readers.</li>
+			<li>Use <a href="http://schema.org/BreadcrumbList" target="_blank" rel="external">schema.org</a> microdata</li>
 		</ul>
 
 		{% example "html" -%}
-			<ol class="breadcrumbs">
-				<li class="breadcrumbs__crumb"><a href="#">Home</a></li>
-				<li class="breadcrumbs__crumb"><a href="#">Nice Guidance</a></li>
-				<li class="breadcrumbs__crumb breadcrumbs__crumb--active">Conditions and diseases</li>
-			</ol>
-		{%- endexample %}
-
-		<h2>Breadcrumbs with schema microdata</h2>
-
-		<p>Used to improve the web by creating a structured data markup schema supported by major search engines. On-page markup helps search engines understand the information on web pages and provide richer search results.</p>
-
-		{% example "html" -%}
-			<ol class="breadcrumbs" itemscope="" itemtype="http://schema.org/BreadcrumbList">
-				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Home</a></li>
-				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="#">Nice Guidance</a></li>
-				<li class="breadcrumbs__crumb breadcrumbs__crumb--active" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">Population groups</li>
-			</ol>
+			<nav aria-label="Breadcrumbs" role="navigation">
+				<h2 class="visually-hidden" id="breadcrumb-label">
+					You are here:
+				</h2>
+				<ol class="breadcrumbs" aria-labelledby="breadcrumb-label" itemscope itemtype="http://schema.org/BreadcrumbList">
+					<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+						<a href="/" itemprop="name">
+							Home
+						</a>
+						<meta itemprop="position" content="1">
+					</li>
+					<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+						<a href="/guidance" itemprop="name">
+							NICE Guidance
+						</a>
+						<meta itemprop="position" content="2">
+					</li>
+					<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">			<span itemprop="name">
+							Population groups
+						</span>
+						<meta itemprop="position" content="3">
+					</li>
+				</ol>
+			</nav>
 		{%- endexample %}
 	</section>
 

diff --git a/web/server/views/layouts/_layout.njk b/web/server/views/layouts/_layout.njk
@@ -90,28 +90,38 @@
 
 	{% if breadcrumbs %}
 		<div class="container">
-			<ol class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
-				<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-					<a href="/">
-						NICE Experience
-					</a>
-				</li>
-				{% for crumb in breadcrumbs %}
-					{% if crumb %}
-						{% if crumb.href %}
-							<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-								<a href="{{ crumb.href }}">
-									{{ crumb.title }}
-								</a>
-							</li>
-						{% else %}
-							<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
-								{{ crumb.title }}
-							</li>
+			<nav aria-label="Breadcrumbs" role="navigation">
+				<h2 class="visually-hidden" id="breadcrumb-label">
+					You are here:
+				</h2>
+				<ol class="breadcrumbs" aria-labelledby="breadcrumb-label" itemscope itemtype="http://schema.org/BreadcrumbList">
+					<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+						<a href="/" itemprop="name">
+							NICE Experience
+						</a>
+						<meta itemprop="position" content="1">
+					</li>
+					{% for crumb in breadcrumbs %}
+						{% if crumb %}
+							{% if crumb.href %}
+								<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+									<a href="{{ crumb.href }}" itemprop="name">
+										{{ crumb.title }}
+									</a>
+									<meta itemprop="position" content="{{ loop.index + 1 }}">
+								</li>
+							{% else %}
+								<li class="breadcrumbs__crumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+									<span itemprop="name">
+										{{ crumb.title }}
+									</span>
+									<meta itemprop="position" content="{{ loop.index + 1 }}">
+								</li>
+							{% endif %}
 						{% endif %}
-					{% endif %}
-				{% endfor %}
-			</ol>
+					{% endfor %}
+				</ol>
+			</nav>
 		</div>
 	{% endif %}