Some accessibility considerations


Just adding this here for visibility of users in my situation, as well as the devs/dev. At present, the interface for the extension is pretty much completely inaccessible for people using a screen reader; a tool that parses and reads content off the screen for visually impaired computer users.
Screen readers are unable to infer what the various controls of the extension’s main overlay do, which makes it necessary to …pretty much click everything that is clickable in order to figure out what everything does. Given this is all done using web technologies (HTML, CSS and JS) this will in most cases be fixable pretty easily. I would love someone to take an hour or two to fix what can be fixed, but until then, screen reader users, here’s the deets:

  • A lot of the elements in the main interface are either unlabeled graphics (no alt text) or clickable elements without a role (clickable div elements, i tags without a textual label through ARIA, JS-enhanced non-semantic elements, that kind of thing). This is not the case for most settings panels, those can be easily interacted with in most cases.
  • Explore by hammering enter on anything the screenreader deems clickable, as these are mostly the toggles for panels to come up. Tabbing, as opposed to using browse mode, will at times make the SR read tooltips which can at least help you find the Settings panel, after you have enabled the extension, which requires interacting with one of the earlier mentioned clickables.
  • It’s a bit of a doozie, but once the extension’s actually enabled, the interface will change a little, and this is when you set your settings. In particular, turning off the “Subtitles List” is probably a good idea, as you can’t easily get past it to look at the other things. In contrast, it does show the subtitles with spaces in them, so that might be a use case for it being on, see below.
  • Probably best to use hotkeys from this point onwards. If the default netflix player controls vanished, it’s again under one of the clickables. But, in Focus Mode: left = previous sub, right = next sub, down = repeat sub, q = pause after every sub.
  • The subtitle, as well as it’s English translation, shows up all the way at the bottom of the window for screenreaders. Unfortunately, the way subs are rendered (at least the foreign language one, not the translation) strips all white space from them. Without having dug into the code I think words are placed in individual span elements and then combined, which apparently causes SRs to not notice there’s spaces between them. Anywho, this is where a braille display comes in handy if you have one. If not, character by character reading is your only rercourse until this gets improved.
  • Simulating a mouse click on a word will have TTS read the word, and a little window will come up with the word’s meaning, if available. It will also have usage examples which, pro tip here, will have the subtitle with spaces as well. If you are tenacious enough I guess you could click a word in every subtitle to look at it like that, except please don’t, nobody is that much of a masochist.
  • Right clicking seems to let you save a word, which I haven’t tested as I’m not currently a paying customer.

I love that this tool exist. I would love it even more if the issues highlighted above could be given some love. I would NOT love it if the subs vanish from the DOM entirely and only rendered on a canvas, as that would make them unreadable for screenreaders entirely and make the extension completely useless. If we go that route please for all that is holy make it an opt-out so I don’t have to strike another tool for language learning off my list.

Thanks, and I hope this helps anyone in the future,

1 Like