“Building an Accessible Progress Clock with HTML and CSS”

Unlocking the Power of Progress Clocks with HTML and CSS

Progress clocks are an intuitive way to track progress against a task or goal. In this article, we’ll bring them to life on the web using HTML and CSS. We’ll explore the design goals, implementation, and usability considerations for creating an effective progress clock.

What is a Progress Clock?

A progress clock is a circular representation of progress toward a goal, divided into segments that fill in as progress is made. It’s an interactive control that allows users to set the amount of progress, making it perfect for tasks where progress is subjective or abstract.

Design Goals

When designing a progress clock, we need to consider the following:

• Simple and intuitive: The progress clock should be easy to understand and use.
• Interactivity: Users should be able to set the amount of progress interactively.
• Accessibility: The progress clock should be accessible to all users, including those with disabilities.

Implementation

We’ll create an eight-segment progress clock using radio buttons and CSS. Each segment will be individually focusable and selectable, allowing users to set the amount of progress.

Here’s the starting markup:

“`html

“`

We’ll use CSS to create the circular layout and style the progress clock.

“`css
.progress-clock {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}

.segment {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(45deg);
cursor: pointer;
}

.segment:checked {
background-color: #007bff;
}
“`

Usability Considerations

To ensure our progress clock is usable and accessible, we need to consider the following:

• Adding a zero value: We’ll add a zero value segment to allow users to reset the progress clock.
• Implementing a focus indicator: We’ll use the :focus-within pseudo-class to indicate focus on the progress clock.
• Improving the fieldset presentation: We’ll use flexbox to position the legend and improve the fieldset layout.
• Supporting fine and coarse pointers: We’ll provide alternative styles for coarse pointers, such as enlarging the clock or adding a hover effect.

By considering these design goals, implementation details, and usability considerations, we can create an effective and accessible progress clock that enhances the user experience.

Final Working Sample

See the Pen Progress Clock by John C Barstow (@jbowtie) on CodePen.

This sample includes buttons to experiment