The header & progress bar component include a progress indicator line, a set of clickable steps, a back link, and a logo. Initially, the steps are hidden and slide down when the mouse hovers over the component.
On small viewports, all the steps are displayed on a single page, and this component is hidden.
The closed state of the component
The open state of the component
As is customary, I will begin the review by checking the keyboard accessibility of the interactive components.
To ensure accessible and inclusive interfaces, it is crucial that all interactive elements can be accessed and operated using keyboards alone. Additionally, these elements should provide visible focus indicators to assist users in determining their current location.
Regrettably, the steps cannot be accessed at all, and although the back links can be focused, their focus indicators lack sufficient contrast.
In the following video, I demonstrate the use of the component with a mouse, and all functionality behaves as intended. However, when attempting to use the component with a keyboard, I encounter difficulties. Pressing the Tab key only focuses on the back links and completely skips over the actual steps.
Let's first examine the reason behind the links' inability to receive focus and then address the focus indicators, as they can be effectively handled in a holistic manner.
Upon reviewing the code, it is evident that the <a> elements associated with each step lack the href attributes. Without these attributes, the elements are not recognized
as interactive, leading the browser to exclude them as tab stops.
<ul class="nav nav-tabs" data-tabsnav="applyForm">
<li class="active"><a>1 Personal info</a></li>
<li class=""><a>2 Questions</a></li>
<li class=""><a>3 Assignment</a></li>
<li class=""><a>4 Preview</a></li>
<li><a>5 Submit</a></li>
</ul>
Given that each step has a corresponding URL, the solution to this issue is simple: include them 🙂
<li class=""><a href="<https://jobs.homerun.co/open/en/apply?&step=2>">2 Questions</a></li>
Now that the links are accessible via keyboards, the next issue is that the progress tracker is only visible when hovered over.