search

lhz516 / react-h5-audio-player

React audio player component with UI. It provides time indicator on both desktop and mobile devices.
https://codepen.io/lhz516/pen/dyGpmgP
MIT License
587 stars 91 forks source link

Change of layout and screen reader #227

Closed liber09 closed 4 weeks ago

liber09 commented 2 months ago

When i change layout to stacked-reverse voiceover (Mac/iPhone) and jaws (pc) and talkback (Android) speaks the time and progress bar before it speaks play button etc. It would be more natural if screen readers would follow the visual layout.

Environment

Package version: 3.9.1 React version: 18.2.0 Browser and its version: Latest versions of chrome (mac, pc, android), Safari (iOS, mac) OS and its version: iOS (17.4.1), MacOS (Sonoma 14.4), Windows 11 (23H2)

lhz516 commented 2 months ago

The stacked-reverse layout uses flex-direction: column-reverse;. Based on MDN, there isn't a good solution. Do you have any ideas except making large refactors?

liber09 commented 2 months ago

The stacked-reverse layout uses flex-direction: column-reverse;. Based on MDN, there isn't a good solution. Do you have any ideas except making large refactors?

No i looked into the link you provided and unfortunately I can't figure out a satisfactory solution. I am using your player on a website that is for people using screenreaders but so it would be nice to have screen readers reading the player correctly but i understand that such large refactors would be troublesome to do.

lhz516 commented 4 weeks ago

It seems no solution unless we no longer use flex-direction: column-reverse. Maybe I can address this in the next major version. I'll keep it in mind. Closing it for now.