[Accessibility] Create a Human Readable Time Formatter

In this lesson, we are using HTML, accessibility concepts, and ARIA attributes to improve the time scrubber feature of an audio player.

The goal is to make it accessible to users of screen readers so that the time scrubber announces the actual time (e.g. 12 minutes and 15 seconds) rather than just the value (e.g. 735).

We are also creating a new folder called "helpers" in the "src" folder and a new file called "format time.js" within it to hold a function called "format human read time" that takes time as a parameter and returns the human-readable equivalent of that time. Additionally, the author debugs the code and uses console.log to check the variable.

 

Format time helpers

export const formatTime = (time) => {
  // Hours, minutes and seconds
  const hrs = Math.floor(~~(time / 3600)); // eslint-disable-line
  const mins = Math.floor(~~((time % 3600) / 60)); // eslint-disable-line
  const secs = Math.floor(time % 60);

  // Output like "1:01" or "4:03:59" or "123:03:59"
  let ret = "";

  if (hrs > 0) {
    ret += `${hrs}:${mins < 10 ? "0" : ""}`;
  }

  ret += `${mins}:${secs < 10 ? "0" : ""}`;
  ret += `${secs}`;
  return ret;
};

export const formatHumanReadTime = (time) => {
  const formattedTime = formatTime(time);
  const timeArray = formattedTime.split(":").map((time) => parseFloat(time));

  let string = "";
  let minutes;
  let seconds;

  if (timeArray.length > 2) {
    string += `${timeArray[0]} ${timeArray[0] === 1 ? `hour` : `hours`}, `;
    minutes = timeArray[1];
    seconds = timeArray[2];
  } else {
    minutes = timeArray[0];
    seconds = timeArray[1];
  }

  string += `${minutes} ${minutes === 1 ? `minute` : `minutes`}, `;
  string += `${seconds} ${seconds === 1 ? `second` : `seconds`}`;

  return string;
};

 

To make, for example, custom audio player time humun readable, we can use aria-valuetext

<input
  type="range"
  id="time-scrubber"
  value={mediaTime}
  min={0}
  max={duration}
  onChange={onScrubberChange}
  aria-valuetext={formatHumanReadTime(mediaTime)}
/>