构建可访问的音频控制器

Source: Dev.to

概述

在 freeCodeCamp 完成两天的 ARIA 理论课程后，下一次工作坊的重点是构建一个可访问的音频控制器。会议从一个完整示例开始，随后通过一系列递增步骤添加标记和 ARIA 属性。

步骤指南

1. 基础 HTML 模板

  
    
    Accessible Controls
  
  
  

2. 添加基本元素

• 一个用于页面标题的 “ 标题。
• 一个 Play 按钮。
• 一个 ，其中包含两个带有 `id` 属性的 元素，稍后将被 ARIA 引用。

3. 添加音量滑块

插入一个 “，类型为 range，并设置 min、max 和 value 属性以控制音量。

4. 应用 ARIA 属性

使用 aria-labelledby 将滑块链接到先前创建的 “ 元素。

5. 添加静音按钮

在 “ 下方放置第二个按钮，文本为 Mute，并设置 type="button"。

完整代码

  
    
    Accessible Controls
  
  

    
## Audio Controls

    Play

    
      Volume
      Adjust the sound level
      
    

    Mute

  

接下来的步骤

freeCodeCamp 课程将继续进行可访问媒体元素的理论课程，随后安排三个实验。第一个实验是 构建结账页面。更多细节将在下一次更新中分享。