접근성 높은 오디오 컨트롤러 만들기

Source: Dev.to

Overview

freeCodeCamp에서 이틀간 ARIA 이론 수업을 마친 뒤, 다음 워크숍에서는 접근 가능한 오디오 컨트롤러를 만드는 데 집중했습니다. 세션은 완성된 예제로 시작하고, 마크업과 ARIA 속성을 단계별로 추가하는 과정을 진행했습니다.

Step‑by‑Step Guide

1. Boilerplate HTML

  
    
    Accessible Controls
  
  
  

2. Add Basic Elements

• 페이지 제목을 위한 “ heading을 추가합니다.
• Play 버튼을 추가합니다.
• id 속성을 가진 두 개의 요소를 포함하는 를 추가합니다. 이 요소들은 이후 ARIA에서 참조됩니다.

3. Add the Volume Slider

볼륨을 제어하기 위해 min, max, value 속성을 가진 type="range" “ 를 삽입합니다.

4. Apply ARIA Attributes

aria-labelledby 를 사용해 슬라이더를 앞서 만든 “ 요소들과 연결합니다.

5. Add a Mute Button

“ 아래에 Mute 텍스트와 type="button" 속성을 가진 두 번째 버튼을 배치합니다.

Completed Code

  
    
    Accessible Controls
  
  

    
## Audio Controls

    Play

    
      Volume
      Adjust the sound level
      
    

    Mute

  

Next Steps

freeCodeCamp 커리큘럼은 접근 가능한 미디어 요소에 대한 이론 수업을 계속 진행한 뒤, 세 개의 실습을 제공합니다. 첫 번째 실습은 Build a Checkout Page 입니다. 자세한 내용은 다음 업데이트에서 공유될 예정입니다.