WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: A bit of guidance needed regarding sections, regions and Terrill Thompson's AblePlayer

for

Number of posts in this thread: 1 (In chronological order)

From: Jonathan H
Date: Mon, Jul 15 2019 7:41AM
Subject: A bit of guidance needed regarding sections, regions and Terrill Thompson's AblePlayer
No previous message | No next message

I'm trying to embed Terrill Thompson's excellent AblePlayer into a
very simple page for local talking newspapers to play their content,
but secondary to the other playlist links and other ways of listening
(via Alexa, phone etc).
Here's a "live dev" page which could change at any time:
https://sheffield.talking-news.info/listen2/

The information that I want to convey is all there, I now need to turn
attention to layout. I've tried experimenting with both roles,
landmarks and sections, but I'm starting to wonder whether I should
just rely on "main", with "aside" for the sidebar, and just let the
headings to do rest. Wouldn't hearing "complimentary landmark" get
annoying for people after a while? Thoughts on the navigation aspect
would be appreciated. This is just a start and header/footer aren't in
yet, but you can steer me in the right direction if I've got it wrong!
Particularly with limiting the viewport of the tracklist, so it
becomes a scrollbar - in my own testing on Android, it becomes easy to
grab the playlist area by accident, but then again, wouldn't most
people be navigation with the talkback left/right/two finger gestures
in any case?

Secondly, while AblePlayer is great, the player itself doesn't have
functionality to skip to next track. Although this has been repeatedly
requested by people over the years in the repo, for whatever reason,
Terril has decided not to provide what my test users see as pretty
basic #1 functionality of a playlist. I'm trying to find an
accessible-friendly way to hack this without messing with core
AblePlayer code - has anyone else done it before?

I did find a hack that would use jQuery to "click" the next item in
the playlist after the active item, but of course, that brought focus
away from where the user thought they currently were.
I know I should be able to "talk to" AblePlayer via $(AblePlayer)[0]
and $(".able-playlist"), but really, my javascript-fu is lacking.

I also tried setting data-seek-interval="10000" which kind of works,
but with a long track and slow internet, everything hangs while the
media loads so it can seek to the end, before it plays the next track.

Here is an unadulterated demo:
https://ableplayer.github.io/ableplayer/demos/audio3.html

PS - visually, people like the thin bar demarking the right hand
sidebar, but of course, when it collapses on mobile viewports, I'm
still left with the line.
But that's more of a CSS question, this is just to say I'm aware of it
(and it might have gone by the time you look!)

PPS - I discovered that an organisation has made an app to try and
duplicate this player functionality, but within an app. I've tried to
use it, but from the perspective of a sighted person with only novice
level of using Talkback I couldn't get on with it very well. Nothing
to do with me, but if you want to give it a go and compare it with the
standard web player, then please let me know if they're doing anything
significantly better with navigation https://bwbf.org.uk/beta/