Build an Accessible Daily Habit Tracker with HTML, CSS and JavaScript

A daily habit tracker is a simple project for practising front-end development. It can also teach important lessons about accessibility, semantic HTML and clear user feedback.

In this tutorial, we'll build a checklist that tracks completion of a few daily habits. The example uses generic habits and can be adapted for personal routines, study goals or reminders.

Step 1: Create the HTML

Save the following as index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daily Habit Tracker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="container">
    <h1>Daily Habit Tracker</h1>
    <p>Mark each habit when you complete it.</p>

    <ul id="habits">
      <li>
        <label>
          <input type="checkbox">
          Morning routine
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox">
          Evening routine
        </label>
      </li>
      <li>
        <label>
          <input type="checkbox">
          Prepare for tomorrow
        </label>
      </li>
    </ul>

    <p id="progress" aria-live="polite">
      0 of 3 habits completed
    </p>
  </main>

  <script src="script.js"></script>
</body>
</html>

Step 2: Make it responsive

Create style.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #20252b;
  background: #f4f6f8;
}

.container {
  max-width: 560px;
  margin: 40px auto;
  padding: 24px;
  background: white;
  border-radius: 12px;
}

ul {
  padding: 0;
  list-style: none;
}

li {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

@media (max-width: 480px) {
  body {
    padding: 12px;
  }

  .container {
    margin: 16px auto;
    padding: 18px;
  }
}

Step 3: Add progress tracking

Create script.js:

const habitList = document.querySelector("#habits");
const progress = document.querySelector("#progress");

function updateProgress() {
  const checkboxes = habitList.querySelectorAll(
    'input[type="checkbox"]'
  );

  const completed = [...checkboxes].filter(
    checkbox => checkbox.checked
  ).length;

  progress.textContent =
    `${completed} of ${checkboxes.length} habits completed`;
}

habitList.addEventListener("change", updateProgress);

updateProgress();

Why accessibility matters

A useful interface should work for people who navigate using a keyboard or assistive technology.

This example uses semantic HTML, connects each checkbox to a label and provides a status message with aria-live="polite".

The browser can announce progress changes to assistive technology without forcing the user to search for the updated text.

You should also test keyboard navigation, visible focus indicators, contrast and behaviour at different screen sizes.

Ideas for extending the project

Once the basic version works, consider adding custom habits, a date selector or a weekly progress summary.

You could also save the checklist between sessions. If you use local storage, remember that the information stays in the browser and is not automatically synchronised across devices.

Avoid collecting sensitive personal information unless your application has a clear need and appropriate privacy protections.

Conclusion

This small project combines HTML structure, responsive CSS and JavaScript event handling. More importantly, it shows how accessibility can be considered from the beginning rather than added as an afterthought.

Building a simple interface well is a valuable step towards developing more complex web applications.