One of the common challenges when writing interfaces is describing processes that have multiple steps in a way that is both understandable and accessible. Adding different functionality and different devices further complicates this. If we were Hänsel or Grethel, we would just leave a trail of pebbles or breadcrumbs.
Alas, we often find that even though we are not Hänsel or Grethel, navigation within a process is still often a problem and poorly written HTML or CSS can significantly contribute to the several common accessibility concerns and usability concerns surrounding the progress/breadcrumbs component as well. This post offers a pattern that is accessible and mobile friendly without being a burden.
Again, the HTML and CSS needed to provide a usable breadcrumbs component is relatively simple, but it can pose an even greater problem if it is not written correctly.
It should also be noted that in addition to the pattern described here, it is very important that the page title and the primary heading should be modified to indicate the update progress.
When first building our progress bar or breadcrumbs, we must make the determination if our it represents unidirectional progress or if we might be able to restart the process. If the flow is unidirectional, you
might consider using the
progress element to demonstrate progress; however, be aware that the
progress element is dependent on the OS in use, and the ability to modify the display is limited.
If we are providing the ability to move backward in the process - i.e., the process is not unidirectional - that means the breadcrumbs or progress bar has a navigational element, and it should be identified as such. The good news is that much of the code is unchanged. To demonstrate the difference in the code, both versions are provided below.
 |
| Breadcrumbs Snapshot |
The code below, is complete, with the exception that in the demonstration there is a style rule to center the content, and it produces the breadcrumbs show in the
Breadcrumbs Snapshot.
HTML (without navigation)
<div class="breadcrumbs">
<ol >
<li>
<span data-step="#1" role="text">
<span class="description">Personal Information</span>
</span>
</li>
<li aria-current="step">
<span data-step="#2" role="text">
<span class="description">Financial Information</span>
</span>
</li>
<li>
<span data-step="#3" role="text">
<span class="description">Review Information</span>
</span>
</li>
<li>
<span data-step="#4" role="text">
<span class="description">Thank You</span>
</span>
</li>
</ol>
</div>
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="signup/1">
<span data-step="#1" role="text">
<span class="description">Personal Information</span>
</span>
</a>
</li>
<li aria-current="step">
<a href="signup/2">
<span data-step="#2" role="text">
<span class="description">Financial Information</span>
</span>
</a>
</li>
<li>
<a href="signup/3">
<span data-step="#3" role="text">
<span class="description">Review Information</span>
</span>
</a>
</li>
<li>
<a href="thankyou">
<span data-step="#4" role="text">
<span class="description">Thank You</span>
</span>
</a>
</li>
</ol>
</nav>
A few items to note - one is the inclusion of the
aria-current attribute, which lets users of assistive technology know which step is current, and another is the inclusion of the
role attribute, which fixes a 'feature' in some assistive technologies that sees child elements as distinct from their wrapping elements, resulting in a different value for the
accessible name than what would commonly be expected. Otherwise, the code should be self-explanatory.
Next, we add some CSS
.breadcrumbs {
display: inline-block;
width: auto;
}
.breadcrumbs ol {
list-style-type: none;
margin: 0 auto;
overflow: visible;
padding: 0;
}
.breadcrumbs ol li {
float: left;
background: darkgray;
border: 0.1em solid darkgray;
color: white;
padding: 0.5rem;
position: relative;
margin-right: 1rem;
}
.breadcrumbs ol li::after {
background: darkgray;
content: '';
display: inline-block;
height: 0.5rem;
left: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0.7rem;
/* width = margin-right + (border-width * 2) */
width: 1.2em;
z-index: -1;
}
.breadcrumbs ol li:last-of-type {
margin-right: 0;
}
.breadcrumbs ol li:last-of-type::after {
display: none;
}
.breadcrumbs ol li a {
background: inherit;
color: inherit;
text-decoration: none;
}
.breadcrumbs ol li[aria-current] {
background: green;
border-color: green;
color: white;
}
.breadcrumbs ol li[aria-current] ~ li {
background: lightgray;
color: black;
}
@media (max-width: 20rem) {
.breadcrumbs ol li {
border-radius: 100%;
}
.breadcrumbs ol li [data-step]::before {
content: attr(data-step);
}
.breadcrumbs ol li a .description {
clip: rect(0, 0, 0, 0);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: absolute;
}
}
Here again, we need to comment about the code. First, the
.breadcrumbs ol li rule is for
past steps. This allows us to use the
aria-current attribute as the selector for current steps and siblings of
aria-current after the
aria-current item -
.breadcrumbs ol li[aria-current] ~ li - are those steps not yet completed. Another issue to note is that we are using the
float property on list items. We
might have used the
display property to modify where items display, but in many assistive technologies, modification of the
display property modifies the accessibility tree, rendering all our effort to construct an accurate tree moot.
Admittedly, this is a simple example; however, it should suffice to demonstrate how a progress bar or breadcrumbs might be built.
Happy coding.
No comments:
Post a Comment