ADD aria attributes for better accessibility... #1198

francoismassart · 2016-05-18T19:45:33Z

Changes proposed in this pull request:

Make the JS version of jwplayer compatible with Voice Over via aria-label attributes

Fixes #1183
JW7-2628

-Labels can be translated via the config
-aria-label
-aria-hidden (when needed)
-role
-tabindex

-Labels can be translated via the config -aria-label -aria-hidden (when needed) -role -tabindex

jwplayer-robot · 2016-05-18T19:46:01Z

Can one of the admins verify this patch?

robwalch · 2016-05-18T20:56:54Z

Thanks @francoismassart! I'm reviewing with the team and determining which release this can make it in to.

francoismassart · 2016-05-19T05:53:11Z

No problem if you edit my changes but one thing that matter to us is to be able to translate the aria-label's. Our sites are in French, so are our blind users...
Thank you for the feedback.

robwalch · 2016-05-21T00:57:26Z

Yes. We would have liked to figure out internationalization for the player before the labels but hopefully this will get things going in that direction.

I'd like to make the setup option multi-purpose and use simpler names that don't match the CSS classes and allow us to use dot syntax. So for config Defaults it would look more like:

localization: {
  play: 'Play',
  playback: 'Start playback',
  pause: 'Pause',
  volume: 'Volume',
  prev: 'Previous',
  next: 'Next',
  cast: 'Chromecast',
  fullscreen: 'Fullscreen',
  playlist: 'Playlist',
  hd: 'Quality',
  cc: 'Closed captions',
  audioTracks: 'Audio tracks', // need to convert camelCase to hyphens
  replay: 'Replay',
  buffer: 'Loading'
}

This should still allow you to provide localization strings for the aria tags en Français ;)

francoismassart · 2016-05-21T07:31:20Z

Please add also the "live status" translation which is currently harcoded to "Live broadcast" ;-)
Or I can do another PR once you merged the aria labels.

francoismassart · 2016-06-03T11:53:17Z

@robwalch do you have any feedback on this PR?
Thank you

robwalch · 2016-06-03T19:05:26Z

Yes. I'll inline my comment from above.

robwalch · 2016-06-03T19:07:20Z

src/js/api/config.js

+            'jw-icon-audio-tracks': 'Audio tracks',
+            'jw-icon-replay': 'Replay',
+            'jw-icon-buffer': 'Loading'
+        }


Let's use simpler names that don't match the CSS classes and allow for dot syntax. This aria block should look like:

localization: { play: 'Play', playback: 'Start playback', pause: 'Pause', volume: 'Volume', prev: 'Previous', next: 'Next', cast: 'Chromecast', fullscreen: 'Fullscreen', playlist: 'Playlist', hd: 'Quality', cc: 'Closed captions', audioTracks: 'Audio tracks', // need to convert camelCase to hyphens replay: 'Replay', buffer: 'Loading' }

robwalch · 2016-06-03T19:15:11Z

The main thing is to simplify the names in the aria block. Also please include information in the description regarding browser support and testing. Which operating systems and browsers did you test this on, and what is the best way for our team to validate and test these accessibility features?

Thanks for going the extra mile with role and aria-hidden. We'll need to evaluate how these and the especially the tabindex changes impact the player on it's own and within existing sites.

Import changes from jwplayer/jwplayer:master

…into aria-attributes

+ ADD accessibilty.md with plenty of documentation and notes + `config.aria` to `config.localization` ... + renaming properties of `config.localization` + ADD new translations for `more`, `liveBroadcast` & `loadingAd` + TESTING providing `<meta charset="utf-8">` allowing the usage of accents inside the html file + TESTING using custom `aria-label` values set via `config.localization` in French + FIX for assigning the role attribute valur in `controlbar.js`

Importing latest change fro the `master` of `jwplayer/jwplayer`

…into aria-attributes

francoismassart · 2016-06-14T15:03:09Z

Hey @robwalch about the tabindex usage, it should not cause any issue.
I added more explainations inside the accessibility.md

tabindex="0" means "please allow this html node to be accessed via the tab key (even if it is a <div>), but don't change the order, just use the same order as the markup"

tabindex="-1" means "please ignore this html node when the user uses the tab key"

tabindex="1", tabindex="2", etc. (any other value than "0" or "-1") should never be used because it messes with the natural order defined by the markup and it'll quickly become nearly impossible to manage and can create unexpected tab jumps...

You can read more about this here:
Don’t Use Tabindex Greater than 0

As you will read inside the accessibility.md, there is still other issues to fix for improving the accessibility in JWPlayer but this would be already nice to have.

Can you merge or provide additional feedback ?

Cheers

johnBartos · 2016-06-14T15:08:52Z

src/js/view/components/tooltip.js

+                this.el.setAttribute('role', 'button');
+                this.el.setAttribute('aria-label', ariaText);
+            }
+            if (ariaShown === true) {


more succinct to write as if (ariaShown)

robwalch · 2016-06-14T15:24:27Z

Thank you @francoismassart. My team needs to demo the new features to our product manager to get it our roadmap.

I'd like us to set the milestone of 7.5 for this, but it might have to wait until later. I'll keep you posted.

francoismassart · 2016-06-14T15:57:18Z

@robwalch, I can make a quick screencast demonstrating the before/after user experience if you want.
Just let me know :^)

dannyfinks · 2016-06-23T20:58:06Z

test this please

…st/vtt-unit * 'master' of https://github.com/jwplayer/jwplayer: (21 commits) Setup 608 Captions in mixin (#1274) Add subtitles tracks to CC menu JW7-2641 Set default line value to -1 instead of 'auto' so captions render in the same line in Safari and Chrome. Revert view changes to captions layer positioning Add sideloaded tracks using video method JW7-2484 Sort levels for Flash in flash.js JW7-2607 Style focused elements using hover colors JW7-2628 Improvements from feedback Split VTT.js into: vttparser, vttcue (polyfill), vttregion (polyfill), vttrenderer. Updated mixin and renderer to load files async only when needed. Remove log messages Cleanup code and improve comments Convert flash 608 cues to VTTCues for rendering with VTT.js Working on consistent loading of tracks across providers Always apply captions styles in renderer Only set track mode when rendering natively. Add polyfill to captions renderer Port all track loading functionality to the tracks mixin Leverage VTT.js for non-native captions rendering JW7-1657 ADD aria attributes for better accessibility... (#1198) JW7-2628 Fixes #1149: Remove bower dependencies Emit meta events for cue changes in Safari JW7-2637 Try to play the next item in adpod on error ...

ADD aria attributes for better accessibility...

1f8321a

-Labels can be translated via the config -aria-label -aria-hidden (when needed) -role -tabindex

robwalch self-assigned this May 18, 2016

robwalch reviewed Jun 3, 2016
View reviewed changes

francoismassart added 5 commits June 8, 2016 08:21

Merge pull request #1 from jwplayer/master

b524e83

Import changes from jwplayer/jwplayer:master

Merge branch 'master' of https://github.com/francoismassart/jwplayer …

996652f

…into aria-attributes

Merge pull request #2 from jwplayer/master

e1bded4

Importing latest change fro the `master` of `jwplayer/jwplayer`

Merge branch 'master' of https://github.com/francoismassart/jwplayer …

f237d0c

…into aria-attributes

johnBartos added the enhancement label Jun 14, 2016

johnBartos reviewed Jun 14, 2016
View reviewed changes

johnBartos self-assigned this Jun 14, 2016

robwalch added this to the v7.5.0 milestone Jun 22, 2016

robwalch merged commit feaec89 into jwplayer:master Jun 27, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ADD aria attributes for better accessibility... #1198

ADD aria attributes for better accessibility... #1198

francoismassart commented May 18, 2016 •

edited by robwalch

jwplayer-robot commented May 18, 2016

robwalch commented May 18, 2016

francoismassart commented May 19, 2016

robwalch commented May 21, 2016

francoismassart commented May 21, 2016

francoismassart commented Jun 3, 2016

robwalch commented Jun 3, 2016

robwalch Jun 3, 2016

robwalch commented Jun 3, 2016

francoismassart commented Jun 14, 2016

johnBartos Jun 14, 2016

robwalch commented Jun 14, 2016

francoismassart commented Jun 14, 2016

dannyfinks commented Jun 23, 2016

ADD aria attributes for better accessibility... #1198

ADD aria attributes for better accessibility... #1198

Conversation

francoismassart commented May 18, 2016 • edited by robwalch

Changes proposed in this pull request:

jwplayer-robot commented May 18, 2016

robwalch commented May 18, 2016

francoismassart commented May 19, 2016

robwalch commented May 21, 2016

francoismassart commented May 21, 2016

francoismassart commented Jun 3, 2016

robwalch commented Jun 3, 2016

robwalch Jun 3, 2016

Choose a reason for hiding this comment

robwalch commented Jun 3, 2016

francoismassart commented Jun 14, 2016

johnBartos Jun 14, 2016

Choose a reason for hiding this comment

robwalch commented Jun 14, 2016

francoismassart commented Jun 14, 2016

dannyfinks commented Jun 23, 2016

francoismassart commented May 18, 2016 •

edited by robwalch