The Web Content Accessibility Guidelines (WCAG) is a set of web standards that covers a wide range of recommendations for making web content more accessible.
By following these guidelines, companies can create content that is available to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement and speech disabilities, as well as people with learning disabilities and cognitive limitations.
To ensure that our interactive video player lived up to the accessibility standards set out, the Vudoo platform is WCAG 2.1 AA compliant to support this so that we can offer a superior interactive video experience for everyone, across a range of different devices.
What accessibility features are included in the Vudoo platform?
Pin
The screen reader will announce this interaction as ‘Interactive Marker’ when it appears within the video.
When creating a label for the pin, enter ‘Label Text’ field to provide further pin description for screen reader user.
The screen reader will then read the field description as ‘Interactive Marker (and any additional text provided)’ when the pin appears within the video.
For example, ‘Interactive Marker More Info’.
The screen reader will read the pins based on creation order. The first pin to be created in the Vudoo platform will be read by the screen reader first, this process will be followed in order of pin creation.
Hotspot and Pulse
The screen reader will announce each of these interactions as ‘Interactive Marker’ when they appear within the video.
Complete the ‘Pin accessibility’ field to provide further pin description for screen reader.
The screen reader will read the ‘Pin accessibility field’. It will initially announce ‘Interactive Marker' followed by the text included within the Pin accessibility field when the pin appears within the video.
For example, ‘Interactive Marker Shop here’.
Overlay components
Image Carousel
Carousel Title
This field will appear if more than 1 image is added. It is used to give more informative descriptions for the images in the carousel for screen reader users.
Image carousel previous and next arrows
When a user tabbing to the next or previous arrow, it will read the corresponding image alt attribute.
Note: Each image alt attribute should be descriptive to avoid confusion for screen reader user.
Image skip link
The skip link will become automatically visible before an image carousel when focus is placed on the link or upon tabbing to the image carousel. A skip link is available to bypass the screen reader to read all the images alt attributes.
Info: The screen reader will explain that the carousels contain purely visual information.
Button
Allow the button to become accessible to screen readers by including the description for the button within the 'Accessibility Screen reader description' section.
Once this information is included the button action to be specifically described.
Info: This field will provide further description of the purpose of the button for a screen reader user.
The screen reader will read both the button ‘Text' field and the 'Accessibility - Screen reader description' field together. It also will automatically announce the following at the end of it:
‘Opens in new tab' if External in ‘Set link URL’ was selected
‘Opens in new tab' if ‘Phone’ was selected
‘Opens in new window’ if Email was selected
Heading
Select heading level
Specify the heading level by using this field.
Info: It will be read by the screen reader to provide clear and logical headings structure for screen reader users.
Polling
Screen reader will automatically read the poll fields and button when a user focus on them. When users select an answer from the poll, the answer is announced to screen reader users.
Keyboard focus indicator is clearly visible
Vudoo Form
Screen reader will alert user about the form
Screen reader will automatically read the form fields when a user tabbing into the field
Screen reader will automatically read the form submit button when a user tabbing into it
Keyboard focus indicator is clearly visible
Social media and App store badges
Aria label has been added to provide information needed by Assistive Technology such as screen reader. Screen reader will announce each social media and app store badges upon tabbing.
Subtitles/Closed Captions
You have the ability to add subtitles and closed captions to any of your videos.
In your dashboard, find the video you wish to add a subtitles to and click ‘edit’
Click on ‘Interactions’ in the editor to the right of the video
Click ‘Add Subtitles/CC’
Here you will be presented with an option to upload an .srt file or to add subtitles from a selection of languages within the Vudoo platform
if choosing to add your preferred languages, this can be done by using the ‘auto subtitles’ button. You can add as many as you like and your preferred languages can then be selected using the dropdown menu
Choose the time your subtitles should appear. You can drag the indicators on the slider underneath the video or manually enter the start and end times in the editor
Enter the text of your subtitle and you will see it appear in the video
Click ‘Add Subtitle’ to create an additional subtitle and enter the start time and text
Repeat this until you have added all your subtitles
If you wish to create subtitles in multiple languages, choose a different language from the dropdown menu (or add using ‘auto subtitles’) and repeat the process
To make your subtitles visible in the video, tick “Publish [language] subtitles” and then “Save”
If you wish to upload an already prepared .str file, this can be completed by selecting 'Upload .srt' button
The prompt will ask what language the .srt will be, this must be selected.
Upload as many files are required and be sure to select each of the required files and select 'publish'
When you’re finished click ‘Done’ to go back to the interactions page
Adding Audio Description
The Audio Description file must be previously created prior to this process, the Vudoo platform does not create the audio description for videos.
Tip: The audio description needs to provide contextual information relating to what is happening on-screen as well as the original/default track in one audio stream
Within the Vudoo editing suite, under the Interactions tab, ‘Audio Tracks’ will be available for selection
Info: Viostream, Ooyala and Brightcove do not have audio tracks function
When selecting this, a ‘Drag and drop’ option will be presented to allow for the Audio description file to be uploaded at this point
Info :Your Audio Description must be in MP3, MP4, MOV and WAV file and must not be larger than 5GB
There is an option to drag and drop the file or to select the ‘Choose file’ button, which will open up from the local computer file selected
Tip: Audio track will be required to be the same duration as the video or longer
Select ‘open’ once the correct file is chosen
Information on the Audio track will be prompted within the next screen, requiring a language of the audio description to be selected
Tip: If the specific language is not listed within the list provided, there is an option to select ‘Custom’ and add the name of the specific language as required
The type of track will also be required to be selected - Audio Description, Audio translation or Audio Commentary
Info : Both the language and the type of track will be available for the viewer to select from when watching the video, so be sure to provide this information.
Select ‘add track’ once this has been completed
The Audio description page will then provide a list of all the tracks that had been uploaded for that particular video
It can be previewed by selecting ‘preview’ relating to that specific audio track
It can be edited by hovering over the required track and select ‘click to edit’ - replacing the file, deleting and editing the language or the track will be available at that point
Select the track that requires to publish by ticking the checkbox next to the specific track, or by choosing ‘Select all’ along the top bar options to select all the tracks uploaded
Select ‘Publish’ to publish the track/s chosen or select ‘unpublish’ or ‘delete’ if the track is no longer required
Each track will show ‘unpublished’ or ‘published’ to share the status of the tracks
Once finished and the tracks are all selected to be published that are required, select ‘Im done’
Tip: The ‘sort by’ option will allow you to sort the tracks in a specific order if required
In the output, the video will show a microphone icon in the bottom right corner, next to the closed captions if they are included within the video, the viewer can then select the audio description track specific to their requirements.
Info: Legacy video will have audio tracks widget only if they were uploaded after June 30th 2020 and are M3u8 videos
Still stuck? Our friendly team is on hand to help at <support@vudoo.com> or call 1300 4 VUDOO.