Screen Reader: volume control does not announce its state

[miesgre]

The volume control does not announce when the volume is muted or not muted.
It also does not announce what level of volume it is at when the volume is changed.
It should announce it's state.

When using the keyboard, volume does announce it’s state. But it’s not announcing it with the screen reader.

@karendolan

[polimediaupv]

I'm sorry, but I'm afraid I have no idea how to implement this.

So far we have implemented all the accessibility features with the help of volunteer consultants. If you could give me more information on how I can implement and test this feature I would appreciate it.

[miesgre]

From @karendolan email:

The issue we had was the display=none hide the slider from the screen reader, so it could not be found when the video was playing. Using opacity = 0 kept the slider accessible to screen readers so it could be found.

These are the changes for es.upv.paella.volumeButtonPlugin.js:

   showSideContainer() {
     if (!this.volumeAlwaysVisible) {
+      // this.sliderContainer.style.transition = 'scaleX(1) opacity 1s';
       this.sliderContainer.style.display = 'inline-block';
+      this.sliderContainer.style.opacity = '1';
+      this.sliderContainer.style.visibility = '100px';
+      this.sliderContainer.style.transition = 'all 1s';
     }
   }
 
   hideSideContainer() {
     if (!this.volumeAlwaysVisible) {
+      this.sliderContainer.style.opacity = '0';
+      this.sliderContainer.style.transition = 'all 1s';
+      this.sliderContainer.style.width = '0px';
-      this.sliderContainer.style.display = 'none';
     }
   }

[karendolan]

Hi @ferserc1, Youtube puts information about volume level on the slider. If Paella keeps it's slider accessible to the screen reader, with opacity = '0' width = '0px' instead of display = 'none', then the slider could be the means of announcing the volume state.

Example Youtube's ARIA volume attributes on their volume slider:

<div class="ytp-volume-panel" title="Volume" role="slider" aria-valuemin="0" aria-valuemax="100" tabindex="0" aria-valuenow="100" aria-valuetext="100% volume" aria-label="Volume" style="">
  <div class="ytp-volume-slider" draggable="true" style="touch-action: none;">
    <div class="ytp-volume-slider-handle" style="left: 40px;">
    </div>
  </div>
</div>