title: How to make an audio level indicator accessible?
body: <p>I'm trying to build an accessible audio indicator for a WebRTC video chat. It should basically show how loud you're talking, when you're talking. Here is the isolated code (for Codesandbox, you need to install <code>styled-components</code>).</p>
  <pre><code>import React, { useEffect, useRef, useState } from &quot;react&quot;;
  import styled, { css } from &quot;styled-components&quot;;
  import &quot;./styles.css&quot;;
  
  function useInterval(callback, delay) {
    const savedCallback = useRef();
  
  
    useEffect(() =&gt; {
      savedCallback.current = callback;
    }, [callback]);
  
  
    useEffect(() =&gt; {
      function tick() {
        savedCallback.current();
      }
  
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () =&gt; clearInterval(id);
      }
    }, [delay]);
  }
  
  const VolumeMeterWrapper = styled.div`
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    height: 32px;
    width: 32px;
  `;
  
  const VolumeBar = styled.div`
    background: #25a968;
    border-radius: 1px;
    height: 4px;
    margin: 0 2px;
    width: 8px;
    transition: all 0.2s linear;
    transform: ${({ level }) =&gt; css`scaleY(${level + 1})`};
  `;
  
  function VolumeMeter({ level }) {
    return (
      &lt;VolumeMeterWrapper&gt;
        &lt;VolumeBar level={level &gt; 3 ? ((level - 2) * 5) / 4 : 0} /&gt;
        &lt;VolumeBar level={level} /&gt;
        &lt;VolumeBar level={level &gt; 3 ? ((level - 2) * 5) / 4 : 0} /&gt;
      &lt;/VolumeMeterWrapper&gt;
    );
  }
  
  export default function App() {
    const [level, setLevel] = useState(0);
    const [count, setCount] = useState(0);
  
    useInterval(() =&gt; {
      setCount((c) =&gt; c + 1);
  
      if (count % 10 &gt; 4) {
        setLevel((l) =&gt; l - 1);
      } else {
        setLevel((l) =&gt; l + 1);
      }
    }, 200);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
        &lt;h2&gt;Start editing to see some magic happen!&lt;/h2&gt;
        Level: {level}
        &lt;VolumeMeter level={level} /&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/hnrXg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hnrXg.png" alt="A picture of the audio indicator" /></a></p>
  <p>In this example there is no real audio input as you can see. The &quot;level&quot; fakes how loud the person would be talking.</p>
  <p>How would you make something like this accessible? Would you even need to do that (because inspecting the UI of various providers didn't show any special tags or aria-labels)?</p>