samvera-labs
Support 200% zoom in media player on mobile devices
Description
For accessibility purposes, it is recommended to support up to 200% zoom (see WCAG criterion 1.4.4). Although this criterion specifically mentions resizability of text, it makes sense that controls also need to be available at 200% zoom.
Using 200% zoom in the browser, we find that controls are lost from Ramp's media player element on mobile devices in both Safari and Chrome.
Potential solutions:
- keep a fixed width for player and require scrolling (not optimal)
- hide player controls behind some kind of widget that can expand
- wrap player controls to a second row
- don't expand the size of player controls when text is re-sized (not sure if this follow WCAG appropriately)
Done Looks Like
- [ ] Test behavior across platforms (Android zoom is different than iOS)
- [ ] Investigate ways to retain elements on screen at appropriate sizes when at high zoom levels
- [ ] Fix things while investigating as needed
200% zoom in Safari on iPhone 15 (not a mini):
200% zoom (4 notches larger) in Chrome on iPhone 15 (not a mini):
200% zoom (4 notches larger) in Chrome on Galaxy s24:
This problem is potentially less critical on iPhones, as the user only needs to be able to click play, and then controls are accessible from the native player?
I think we can do the following easily to support 200% zoom all supported viewports;
- Move progress bar to the top of controls: One of the non-UX friendly things with the current interface when zoomed in is the progress bar getting smaller with zoom-in and making scrubbing harder. For this we can move progress bar to the top of the controls like below;
This allows us a little bit more space for other controls when zooming in.
- Keep a fixed width to the player after a certain point (number 1 in potential solutions): I tested YouTube on desktop browsers at 200% zoom and beyond. I observed that, after the player reaches a certain width it doesn't adjust the size of the controls. Instead it keeps a fixed width to the player and enable horizontal page scroll. This is helpful, because one of the issues with zooming in Ramp is controls getting hidden and in-accessible after a certain point. I think this might be easier than consolidating icons into a widget (at least for a first-pass), which I haven't been able to figure out yet.
