[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)}
/>
相关文章
- 走进“yarn create vite”的源码学习
- ORA-01518: CREATE DATABASE must specify more than one log file ORACLE 报错 故障修复 远程处理
- ORA-27154: post/wait create failed ORACLE 报错 故障修复 远程处理
- ORA-39322: Cannot use transportable tablespace with TIMESTAMP WITH TIME ZONE columns and different time zone version. ORACLE 报错 故障修复 远程处理
- ORA-54651: CREATE_TIN: invalid parameters specified in creation of TIN ORACLE 报错 故障修复 远程处理
- ORA-64105: Cannot create domain index on XMLIndex internal tables. ORACLE 报错 故障修复 远程处理
- ORA-02176: invalid option for CREATE ROLLBACK SEGMENT ORACLE 报错 故障修复 远程处理
- ORA-08115: can not online create/rebuild this index type ORACLE 报错 故障修复 远程处理
- ORA-08120: Need to create SYS.IND_ONLINE$ table in order to (re)build index ORACLE 报错 故障修复 远程处理
- ORA-12066: invalid CREATE MATERIALIZED VIEW command ORACLE 报错 故障修复 远程处理
- ORA-13537: invalid input for create baseline template (string, string) ORACLE 报错 故障修复 远程处理
- MySQL Error number: MY-013899; Symbol: ER_IB_MSG_LOG_PFS_CREATE_TABLES_FAILED; SQLSTATE: HY000 报错 故障修复 远程处理
- Python3 pip命令报错:Fatal error in launcher: Unable to create process using ‘”‘详解编程语言
- BAPI_MATERIAL_BOM_GROUP_CREATE创建BOM详解编程语言
- migo的BAPI示例BAPI_GOODSMVT_CREATE详解编程语言
- Linux下Time命令实用技巧研究(linux的time命令)
- 时空中的MySQL:Time函数(mysql time())
- 深入了解MySQL中的Time类型(mysql中time类型)
- MySQL中的Time数据类型解析(mysql中time型号)
- 深入了解MySQL中TIME数据类型(mysql中time)