diff --git a/src/js/poster-image.js b/src/js/poster-image.js index ad890323d0..2e9057a632 100644 --- a/src/js/poster-image.js +++ b/src/js/poster-image.js @@ -46,15 +46,21 @@ class PosterImage extends ClickableComponent { * The element that gets created. */ createEl() { - const el = Dom.createEl('picture', { - className: 'vjs-poster', - - // Don't want poster to be tabbable. - tabIndex: -1 - }, {}, Dom.createEl('img', { - loading: 'lazy', - crossOrigin: this.crossOrigin() - })); + const el = Dom.createEl( + 'picture', { + className: 'vjs-poster', + + // Don't want poster to be tabbable. + tabIndex: -1 + }, + {}, + Dom.createEl('img', { + loading: 'lazy', + crossOrigin: this.crossOrigin() + }, { + alt: '' + }) + ); return el; } diff --git a/test/unit/poster.test.js b/test/unit/poster.test.js index 98e0d5970e..4ac86fc94d 100644 --- a/test/unit/poster.test.js +++ b/test/unit/poster.test.js @@ -42,6 +42,12 @@ QUnit.test('should mirror crossOrigin', function(assert) { }); +QUnit.test('should populate an alt attribute', function(assert) { + const posterImage = new PosterImage(this.mockPlayer); + + assert.ok(posterImage.$('img').hasAttribute('alt'), 'img has alt atttribute'); +}); + QUnit.test('should remove itself from the document flow when there is no poster', function(assert) { const posterImage = new PosterImage(this.mockPlayer);